文章目录
一、文章前言
因为疫情等客观因素的制约，以及大家思想观念的转变，线上开店逐渐成为人们口中热议的话题，更是慢慢的形成了一种趋势毕竟这个相对于创业，所投入的资金少，风险小。但任何事务的发展到一定的阶段后，门槛以及规则都会不断的提高，相对应的管理成本也随之提升，为了帮助小型微企转战线上，助力平台转型而开发此系统。
此系统采用C#编程语言，使用.NetCore平台搭建API，前端使用Layui、小程序、数据支持采用的是SQLSERVER2012。
二、系统设计
2.1 背景介绍
（1）系统角色：主要是分为小程序用户及管理员
（2）系统目的：让用户能够通过小程序等入口选购商品、生成订单，管理员可通过后台进行对应的管理配置
2.2 设计目标
（1）数据存储安全可靠
（2）界面友好，操作简单易用
（3）占用资源少，对平台要求低
2.3 功能模块
（1）后台管理系统主要模块有：数据中台、用户管理、商品管理、订单管理、供应商管理、运作报表、系统设置等。
（2）用户端小程序主要模块有：首页、商品分类页、购物车页、个人中心页、商品详情页、活动列表页、支付页、订单列表页、收货地址页
功能结构图如下：
三、主要功能模块截图
图3.1：管理员登录页，通过校验账号密码及验证码等步骤后即可跳转至后台
图3.2：后台数据中台首页，使用Echart前端框架通过图表的方式将数据灵动展示
图3.3：用户列表，可以对员工信息以及小程序用户信息进行管理
图3.4：商品列表，可在此页面跳转新增 / 修改页，也可以对商品禁用 / 删除
图3.5：新增 / 修改商品页
图3.6：订单列表页
图3.7：供应商列表
图3.8：系统设置页
图3.9：系统权限配置
图3.10：个人信息设置页
图3.11：用户端小程序首页、商品推荐页、商品详情页
四、实现步骤
开发软件准备
1.Visual Studio，简称VS，用它来实现API。
2.SQLSERVER数据库，版本不限，用它作为数据支持存储数据。
3.Hbulider，用它来开发后台管理端页面，因为我们采用的是前后端分离的架构。
4.微信Web开发者工具，用它来开发小程序。
4.1、创建数据库及所需的数据表，这里我们先创建一个商品表演示一下开发步骤
--创建数据库
CREATE DATABASE Electricity;
--创建商品表
CREATE TABLE Product(
--商品ID
ProductId INT,
--商品名称
ProducrName NVARCHAR(100),
--商品规格
ProducrSpec NVARCHAR(100),
--商品价格
Price decimal,
--单位
Unit NVARCHAR(100),
--助记码
Tag NVARCHAR(100),
--创建时间
CreateTime NVARCHAR(100),
--创建人
CreateBy NVARCHAR(100)
);
4.2、打开VS，选择创建新项目，选择WebApi项目，因为我们需要搭建一个API
4.3、配置项目名称以及存放位置，目标框架选择3.1就可以。
4.4、在appsettings界面配置对应的数据库连接字符串
4.5、新建一个类，实现查询商品列表的业务功能，这里我使用的是sqlsugur这个ORM框架
public new async Task<IPageList<Product>> QueryPageAsync(Expression<Func<Product, bool>> predicate,
Expression<Func<Product, object>> orderByExpression, OrderByType orderByType, int pageIndex = 1,
int pageSize = 20, bool blUseNoLock = false)
{
RefAsync<int> totalCount = 0;
List<Product> page;
page = await DbClient.Queryable<Product>()
.OrderByIF(orderByExpression != null, orderByExpression, orderByType)
.WhereIF(predicate != null, predicate).Select(p => new Product
{
ProductCode = p.ProductCode,
ProductName = p.ProductName,
SpuCode = p.SpuCode,
Unit = p.Unit,
Color = p.Color,
ClSize = p.ClSize,
Barcode = p.Barcode,
Volume = p.Volume,
NetWeight = p.NetWeight,
GrossWeight = p.GrossWeight,
IsDefault = p.IsDefault,
Valid = p.Valid,
Remarks = p.Remarks,
TimeCreate = p.TimeCreate,
CreateBy = p.CreateBy,
TimeUpdate = p.TimeUpdate,
UpdateBy = p.UpdateBy,
}).With(SqlWith.NoLock).ToPageListAsync(pageIndex, pageSize, totalCount);
var list = new PageList<Product>(page, pageIndex, pageSize, totalCount);
return list;
}
4.5、新建一个控制器，编写对应的动作方法，后续我们将通过访问这个路径来查询数据库中的商品数据。
[HttpPost]
[Authorize]
public JsonResult GetRecommenProductSpuPictures()
{
var jm = new WebApiCallBack();
var list = _productServices.QueryList.ToList();
jm.data = list;
jm.code = 200;
jm.status = true;
jm.msg = "请求成功";
return Json(jm);
}
4.6、打开Hbulider，创建一个页面，引入Layui.js，绘制一个div标签，然后在js中通过请求我们刚才的API地址来渲染数据。
<div class="table-body">
<table id="dataReqList" lay-filter="dataReqList"></table>
</div>
<script>
var is_edit = 0;
layui.config({
base: '/lib/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'table', 'coreHelper', 'laydate', 'zTree', 'tableChild', 'xmSelect'], function () {
var table = layui.table
, admin = layui.admin
, laydate = layui.laydate
, coreHelper = layui.coreHelper
, xmSelect = layui.xmSelect
, tableChild = layui.tableChild
, form = layui.form;
table.render({
elem: '#dataReqList',
height: '440',
method: 'POST',
defaultToolbar: [],
url: '', //数据接口
title: '商品列表',
page: true,
limit: 20,
limits: [10, 20, 50, 100, 200, 1000],
cols: [[ //表头
{
type: 'checkbox', fixed: 'left', title: '' },
{
field: 'productCode', title: '商品编码', sort: false, width: 150 },
{
field: 'productName', title: '商品名称', sort: false, width: 150 },
{
field: 'productSpec', title: '商品规格', sort: false, width: 150 },
{
field: 'subSegmentName', title: '商品小类', sort: false, width: 100 },
{
field: 'unit', title: '单位', sort: false, width: 50 },
{
field: 'color', title: '颜色', sort: false, width: 80 },
{
field: 'clSize', title: '尺码', sort: false, width: 80 },
{
field: 'remarks', title: '备注', sort: false, width: 100 },
]],
done: function () {
tableChild.render(this);
}
});
//监听表格复选框选择
table.on('checkbox(dataReqList)', function (obj) {
});
//监听搜索
form.on('submit(dataReqList-search)', function (data) {
var field = data.field;
//执行重载
table.reload('dataReqList', {
where: field, page: {
curr: 1 }
});
});
//监听行双击事件
table.on('rowDouble(dataReqList)', function (obj) {
});
//监听单元格编辑
table.on('edit(dataReqList)', function (obj) {
})
//确定选择
form.on('submit(dataReqList-select)', function (data) {
});
//工具栏事件
table.on('Toolbar(dataReqList)', function (obj) {
});
form.render();
});
</script>
4.7、后台管理端能够正常走通后我们打开微信Web开发者工具，新建一个项目，在默认的Page里面做操作。点击测试号，选择不使用云服务
4.8、在JS文件中中编写方法请求我们刚才通过VS编写的接口，url里面就是我们接口的地址，我们可以先console输出一下返回的结果集，然后使用setData将返回的数据进行赋值。
wx.request({
url: '',
method: 'POST',
data:{
},
success: function (res) {
console.log(res);
this.setData({
proeuctList: res.data
})
}
})
4.9、在小程序wxml文件中绘制样式，将返回的数据进行渲染输出，这样我们就能得到一个简单的商品列表。
<view class="indexProductList">
<view class="productItemBottom" wx:for="{
{proeuctList}}">
<view style="background: url({
{item.productPic}});background-size: 100% 100%;" class="productImgBottom"
bindtap="bottomGo" data-id="{
{item.productId}}"></view>
<view class="bottom-productName little">{
{
item.productName}}</view>
<view class="iconBox little">
<!-- <view class="iconDetail" wx:for="{
{item.icon}}">{
{
item}}</view> -->
{
{
item.remark}}
</view>
<view class="buyBox-bottom">
<view class="leftPrice-bottom">
<text class="priceFh">￥</text>
<text class="bottom-price">{
{
item.proSalePrice}}</text>
<text class="bottom-oldPrice">￥{
{
item.price}}</text>
</view>
<view class="rightAdd-bottom" catchtap="btnAddCart" data-index="{
{index}}" data-goodsid="{
{item.productId}}">
<image class="rightAdd-bottom" src="{
{imgUrl}}"></image>
</view>
</view>
</view>
</view>
4.10、后续我们依葫芦画瓢，通过上述的指引步骤，建表、实现API、请求API、渲染数据、操作数据就能得到一个商城系统啦
后续完整代码整理完成后会陆续上传到Git，欢迎指正。
