商城类小程序的前后端全实现（微信小程序+SpringBoot）该项目实现了商城类微信小程序的前后端。四年前发布了一篇仿

前言

该项目实现了商城类微信小程序的前后端。

四年前发布了一篇仿盒马鲜生实现的微信小程序，当时只完成了前端工作，数据来源于mock。
四年后的现在，我把后端功能也加上了，并修改了部分前端展示的内容。后端基于 SpringBoot+MyBatis+MySql 实现，下文有具体技术栈说明。

项目仓库地址

微信小程序前端仓库链接：商城类微信小程序前端

微信小程序后端仓库链接：商城类微信小程序后端

项目介绍

实现的功能点：

商品
- 首页商品分类展示
- 首页商品滚动展示
- 分类页商品按不同分类展示
- 商品详情页（简要展示）
购物车
- 将商品加入购物车
- 购物车商品数量的修改
- 删除购物车的商品
订单（我的 -> 所有订单）
- 购物车页面下单（简易版本的实现，用户在购物车界面下单后，可在“待支付”中查看）
- 用户订单查询

该项目致力于打造一个简易实现的电商系统，采用现阶段流行技术实现，欢迎大家相互交流学习、欢迎点赞 👍 和 start✨。

技术选型

后端技术

技术	说明	官网
SpringBoot	容器+MVC框架	spring.io/projects/sp…
MyBatis	ORM框架	www.mybatis.org/mybatis-3/z…
MySql	关系型数据库	www.mysql.com/
Docker	容器	www.docker.com
Lombok	简化对象封装工具	github.com/rzwitserloo…
Swagger-UI	文档生成工具	github.com/swagger-api…

前端技术

技术	说明	官网
微信小程序框架	小程序框架	developers.weixin.qq.com/miniprogram…
Axios	前端HTTP框架	github.com/axios/axios
WeUI	微信原生视觉体验一致的基础样式库	weui.io/
Vant Weapp	UI 组件库	youzan.github.io/vant-weapp/…

运行结果展示

首页、分类页

实现了商品分类功能、商品列表页。

商品详情页和商品分类页

实现了简要的商品详情展示。在详情页面，有商品详情展示、将商品加入购物车、提供快速购买的功能、还能直接跳转至购物车。

购物车

实现加入购物车的商品展示，购物车商品的增、删、改的功能。简易实现了购物车下单的功能，在购物车选中点击下单的商品都会被标记为待付款的订单，可在「我的」-> 「待付款」页面查看。

订单页面

实现了简易的商品购买、订单查询的功能。用户点击立即购买的商品会变成待支付的订单。在「我的」->「待付款」页面点击「立即付款」，则订单会变成“待配送”状态，可在「我的」->「待配送」页面查看支付后的订单。「我的」->「全部订单」可查看所有状态的订单。

数据库设计

用户表：

uid	username	address	phone	receiver
用户id	用户名	收货地址列表	联系电话	收件人
int	String	String	String	String

商品表：

productId	banner	price	oldPrice	categoryId	unit	title	subTitle
商品id	主图	价格	原价	分类	单位	商品名	次标题
int	String	Double	Double	int	String	String	String

商品分类表：

categoryId	category
商品分类id	商品种类名
int	String

订单表：

orderId	address	order	orderTime	uid	status
订单id	收货地址(可以在用户表中取)	具体货物和数量	下单时间（时间戳）	对应的userId	订单状态（0:待付款；1:待配送；2:待评价）
int	String	List	String	int	int

商品-订单表：（用处：能记录商品被加购的次数，以及已经被出售的次数）

id	productId	orderId
主键	商品id	订单id
Int	int	int

购物车表：

cartId	uid	productId	count	hasBought
购物车id	所属用户的id	用户加入商品的id	加入某商品的数量	用户是否下单购买了
int	int	int	int	boolean

数据库表结构如下：

数据库表.png

商城类小程序的前后端全实现（微信小程序+SpringBoot）

前言