[回馈]ASP.NET Core MVC开发实战之商城系统(二)

马一然

经过一段时间的准备，新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始，在之前的文章中，讲解了商城系统的整体功能设计，页面布局设计，环境搭建，系统配置，及首页商品类型，banner条，友情链接等功能的开发，今天继续讲解首页的降价促销，新品爆款等内容，仅供学习分享使用，如有不足之处，还请指正。

 
开发工具及技术

 
在本商城系统实例中，主要用到的开发工具和技术，如下所示：

• 开发工具，Visual Studio 2022 
  
• 数据库，SQL Server Management Studio 2012
  
• 开发框架，基于.Net 6.0的ASP.NET Core MVC
  
• 前端框架，基于项目自带的bootstrap，jQuery等前端库。
  

 
页面布局

 
根据前一篇文章的讲解，在首页除了商品类型，banner条，友情链接外，还有降价促销，新品爆款两个部分，为首页产品展示的核心，具体布局如下所示：

 
数据表设计

 
首先设计产品表Product，主要用于存储产品的详细信息，包括产品名称，价格，店铺ID等内容，具体如下所示：

建表语句，如下所示：

1. CREATE TABLE [dbo].[EB_Product](
2.         [Id] [bigint] IDENTITY(1,1) NOT NULL,
3.         [ShopId] [bigint] NULL,
4.         [Name] [varchar](100) NULL,
5.         [CategoryId] [bigint] NULL,
6.         [SubCategoryId] [bigint] NULL,
7.         [Price] [money] NULL,
8.         [Preferential] [numeric](18, 4) NULL,
9.         [PreferentialPrice] [money] NULL,
10.         [Description] [text] NULL,
11.         [Brand] [varchar](50) NULL,
12.         [BasicStyle] [varchar](50) NULL,
13.         [ProductStyle] [varchar](50) NULL,
14.         [Year] [varchar](50) NULL,
15.         [Season] [varchar](50) NULL,
16.         [Scenario] [varchar](50) NULL,
17.         [ImageUrl] [varchar](500) NULL,
18.         [CreateTime] [datetime] NULL,
19.         [CreateUser] [varchar](50) NULL,
20.         [LastEditTime] [datetime] NULL,
21.         [LastEditUser] [varchar](50) NULL
22. ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

复制代码

 
商品实体创建

 
产品表对应的项目模型实体，和数据表一一对应，如下所示：

1. using SqlSugar;
3. namespace EasyBuyShop.Models
4. {
5.     [SugarTable("EB_Product")]
6.     public class Product : EntityModel
7.     {
8.         /// <summary>
9.         /// 店铺ID
10.         /// </summary>
11.         public long ShopId { get; set; }
13.         /// <summary>
14.         /// 产品名称
15.         /// </summary>
16.         public string Name { get; set; }
18.         /// <summary>
19.         /// 大类ID
20.         /// </summary>
21.         public long CategoryId { get; set; }
23.         /// <summary>
24.         /// 小类ID
25.         /// </summary>
26.         public long SubCategoryId { get; set; }
28.         /// <summary>
29.         /// 价格
30.         /// </summary>
31.         public decimal Price { get; set; }
33.         /// <summary>
34.         /// 打折后价格
35.         /// </summary>
36.         public decimal PreferentialPrice { get; set; }
38.         /// <summary>
39.         /// 品牌
40.         /// </summary>
41.         public string Brand { get; set; }
43.         /// <summary>
44.         /// 折扣
45.         /// </summary>
46.         public decimal Preferential { get; set; }
47.         public string Description { get; set; }
49.         /// <summary>
50.         /// 基础风格
51.         /// </summary>
52.         public string BasicStyle { get; set; }
54.         /// <summary>
55.         /// 产品风格
56.         /// </summary>
57.         public string ProductStyle { get; set; }
59.         /// <summary>
60.         /// 年份
61.         /// </summary>
62.         public string Year { get; set; }
64.         /// <summary>
65.         /// 季节
66.         /// </summary>
67.         public string Season { get; set; }
69.         /// <summary>
70.         /// 主要场景
71.         /// </summary>
72.         public string Scenario { get; set; }
74.         /// <summary>
75.         /// 主图片Url
76.         /// </summary>
77.         public string ImageUrl { get; set; }
78.     }
79. }

复制代码

 
数据处理层DAL

 
数据处理层用于和数据库进行交互，本次主要用于获取折扣Top3，和新品Top100这两种条件的的商品列表，如下所示：

1. using EasyBuyShop.Models;
2. using EasyBuyShop.Utils;
4. namespace EasyBuyShop.DAL
5. {
6.     public class ProductDal:BaseDal
7.     {
8.         /// <summary>
9.         /// 新品前100
10.         /// </summary>
11.         /// <returns></returns>
12.         public List<Product> GetTopNew100()
13.         {
14.             try
15.             {
16.                 using (var db = this.GetDb(BaseDal.ConnStr))
17.                 {
18.                     return db.Queryable<Product>().OrderByDescending(r => r.Id).Take(100).ToList();
19.                 }
20.             }
21.             catch (Exception ex)
22.             {
23.                 LogHelper.Fatal(ex.Message);
24.                 return new List<Product>();
25.             }
26.         }
28.         /// <summary>
29.         /// 折扣Top3
30.         /// </summary>
31.         /// <returns></returns>
32.         public List<Product> GetTopDisCount3()
33.         {
34.             try
35.             {
36.                 using (var db = this.GetDb(BaseDal.ConnStr))
37.                 {
38.                     return db.Queryable<Product>().OrderByDescending(r => r.Preferential).Take(3).ToList();
39.                 }
40.             }
41.             catch (Exception ex)
42.             {
43.                 LogHelper.Fatal(ex.Message);
44.                 return new List<Product>();
45.             }
46.         }
47.     }
48. }

复制代码

注意：上述功能采用SqlSugar自带的方法实现，会根据Lamada表达式生成对应的SQL语句，可减少手写SQL的繁琐。
 
控制器获取

 
因为降价促销和新品爆款，也是首页的一部分，所以需要在首页控制器HomeController中，获取对应商品，传递到视图层，如下所示：

1. using EasyBuyShop.DAL;
2. using EasyBuyShop.Models;
3. using Microsoft.AspNetCore.Mvc;
4. using System.Diagnostics;
6. namespace EasyBuyShop.Controllers
7. {
8.     public class HomeController : Controller
9.     {
10.         private readonly ILogger<HomeController> logger;
12.         public HomeController(ILogger<HomeController> logger)
13.         {
14.             this.logger = logger;
15.         }
17.         public IActionResult Index()
18.         {
19.             CategoryDal categoryDal = new CategoryDal();
20.             SubCategoryDal subCategoryDal = new SubCategoryDal();
21.             ProductDal productDal = new ProductDal();
22.             var categories = categoryDal.GetCategories();
23.             var subCategories = subCategoryDal.GetSubCategories();
24.             var topNew100Product = productDal.GetTopNew100();
25.             var topDiscount3Product = productDal.GetTopDisCount3();
26.             ViewData["Categories"] = categories;
27.             ViewData["SubCategories"] = subCategories;
28.             ViewData["TopNew100"] = topNew100Product;
29.             ViewData["TopDiscount3"] = topDiscount3Product;
30.             var username = HttpContext.Session.GetString("username");
31.             var realName = HttpContext.Session.GetString("realname");
32.             ViewBag.Username = username;
33.             ViewBag.RealName = realName;
34.             return View();
35.         }
36.     }
37. }

复制代码

注意：控制器方法中，往视图层传递数据采用ViewData和ViewBag实现，也可采用其他方式实现。具体ViewData和ViewBag传递数据之间的差异，可参考之前写的相关文章。
 
视图层展示

 
在Views/Home/Index.cshtml视图页面中，降价促销为一行三列，展示降价Top3的商品，具体如下所示：

1.        
2.                
3.                         @foreach (var topDiscount in ViewData["TopDiscount3"] as List<Product>)
4.                         {
5.                                
6.                                        
7.                                                 <img src="https://www.cnblogs.com/@topDiscount.ImageUrl" alt="">
8.                                                
9.                                                         <h4>@topDiscount.Brand</h4>
10.                                                         <h3>降价 @(Math.Round( topDiscount.Preferential*100,0))% 销售</h3>
11.                                                         <a target="_blank" href="https://www.cnblogs.com/" onclick="javascript:buy(@(topDiscount.Id));return false;">购买</a>
    
13.                                                
14.                                        
15.                                        
16.                                                 <h3><a target="_blank" href="https://www.cnblogs.com/Product/Detail/@(topDiscount.Id)">@topDiscount.Name</a></h3>
17.                                        
18.                                
19.                         }
20.                
21.        

复制代码

新品爆款为一行四列，展示新品信息，源码如下所示：

1.        
2.                
3.                         <h2>新品爆款 <i ></i></h2>
4.                
5.                
6.                        
7.                                 @foreach (var topNewProduct in ViewData["TopNew100"] as List<Product>)
8.                                 {
9.                                        
10.                                                
11.                                                        
12.                                                                 <a target="_blank" href="https://www.cnblogs.com/Product/Detail/@(topNewProduct.Id)"><img src="https://www.cnblogs.com/@topNewProduct.ImageUrl" alt=""></a>
13.                                                                
14.                                                                         <a target="_blank" href="https://www.cnblogs.com/Product/Detail/@(topNewProduct.Id)" data-toggle="modal" data-target="#quick-view" title="预览">
15.                                                                                 <i ></i>
16.                                                                         </a>
17.                                                                
18.                                                                
19.                                                                         新品
20.                                                                
21.                                                                
22.                                                                         <a target="_blank" href="https://www.cnblogs.com/#" title="添加购物车" onclick="javascript:addCart(@(topNewProduct.Id));return false;">
23.                                                                                 <i ></i>
24.                                                                                 添加购物车
25.                                                                         </a>
26.                                                                         <a  target="_blank" href="https://www.cnblogs.com/#" onclick="javascript:buy(@(topNewProduct.Id));return false;" title="立即购买">
27.                                                                                 <i ></i>
28.                                                                                 立即购买
29.                                                                         </a>
30.                                                                
31.                                                        
32.                                                        
33.                                                                
34.                                                                        
35.                                                                                 <h3><a target="_blank" href="https://www.cnblogs.com/Product/Detail/@(topNewProduct.Id)">@topNewProduct.Name</a></h3>
36.                                                                        
37.                                                                        
38.                                                                                 $@topNewProduct.PreferentialPrice
39.                                                                        
40.                                                                
41.                                                                
42.                                                                         @(topNewProduct.BasicStyle) | @(topNewProduct.ProductStyle)
43.                                                                
44.                                                        
45.                                                
46.                                        
47.                                 }
48.                        
49.                
50.        

复制代码

注意：其中视图层代码，采用Razor表达式for循环，展示列表中的内容。关于Razor表达式的使用可参考其他文章。
 
页面展示

 
降价促销功能，运行如下所示：

新品爆款功能，运行如下所示：

以上就是ASP.NET Core MVC开发实战之商城系统第二部分内容，后续将继续介绍其他模块，敬请期待。

来源:https://www.cnblogs.com/hsiang/archive/2023/07/24/17576065.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！