返回文章列表

吃透 SSM！手把手搭建带销售统计的微信小程序电商系统

2026年1月13日204 阅读约 25 分钟阅读
吃透 SSM！手把手搭建带销售统计的微信小程序电商系统

项目简介

这是一个基于SSM框架（Spring + SpringMVC + MyBatis）开发的微信小程序商城系统，实现了完整的电商业务流程，包括商品浏览、购物车管理、订单处理、收货地址管理、用户评价等功能。项目于2020年5月6日更新，新增了商品销售统计功能。

技术栈

后端技术

  • 框架：Spring + SpringMVC + MyBatis（SSM）
  • 语言：Java
  • 数据库：MySQL 5.6
  • 服务器：Tomcat
  • 数据库连接池：配置在 db.properties 中
  • 日志：Log4j
  • JSON处理：FastJSON
  • 文件上传：Commons FileUpload
  • 项目构建：Maven（依据目录结构推断）

前端技术

  • 小程序框架：微信原生小程序
  • 开发语言：JavaScript
  • UI组件：微信原生组件
  • 开发工具：微信开发者工具
  • API通信：wx.request（RESTful API）

后台管理界面

  • 前端框架：Bootstrap 3.3.6
  • 视图技术：JSP
  • 标签库：JSTL
  • UI组件：X-admin、Layui
  • 富文本编辑器：UEditor
  • 图表库：ECharts

项目结构

目录说明

├── shop/                        # 微信小程序前端代码
│   ├── pages/                   # 小程序页面
│   │   ├── index/              # 首页
│   │   ├── classify/           # 分类页面
│   │   ├── list/               # 商品列表
│   │   ├── goods/detail/       # 商品详情
│   │   ├── cart/               # 购物车
│   │   ├── order-submit/       # 订单提交
│   │   ├── member/index/       # 会员中心
│   │   ├── addresses/          # 收货地址列表
│   │   ├── address-edit/       # 地址编辑
│   │   ├── seller_order/       # 订单管理
│   │   ├── message/            # 留言
│   │   └── sc/                 # 收藏
│   ├── lib/                    # 工具库
│   ├── data/                   # 配置文件
│   ├── app.js                  # 小程序入口文件
│   ├── app.json                # 小程序配置文件
│   └── project.config.json     # 项目配置
│
├── shopWeb/                     # 后端Java项目
│   ├── src/
│   │   ├── com/study/shop/
│   │   │   ├── base/           # 基础类（BaseController、BaseService等）
│   │   │   ├── constant/       # 常量定义
│   │   │   ├── controller/     # 控制器层（11个Controller）
│   │   │   ├── dto/            # 数据传输对象
│   │   │   ├── filter/         # 过滤器
│   │   │   ├── mapper/         # MyBatis映射器（22个Mapper）
│   │   │   ├── po/             # 持久化对象/实体类（11个实体）
│   │   │   ├── service/        # 业务层接口及实现
│   │   │   └── utils/          # 工具类
│   │   ├── mybatis/            # MyBatis配置
│   │   ├── spring/             # Spring配置文件
│   │   ├── db.properties       # 数据库配置
│   │   └── log4j.properties    # 日志配置
│   │
│   └── WebContent/             # Web资源
│       ├── WEB-INF/
│       │   ├── jsp/            # JSP页面
│       │   │   ├── dd/         # 订单管理
│       │   │   ├── goods/      # 商品管理
│       │   │   ├── lb/         # 类别管理
│       │   │   ├── login/      # 登录管理
│       │   │   ├── manage/     # 管理员管理
│       │   │   ├── message/    # 留言管理
│       │   │   └── pp/         # 品牌管理
│       │   └── web.xml         # Web应用配置
│       ├── common/             # 公共页面（头部、底部、菜单等）
│       ├── resource/           # 静态资源
│       │   ├── bootstrap-3.3.6/ # Bootstrap框架
│       │   ├── css/            # 样式文件
│       │   ├── js/             # JavaScript文件
│       │   ├── lib/layui/      # Layui组件
│       │   └── ueditor/        # 富文本编辑器
│       └── index.jsp           # 后台管理首页
│
└── shopweb.sql                  # 数据库初始化脚本

功能模块

用户端（小程序）功能

1. 商品浏览

  • 首页展示：轮播图、推荐商品、热门商品
  • 分类浏览：按一级类别（lb）和二级品牌（pp）分类浏览
  • 商品列表：支持按品牌筛选商品
  • 商品详情：展示商品图片、价格、详情、用户评价
  • 商品搜索：支持按商品标题搜索

2. 购物车管理

  • 加入购物车：添加商品到购物车
  • 数量调整：修改购物车商品数量
  • 选择结算：支持选择部分商品进行结算
  • 删除商品：从购物车移除商品
  • 价格计算：自动计算选中商品总价

3. 订单管理

  • 订单提交：选择收货地址、生成订单
  • 订单编号：自动生成唯一订单号（格式：yyMMddHHmm + 序号）
  • 订单查询：查看全部订单或按状态筛选
    • 待支付（status=0）
    • 已发货（status=1）
    • 申请退款（status=2）
    • 已退款（status=3）
    • 已收货（status=4）
  • 订单操作：
    • 确认收货
    • 申请退款
    • 订单评价

4. 收货地址

  • 地址列表：查看所有收货地址
  • 添加地址：新增收货地址
  • 编辑地址：修改地址信息
  • 删除地址：删除不需要的地址
  • 默认地址：设置默认收货地址

5. 用户中心

  • 个人信息：基于微信openId的用户识别
  • 订单管理：查看和管理个人订单
  • 收藏管理：商品收藏和取消收藏
  • 留言反馈：提交留言和建议

6. 商品评价

  • 订单评价：对已收货订单进行评价
  • 评价展示：在商品详情页展示用户评价
  • 评价时间：记录评价时间

7. 收藏功能

  • 收藏商品：添加喜欢的商品到收藏夹
  • 收藏列表：查看所有收藏的商品
  • 取消收藏：从收藏夹移除商品

管理端（Web后台）功能

1. 商品管理

  • 商品列表：分页展示所有商品，支持多条件搜索
  • 添加商品：
    • 上传商品图片（最多4张）
    • 设置商品标题、价格
    • 选择所属品牌
    • 编辑商品详情（富文本）
  • 修改商品：更新商品信息和图片
  • 删除商品：逻辑删除（设置isDelete=1）
  • 轮播图管理：设置/取消商品轮播图显示（isLb字段）
  • 库存管理：记录商品销售数量（num字段）

2. 类别管理（lb）

  • 一级分类：创建商品一级类别（如：男装、女装、童装）
  • 分类列表：查看所有类别
  • 编辑分类：修改类别信息
  • 删除分类：逻辑删除分类

3. 品牌管理（pp）

  • 品牌创建：添加品牌信息
    • 品牌名称
    • 品牌logo（cpUrl）
    • 所属类别（lbId）
  • 品牌列表：查看所有品牌
  • 编辑品牌：更新品牌信息
  • 删除品牌：逻辑删除品牌

4. 订单管理

  • 订单列表：查看所有订单，支持多条件筛选
  • 订单详情：查看订单商品、收货信息
  • 订单发货：修改订单状态为已发货（status=1）
  • 退款处理：审核并处理退款申请（status=3）
  • 订单搜索：按订单号、用户、状态等条件查询

5. 留言管理

  • 留言列表：查看用户提交的留言反馈
  • 留言详情：查看留言内容、联系方式
  • 留言删除：删除不需要的留言

6. 管理员管理

  • 管理员列表：查看所有管理员账号
  • 添加管理员：创建新的管理员账号
  • 修改密码：更新管理员密码
  • 删除管理员：移除管理员账号
  • 权限管理：管理员类型（type字段）

7. 商品销售统计（新增功能）

  • 品牌销售统计：
    • 统计各品牌商品销售数量（sum(num)）
    • 统计各品牌销售总额（sum(num*price)）
    • 计算整体销售总额
  • 数据展示：以表格形式展示统计结果
  • 实现SQL： 
    SELECT 
  (SELECT p.`name` FROM pp p WHERE p.id=g.ppid) name,
  SUM(g.num) value,
  SUM(g.num*g.price) total 
FROM goods g 
WHERE g.isDelete = 0 
GROUP BY g.ppId

数据库设计

主要数据表

1. user - 用户表

  • id：用户ID（主键）
  • openId：微信openId（唯一标识）
  • createTime：注册时间
  • isDelete：是否删除

2. goods - 商品表

  • id：商品ID（主键）
  • title：商品标题
  • price：商品价格
  • url1~url4：商品图片（4张）
  • content：商品详情（富文本）
  • ppId：品牌ID（外键）
  • num：销售数量
  • isLb：是否轮播图显示（0否/1是）
  • isDelete：是否删除（0否/1是）

3. pp - 品牌表

  • id：品牌ID（主键）
  • name：品牌名称
  • cpUrl：品牌logo
  • lbId：所属类别ID（外键）
  • isDelete：是否删除

4. lb - 类别表

  • id：类别ID（主键）
  • name：类别名称
  • isDelete：是否删除

5. car - 购物车表

  • id：购物车ID（主键）
  • userId：用户ID（外键）
  • goodsId：商品ID（外键）
  • num：商品数量
  • price：商品单价
  • selected：是否选中（0否/1是）

6. dd - 订单表

  • id：订单ID（主键）
  • code：订单编号（唯一）
  • userId：用户ID（外键）
  • goodsId：商品ID（外键）
  • num：购买数量
  • price：订单金额
  • name：收货人姓名
  • phone：收货人电话
  • address：收货地址
  • status：订单状态（0待支付/1已发货/2申请退款/3已退款/4已收货）
  • createTime：创建时间

7. address - 收货地址表

  • id：地址ID（主键）
  • userId：用户ID（外键）
  • name：收货人姓名
  • phone：联系电话
  • dz：详细地址
  • isMr：是否默认（0否/1是）

8. pl - 评价表

  • id：评价ID（主键）
  • code：订单编号
  • userId：用户ID（外键）
  • goodsId：商品ID（外键）
  • content：评价内容
  • addTime：评价时间

9. sc - 收藏表

  • id：收藏ID（主键）
  • userId：用户ID（外键）
  • goodsId：商品ID（外键）

10. message - 留言表

  • id：留言ID（主键）
  • name：留言人姓名
  • phone：联系电话
  • content：留言内容
  • addTime：留言时间

11. manage - 管理员表

  • id：管理员ID（主键）
  • name：用户名
  • passWord：密码
  • realName：真实姓名
  • type：类型（1管理员）

核心控制器

1. GoodsController - 商品控制器

  • findBySql：查询商品列表（分页）
  • add：跳转添加页面
  • exAdd：执行添加商品
  • update：跳转修改页面
  • exUpdate：执行修改商品
  • delete：删除商品（逻辑删除）
  • fblbt：发布/取消轮播图
  • view：商品详情（用户端）
  • userList：用户端商品列表
  • search：商品搜索
  • tj：商品销售统计

2. CarController - 购物车控制器

  • exAdd：添加商品到购物车
  • userList：查询用户购物车
  • userListcheck：查询选中商品及总价
  • delete：删除购物车商品
  • updateSelect：切换选中状态
  • updateNum：更新商品数量

3. DdController - 订单控制器

  • findBySql：查询订单列表（管理端）
  • userList：查询用户订单（用户端）
  • zf：订单支付（生成订单）
  • fh：订单发货
  • sqtk：申请退款
  • sh：确认收货
  • tk：退款处理
  • delete：删除订单

4. AddressController - 地址控制器

  • userList：查询用户地址列表
  • exAdd：添加地址
  • update：修改地址
  • delete：删除地址

5. LoginController - 登录控制器

  • bj：微信小程序登录（openId验证）
  • plogin：管理员登录
  • logout：退出登录

6. PlController - 评价控制器

  • exAdd：添加评价
  • userList：查询商品评价列表

7. ScController - 收藏控制器

  • exAdd：添加收藏
  • userList：查询用户收藏列表
  • delete：取消收藏

8. MessageController - 留言控制器

  • findBySql：查询留言列表
  • exAdd：添加留言
  • delete：删除留言

9. LbController - 类别控制器

  • findBySql：查询类别列表
  • add：添加类别
  • update：修改类别
  • delete：删除类别
  • userList：用户端类别列表

10. PpController - 品牌控制器

  • findBySql：查询品牌列表
  • add：添加品牌
  • update：修改品牌
  • delete：删除品牌
  • userList：用户端品牌列表

11. ManageController - 管理员控制器

  • findBySql：查询管理员列表
  • add：添加管理员
  • update：修改管理员
  • delete：删除管理员

配置说明

数据库配置（db.properties）

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://127.0.0.1:3306/shopWeb?characterEncoding=utf-8
jdbc.username=root
jdbc.password=root

微信小程序配置（app.js）

const url = "http://localhost:8081/shopWeb/";
var appid = 'xxxxx';
var secret = 'xxxxx';

Spring配置

  • applicationContext-dao.xml：数据源和MyBatis配置
  • applicationContext-service.xml：Service层配置
  • applicationContext-transaction.xml：事务管理配置
  • springmvc.xml：SpringMVC配置

Web配置（web.xml）

  • 编码过滤器：UTF-8
  • Spring监听器：ContextLoaderListener
  • SpringMVC前端控制器：DispatcherServlet
  • 分页过滤器：SystemContextFilter（默认每页15条）

部署说明

环境要求

  • JDK：1.7+
  • MySQL：5.6+
  • Tomcat：7.0+
  • 微信开发者工具：最新版

部署步骤

1. 数据库初始化

# 创建数据库
CREATE DATABASE shopWeb DEFAULT CHARACTER SET utf8;

# 导入数据
mysql -u root -p shopWeb < shopweb.sql

2. 修改配置文件

# 修改 shopWeb/src/db.properties
jdbc.url=jdbc:mysql://你的数据库地址:3306/shopWeb?characterEncoding=utf-8
jdbc.username=你的数据库用户名
jdbc.password=你的数据库密码

3. 部署后端项目

  • 将 shopWeb 项目导入IDE（Eclipse/IntelliJ IDEA）
  • 配置Tomcat服务器
  • 启动Tomcat，访问：http://localhost:8081/shopWeb/

4. 配置小程序

// 修改 shop/app.js
const url = "http://你的服务器IP:8081/shopWeb/";

// 修改微信小程序appid和secret（如需正式使用）
var appid = '你的小程序appid';
var secret = '你的小程序secret';

5. 导入小程序

  • 使用微信开发者工具打开 shop 目录
  • 填入小程序AppID
  • 编译运行

默认账号

  • 管理员账号：admin
  • 管理员密码：111111

项目特点

  1. 前后端分离：小程序前端 + Java后端，通过RESTful API交互
  2. 完整的电商流程：从商品浏览到订单完成的完整闭环
  3. 多级分类：支持类别-品牌二级分类
  4. 订单状态管理：完整的订单状态流转
  5. 数据统计功能：商品销售数据统计分析
  6. 图片上传：支持多图片上传和管理
  7. 富文本编辑：UEditor支持图文混排
  8. 分页查询：后台列表统一分页处理
  9. 逻辑删除：使用isDelete字段，数据安全
  10. 响应式设计：Bootstrap实现的管理后台

更新日志

2020-05-06

  • ✨ 新增商品销售统计功能
  • ✨ 按品牌统计销售数量和销售额
  • ✨ 增加统计报表页面

注意事项

  1. 微信小程序AppID：需要在微信公众平台申请
  2. 域名配置：正式环境需要配置合法域名并启用HTTPS
  3. 文件上传路径：需要配置文件上传的物理路径（ShopConstant.FILE_ROOT_UPLOAD）
  4. 订单编号生成：基于时间戳，高并发场景需要改进
  5. 支付功能：当前未集成真实支付，需要接入微信支付API
  6. 数据备份：建议定期备份数据库

技术支持

如有问题，请查看代码注释或联系开发者。

数据库版本：MySQL 5.6
JDK版本：推荐1.8+

最后更新于 2026/2/23

评论 (0)