微信商城小程序（服装鞋子商场）的设计与实现（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 }

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

[译]使用Webpack提高Vue.js应用程序的4种方式
[译]使用Webpack提高Vue.js应用程序的4种方式原文地址 Webpack是开发Vue.js单页应用程序的重要工具.通过管理复杂的构建步骤,您可以更轻松地开发工作流程,并优化应用程序的大 ...
tmdb电影票房_TMDb Vue.js应用程序：电影数据库应用程序
tmdb电影票房 TMDb Vue.js应用 (TMDb Vue.js app) TMDb Movie Search is a responsive Vue.js app. The Movie Dat ...
为您的 Vue.js 应用程序选择最佳电子商务平台
自大流行以来,在线购物活动有所增加.2020 年,超过20 亿人在线购买了产品或服务,而且这一数字只增不减.预计到 2022 年底,仅美国的电子商务行业就将成为一个万亿美元的行业. 我们想涉足蓬勃发展 ...
预渲染vue.js应用程序（使用node或laravel）
服务器端渲染现在非常流行.但它也并非没有缺点.预渲染是一种替代方法,在某些情况下甚至可能更好.下面我们来看一下如何预渲染vue.js应用程序. 在本文中,我们将探讨预渲染如何与vue.js一起工作,并 ...
微信小程序全面实战，架构设计躲坑攻略(小程序入门捷径教程)
转自:http://www.cnblogs.com/dragondean/p/6247643.html 最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版) ...
一个Java程序猿眼中的前后端分离以及Vue.js入门
原文:https://mp.weixin.qq.com/s/HWRYAR16vLE1XFep6_i1tA 松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的, ...
vue.js部署_如何将安全Vue.js应用程序部署到AWS
vue.js部署本文最初发布在Okta开发人员博客上 . 感谢您支持使SitePoint成为可能的合作伙伴. 编写Vue应用程序直观,直接,快捷. Vue具有较低的进入门槛,基于组件的方法以及诸如热 ...
微信小程序之电子商场的设计以及实现
随着移动互联网迅速发展,手机上安装的移动应用越来越多,导致长尾现象严重,浪费了大量的资源.近年来,各大应用提供商相继提出各自的轻型应用解决方案,但都没有成功,微信小程序的出现给业界带来了新的震动.文章 ...
微信小程序商城搭建二手交易网站购物+后台管理系统|前后分离VUE.js

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

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

最新文章

热门文章