經(jīng)過一段時間的準(zhǔn)備，新的一期【ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)】已經(jīng)開始，在之前的文章中，講解了商城系統(tǒng)的整體功能設(shè)計，頁面布局設(shè)計，環(huán)境搭建，系統(tǒng)配置，及首頁商品類型，banner條，友情鏈接等功能的開發(fā)，今天繼續(xù)講解首頁的降價促銷，新品爆款等內(nèi)容，僅供學(xué)習(xí)分享使用，如有不足之處，還請指正。
![[回饋]ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)(二)](https://imgs.yssmx.com/Uploads/2023/07/600429-1.png)
?
開發(fā)工具及技術(shù)
?
在本商城系統(tǒng)實例中，主要用到的開發(fā)工具和技術(shù)，如下所示：
- 開發(fā)工具，Visual Studio 2022?
- 數(shù)據(jù)庫，SQL Server Management Studio 2012
- 開發(fā)框架，基于.Net 6.0的ASP.NET Core MVC
- 前端框架，基于項目自帶的bootstrap，jQuery等前端庫。
?
頁面布局
?
根據(jù)前一篇文章的講解，在首頁除了商品類型，banner條，友情鏈接外，還有降價促銷，新品爆款兩個部分，為首頁產(chǎn)品展示的核心，具體布局如下所示：
![[回饋]ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)(二)](https://imgs.yssmx.com/Uploads/2023/07/600429-2.png)
?
數(shù)據(jù)表設(shè)計
?
首先設(shè)計產(chǎn)品表Product，主要用于存儲產(chǎn)品的詳細(xì)信息，包括產(chǎn)品名稱，價格，店鋪ID等內(nèi)容，具體如下所示：
![[回饋]ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)(二)](https://imgs.yssmx.com/Uploads/2023/07/600429-3.png)
建表語句，如下所示：
CREATE TABLE [dbo].[EB_Product](
[Id] [bigint] IDENTITY(1,1) NOT NULL,
[ShopId] [bigint] NULL,
[Name] [varchar](100) NULL,
[CategoryId] [bigint] NULL,
[SubCategoryId] [bigint] NULL,
[Price] [money] NULL,
[Preferential] [numeric](18, 4) NULL,
[PreferentialPrice] [money] NULL,
[Description] [text] NULL,
[Brand] [varchar](50) NULL,
[BasicStyle] [varchar](50) NULL,
[ProductStyle] [varchar](50) NULL,
[Year] [varchar](50) NULL,
[Season] [varchar](50) NULL,
[Scenario] [varchar](50) NULL,
[ImageUrl] [varchar](500) NULL,
[CreateTime] [datetime] NULL,
[CreateUser] [varchar](50) NULL,
[LastEditTime] [datetime] NULL,
[LastEditUser] [varchar](50) NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]?
商品實體創(chuàng)建
?
產(chǎn)品表對應(yīng)的項目模型實體，和數(shù)據(jù)表一一對應(yīng)，如下所示：
using SqlSugar;
namespace EasyBuyShop.Models
{
[SugarTable("EB_Product")]
public class Product : EntityModel
{
/// <summary>
/// 店鋪ID
/// </summary>
public long ShopId { get; set; }
/// <summary>
/// 產(chǎn)品名稱
/// </summary>
public string Name { get; set; }
/// <summary>
/// 大類ID
/// </summary>
public long CategoryId { get; set; }
/// <summary>
/// 小類ID
/// </summary>
public long SubCategoryId { get; set; }
/// <summary>
/// 價格
/// </summary>
public decimal Price { get; set; }
/// <summary>
/// 打折后價格
/// </summary>
public decimal PreferentialPrice { get; set; }
/// <summary>
/// 品牌
/// </summary>
public string Brand { get; set; }
/// <summary>
/// 折扣
/// </summary>
public decimal Preferential { get; set; }
public string Description { get; set; }
/// <summary>
/// 基礎(chǔ)風(fēng)格
/// </summary>
public string BasicStyle { get; set; }
/// <summary>
/// 產(chǎn)品風(fēng)格
/// </summary>
public string ProductStyle { get; set; }
/// <summary>
/// 年份
/// </summary>
public string Year { get; set; }
/// <summary>
/// 季節(jié)
/// </summary>
public string Season { get; set; }
/// <summary>
/// 主要場景
/// </summary>
public string Scenario { get; set; }
/// <summary>
/// 主圖片Url
/// </summary>
public string ImageUrl { get; set; }
}
}?
數(shù)據(jù)處理層DAL
?
數(shù)據(jù)處理層用于和數(shù)據(jù)庫進行交互，本次主要用于獲取折扣Top3，和新品Top100這兩種條件的的商品列表，如下所示：
using EasyBuyShop.Models;
using EasyBuyShop.Utils;
namespace EasyBuyShop.DAL
{
public class ProductDal:BaseDal
{
/// <summary>
/// 新品前100
/// </summary>
/// <returns></returns>
public List<Product> GetTopNew100()
{
try
{
using (var db = this.GetDb(BaseDal.ConnStr))
{
return db.Queryable<Product>().OrderByDescending(r => r.Id).Take(100).ToList();
}
}
catch (Exception ex)
{
LogHelper.Fatal(ex.Message);
return new List<Product>();
}
}
/// <summary>
/// 折扣Top3
/// </summary>
/// <returns></returns>
public List<Product> GetTopDisCount3()
{
try
{
using (var db = this.GetDb(BaseDal.ConnStr))
{
return db.Queryable<Product>().OrderByDescending(r => r.Preferential).Take(3).ToList();
}
}
catch (Exception ex)
{
LogHelper.Fatal(ex.Message);
return new List<Product>();
}
}
}
}注意：上述功能采用SqlSugar自帶的方法實現(xiàn)，會根據(jù)Lamada表達式生成對應(yīng)的SQL語句，可減少手寫SQL的繁瑣。
?
控制器獲取
?
因為降價促銷和新品爆款，也是首頁的一部分，所以需要在首頁控制器HomeController中，獲取對應(yīng)商品，傳遞到視圖層，如下所示：
using EasyBuyShop.DAL;
using EasyBuyShop.Models;
using Microsoft.AspNetCore.Mvc;
using System.Diagnostics;
namespace EasyBuyShop.Controllers
{
public class HomeController : Controller
{
private readonly ILogger<HomeController> logger;
public HomeController(ILogger<HomeController> logger)
{
this.logger = logger;
}
public IActionResult Index()
{
CategoryDal categoryDal = new CategoryDal();
SubCategoryDal subCategoryDal = new SubCategoryDal();
ProductDal productDal = new ProductDal();
var categories = categoryDal.GetCategories();
var subCategories = subCategoryDal.GetSubCategories();
var topNew100Product = productDal.GetTopNew100();
var topDiscount3Product = productDal.GetTopDisCount3();
ViewData["Categories"] = categories;
ViewData["SubCategories"] = subCategories;
ViewData["TopNew100"] = topNew100Product;
ViewData["TopDiscount3"] = topDiscount3Product;
var username = HttpContext.Session.GetString("username");
var realName = HttpContext.Session.GetString("realname");
ViewBag.Username = username;
ViewBag.RealName = realName;
return View();
}
}
}注意：控制器方法中，往視圖層傳遞數(shù)據(jù)采用ViewData和ViewBag實現(xiàn)，也可采用其他方式實現(xiàn)。具體ViewData和ViewBag傳遞數(shù)據(jù)之間的差異，可參考之前寫的相關(guān)文章。
?
視圖層展示
?
在Views/Home/Index.cshtml視圖頁面中，降價促銷為一行三列，展示降價Top3的商品，具體如下所示：
<!-- banner style 2 start -->
<div class="banner-style-2 pt-100">
<div class="container" style="margin-left:0px;margin-right:0px;padding-right:0px;padding-left:0px;">
<div class="row">
@foreach (var topDiscount in ViewData["TopDiscount3"] as List<Product>)
{
<div class="col-md-4">
<div class="banner-style-2-img mb-res">
<img src="@topDiscount.ImageUrl" alt="">
<div class="banner-style-2-dec">
<h4>@topDiscount.Brand</h4>
<h3>降價 @(Math.Round( topDiscount.Preferential*100,0))% 銷售</h3>
<a href="" onclick="javascript:buy(@(topDiscount.Id));return false;">購買</a><br>
</div>
</div>
<div class="shop-title f-left">
<h3><a href="/Product/Detail/@(topDiscount.Id)">@topDiscount.Name</a></h3>
</div>
</div>
}
</div>
</div>
</div>
<!-- banner style 2 end -->新品爆款為一行四列，展示新品信息，源碼如下所示：
<!-- shop area start -->
<div class="portfolio-area pt-100 pb-70" style="padding-top:100px;padding-bottom:70px;">
<div class="container">
<div class="section-title text-center mb-50">
<h2>新品爆款 <i class="fa fa-shopping-cart"></i></h2>
</div>
<div class="row portfolio-style-2">
<div class="grid" style="position: relative; height: 100%;">
@foreach (var topNewProduct in ViewData["TopNew100"] as List<Product>)
{
<div class="col-md-3 col-sm-6 col-xs-12 mb-30">
<div class="single-shop">
<div class="shop-img">
<a href="/Product/Detail/@(topNewProduct.Id)"><img src="@topNewProduct.ImageUrl" alt=""></a>
<div class="shop-quick-view">
<a href="/Product/Detail/@(topNewProduct.Id)" data-toggle="modal" data-target="#quick-view" title="預(yù)覽">
<i class="pe-7s-look"></i>
</a>
</div>
<div class="price-up-down">
<span class="sale-new">新品</span>
</div>
<div class="button-group">
<a href="#" title="添加購物車" onclick="javascript:addCart(@(topNewProduct.Id));return false;">
<i class="pe-7s-cart"></i>
添加購物車
</a>
<a class="wishlist" href="#" onclick="javascript:buy(@(topNewProduct.Id));return false;" title="立即購買">
<i class="pe-7s-like"></i>
立即購買
</a>
</div>
</div>
<div class="shop-text-all">
<div class="title-color fix">
<div class="shop-title f-left">
<h3><a href="/Product/Detail/@(topNewProduct.Id)">@topNewProduct.Name</a></h3>
</div>
<span class="price f-right">
<span class="new">$@topNewProduct.PreferentialPrice</span>
</span>
</div>
<div class="fix">
<span class="f-left">@(topNewProduct.BasicStyle) | @(topNewProduct.ProductStyle)</span>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
<!-- shop area end -->注意：其中視圖層代碼，采用Razor表達式for循環(huán)，展示列表中的內(nèi)容。關(guān)于Razor表達式的使用可參考其他文章。
?
頁面展示
?
降價促銷功能，運行如下所示：
![[回饋]ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)(二)](https://imgs.yssmx.com/Uploads/2023/07/600429-4.png)
新品爆款功能，運行如下所示：
![[回饋]ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)(二)](https://imgs.yssmx.com/Uploads/2023/07/600429-5.png)
文章來源：http://www.zghlxwxcb.cn/news/detail-600429.html
以上就是ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)第二部分內(nèi)容，后續(xù)將繼續(xù)介紹其他模塊，敬請期待。文章來源地址http://www.zghlxwxcb.cn/news/detail-600429.html
到了這里，關(guān)于[回饋]ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)(二)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[回饋]ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)(六)](https://imgs.yssmx.com/Uploads/2024/02/675111-1.png)
![[回饋]ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)(開篇)](https://imgs.yssmx.com/Uploads/2024/02/578771-1.png)
![[回饋]ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)(完:內(nèi)附源碼)](https://imgs.yssmx.com/Uploads/2024/02/678078-1.png)
