微信商城小程序（服装鞋子商场）的设计与实现（Vue.js+小程序+.NET Core ）_微信小程序仿商场

目录
第1章 概述 1
1.1 项目背景介绍 1
1.2 微信小程序概述 1
1.2.1 微信小程序发展状况 2
1.2.2 微信小程序丰富的API接口 2
第2章 相关技术概述 3
2.1 .NET Core概述 3
2.1.1 .NET Core支持3大主流平台 3
2.1.2 MVC开发模式 3
2.1.3 丰富多彩的NuGet包化的结构 3
2.2 Vue.js 4
2.3 MySQL数据库 5
2.4 MVVM 5
第3章 需求分析 7
3.1 获取需求 7
3.2 分析需求 7
3.2.1 功能性需求 7
3.2.2 非功能性需求 9
3.2.3 设计约束 9
第4章 系统设计 10
4.1 架构设计 10
4.2 总体设计 10
4.3 功能模块设计 11
4.3.1 小程序自动登陆 11
4.3.2 编辑收货地址 12
4.3.3 商品展示 13
4.3.4 购买商品 13
4.3.5 查询商品 14
4.3.6 收藏商品与添加购物车 15
4.3.7 订单查询 17
4.3.8 后台系统登陆 17
4.3.9 管理商品 18
4.3.10 管理订单 19
4.3.11 管理员账号管理 20
4.3.12 轮播图管理 21
4.4 数据库设计 22
4.4.1 对象与对象关系设计 22
4.4.2 数据库表设计 24
4.4.3 数据库链接设计 28
第5章 系统实现 29
5.1 系统前端页面的实现 29
5.1.1 微信小程序端界面 29
5.1.2 .NET Core后端界面 31
5.2 功能模块实现 32
5.2.1 微信商城小程序自动登陆 32
5.2.2 轮播图 33
5.2.3 商品 35
5.2.4 商品购买 37
5.2.5 加入购物车与商品收藏 40
5.2.6 收货地址 41
5.2.7 后台登陆与权限 44
5.2.8 后台功能 47
第6章 系统测试 49
6.1 测试环境 49
6.2 小程序界面测试 49
6.3 功能测试用例 49
6.3.1 收货地址操作 49
6.3.2 购买商品 50
6.3.3 微信小程序登陆 51
6.3.4 管理员登陆 51
第7章 结　论 53
参考文献 54
致 谢 55
第4章系统设计
4.1架构设计
B/S模式也就是浏览器/服务器模式，它的界面部分是在浏览器端展示，主要的工作由服务器端进行实现的，用户的请求由浏览器端提交给服务器端进行处理，服务器将处理结果反馈给浏览器而服务器将处理结果反馈给浏览器端，在浏览器端界面描画给用户查看。采用B/S模式不仅可以避免用户必须安装专业软件才能开发系统或者访问系统的局限性，而且更加便利。
微信小程序的总体框架包括两部分的View视图层，App Service逻辑层，AppService层用来逻辑处理、数据请求、接口调用，它们在两个线程里运行。视图层使用WebView渲染，逻辑层使用JSCore运行。
本系统的总体架构来说用的是MVVM的架构模式去进行系统的总体框架架构处理，微信小程序相当于我们的客户端，采用的是HTTP传输协议，是基于微信生态圈进行相关处理，也就是一种WebApp的存在，它无需用户进行任何第三方程序的下载，只需要从Web服务器上下载程序到本地执行即可，本系统的后台就是一个标准的B/S开发模式的Wbe应用程序，采用的开发语言是C#与HTML/CSS和JavaScript，套用的是微软的.NET Core框架，对数据库的处理采用的是EFCore的形式。
4.2总体设计
根据前面的各项设计分析，按照系统开发的基本理念对系统进行分解，从模块上主要可分为前台模块和后台模块。
前台模块主要有购买商品、查询商品、编辑收货地址、查询订单、收藏商品、自动登陆、添加购物车、商品展示这八个子模块；后台模块主要有商品管理，订单管理，管理员账号管理，后台系统登陆，轮播图管理这五个子模块。系统总体设计如图 4.1系统总体设计图所示。

图 4.1系统总体设计图
4.3功能模块设计
4.3.1小程序自动登陆
（一）流程设计
每当用户进入商场微信小程序系统，系统会进行自动登陆，获取到用户Openid（在小程序中设为全局变量）与用户微信名称，系统会将这些信息当作参数传入服务器，保存至用户信息表中，因为该登陆为自动登陆，为了防止数据的无限添加，导致数据库数据冗余而降低服务器处理效率，在添加用户信息时系统会进行数据筛选过滤掉微信小程序端传来的重复数据，保证数据库中数据的简洁。为了确保用户信息的安全性，系统在将数据保存进用户信息表时会对Openid进行MD5签名处理，用户微信名称进行ASE（Advanced Encryption Standard，高级加密标准）加密处理。用户登陆流程图如图 4.2 用户登陆流程图所示。注：N为加密后的Openid与用户信息表中的Openid一致且加密后的微信名称与用户信息表中的微信名称一致Y为Openid与用户信息表中的Openid一致且加密后的微信名称与用户信息表中的微信名称不一致

图 4.2 用户登陆流程图
（二）对象设计
在图 4.2 用户登陆流程图中，可以得到一个对象用户，该对象有3个属性分别为Openid，用户微信名称，用户编号，其中Openid属性为MD5签名后的字符串，用户微信名称属性为ASE加密后的字符串。

/微信端传参
wx.request({
url: 'http://localhost:53719/Order/AddOrder/?openid=' + getApp().globalData.openid + '&detailcode=' + event.currentTarget.id,
})
public IActionResult AddOrder( int goodsinfocode, string openid,int useraddresscode)
//通过参数获取数据
var result = from a in _context.UserApp
where a.UserAppOpenid == Openid
select a;
int UserOrdersCode = 0;
string WxName = "";
foreach (var item in result)
{
UserOrdersCode = item.UserAppCode;
WxName = Decrypt(item.WxName,password); }
var address = from b in _context.UserAddresses
where b.UserAddressesCode == useraddresscode
select b;
string detailaddress= "";
string useraddressname = "";
string useraddressphonenum = ""; foreach (var item in address)
{
detailaddress = Decrypt(item.UserDetailAddresses,password);
useraddressname = Decrypt(item.UserAddressesName,password);
useraddressphonenum = Decrypt(item.UserAddressesPhoneNum, password); },
//订单编号生成
string merchant = detailcode.ToString();
merchant = merchant.PadLeft(5, '0');     // 共5位，之前用0补齐
string num = GetRandomString(5);//自动生成一个5位随机数
string ordernum = time + merchant + num + WxName;
//生成数据
var a = new GoodsOrders
{
UserOrdersDateTime = time,
GoodsInfoCode = detailcode,
UserAppCode = UserOrdersCode,
GoodsOrdersCode= ordernum,
UserAddressDetail=detailaddress,
UserAddressesName=useraddressname,
UserAddressesPhoneNum=useraddressphonenum }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40