SSM+微信小程序+VUE项目实战：商城系统

前端后端

发布日期: 2019-09-30

更新日期: 2021-12-17

文章字数: 2.7k

实训时小组写的一个项目，有2个使用端，用户端是微信小程序，后台管理端是vue写的网页，后端统一是一个项目Spring+SpringMVC+Mybatis。

项目仓库

需求描述

前台系统的功能设计
前台管理是为用户提供友好的操作界面，供用户进行商品浏览、购物和生成订单等操作。
而当用户使用购物车时，首先进行登录身份验证。如果为新用户，需要进行注册。
用户注册和登录
用户在进行购物之前，需要先进行登录，这样用户结束购物时，通过登录账号来进行结账。对于新用户，可以通过绑定微信信息进行注册。
商品浏览与搜索
商品浏览是网上购物系统网站提供给用户的一个基本功能。用户可以根据商品的类别来分类浏览商品。在系统的主页面上，能够对所有商品类别进行列表，用户可以通过单击商品类别名称，来浏览商品，查看商品的图片和价格等最基本的信息，在浏览的过程中，可以将满意的商品添加到购物车中。
用户也可以通过使用系统提供的收索功能对商品进行收索，查找自己需要的商品。
购物车
用户在浏览商品的过程中，可以将所满意的商品通过单击“购买”按钮添加到购物车中。浏览结束或者在浏览的过程中可以查看购物车里放置商品的情况，并且可以查看所购买商品的名称、价格、描述、购买数量、单价等信息。
在购物车中可以通过单价“移除”按钮将不想购买的商品删除，也可以任意更改购买商品的数量。
产生订单
在用户购物结束后，进行结账时，需要填写相关的信息和确认购买商品的信息。用户确认后开始填写订单信息，包括号码、类型、送货的详细地址。填写完毕之后，用户就可以提交订单了。用户可以在下次登录后查看自己订单和发货情况。
用户留言功能
为了能够及时了解用户的需求和意见，本网站增加了留言薄功能，以便本网站及时了解用户需求并即使改进不足，以便可以更好地为用户服务。
后台管理的功能设计
后台管理的功能主要是为了网站的管理员提供对商品信息、订单信息的管理。
商品信息管理
在商品信息管理模块中，管理员可以添加新的商品，设置商品的类型、名称、价格等信息。也可以对已添加的商品信息进行修改和删除。
订单管理
在订单管理模块中，实现管理员对用户提交的订单进行查看，也可以对交易完成后保存一定时间的订单信息进行删除。同时管理员的一项重要工作就是设置用户购买商品的发货状态。如果设置了用户订单已经发货，则当用户查看订单时，可以看到订单交易的情况。

功能分析

可实现需求	具体分析
登录及权限	用户在进行购物之前，需要先进行登录，这样用户结束购物时，通过登录账号来进行结账。后台管理系统只有拥有管理员权限的用户才能登陆。
商品浏览与搜索	用户登录后在商城主页可以查询和浏览商城信息，可以在分类页面对商品的类别进行选择。
购物车	用户在浏览商品的过程中，可以将所满意的商品通过单击“购买”按钮添加到购物车中。
产生订单	在购物车中点击付款，输入订单收获地址，核实商品相关信息，点击生成订单，可在用户页面查看订单信息。
商品信息管理	在商品信息管理模块中，管理员可以添加新的商品，设置商品的类型、名称、价格等信息。也可以对已添加的商品信息进行修改和删除。
订单管理	在订单管理模块中，实现管理员对用户提交的订单进行查看，也可以对交易完成后保存一定时间的订单信息进行删除。

开发环境

IDE: Idea VS Code
JDK: JDK1.8.x
Maven: 3.6.0
SQL: MySQL 5.7.x
Node: Node 10.16.0
NPM:6.9.0

数据库设计

一共9张表：商品，订单，用户，管理员，购物车，订单商品，商品类别，评论信息，地址

用户表(user)
这里user表有个坑很值得注意一下,因为我们是获取微信用户的昵称,有的人昵称含有emoji表情,如果我们使用utf8则存储不了 ,因为utf8只能存储3个字节的数据,标准的emoji表情是4个字节,所以我们选择utf8mb4的字符集.

DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `openid` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `nickname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `avatarUrl` varchar(400) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  PRIMARY KEY (`openid`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

地址表（address）：

DROP TABLE IF EXISTS `address`;
CREATE TABLE `address`  (
  `address_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `phone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `region` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `detail` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `defaulted` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `openid` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`address_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

管理员表（admin）

 DROP TABLE IF EXISTS `admin`;
CREATE TABLE `admin`  (
  `username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `user_id` bigint(10) NOT NULL AUTO_INCREMENT,
  PRIMARY KEY (`user_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

购物车表(cart)

DROP TABLE IF EXISTS `cart`;
CREATE TABLE `cart`  (
  `cart_id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `openid` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户id',
  `goods_id` int(11) NULL DEFAULT NULL COMMENT '商品id',
  `total_num` int(11) NULL DEFAULT NULL COMMENT '商品数量',
  `file_path` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `goods_price` decimal(10, 2) NULL DEFAULT NULL,
  `goods_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`cart_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 74 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

评论表(comment)

DROP TABLE IF EXISTS `comment`;
CREATE TABLE `comment`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `openid` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  `order_id` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '订单id',
  `starIndex` int(11) NULL DEFAULT NULL,
  `comment` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE,
  INDEX `orderid1`(`order_id`) USING BTREE,
  CONSTRAINT `orderid1` FOREIGN KEY (`order_id`) REFERENCES `orders` (`order_id`) ON DELETE CASCADE ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 16 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

商品类目表(g_type)

DROP TABLE IF EXISTS `g_type`;
CREATE TABLE `g_type`  (
  `type_id` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '类目id',
  `type_name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '类目名称',
  `type_describe` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '类目描述',
  `type_enable` varchar(1) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '是否启用  \"1\"为启用  “0”为不启用',
  `type_sup` int(10) NULL DEFAULT NULL COMMENT '上级类目ID',
  `type_level` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '类目级别',
  `type_file_path` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '图片路径',
  PRIMARY KEY (`type_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

商品表(goods)

DROP TABLE IF EXISTS `goods`;
CREATE TABLE `goods`  (
  `goods_id` int(10) NOT NULL AUTO_INCREMENT COMMENT '商品编号',
  `goods_type` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '商品类目',
  `goods_name` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '商品名称',
  `goods_describe` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '商品描述',
  `goods_price` decimal(10, 2) NULL DEFAULT NULL COMMENT '商品金额',
  `goods_validity` date NULL DEFAULT NULL COMMENT '即购买后多长时间内有效',
  `goods_enable` varchar(1) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '是否启用  \"1\"为启用  “0”为不启用',
  `goods_browse` int(10) NULL DEFAULT NULL COMMENT '库存',
  `goods_buy` int(10) NULL DEFAULT NULL COMMENT '购买数',
  `goods_picture_path` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '图片文件路径',
  `goods_create_time` date NULL DEFAULT NULL COMMENT '商品添加时间',
  PRIMARY KEY (`goods_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 64 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

订单表(order_goods)

DROP TABLE IF EXISTS `order_goods`;
CREATE TABLE `order_goods`  (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `order_id` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '订单id',
  `goods_id` int(10) NULL DEFAULT NULL COMMENT '商品id',
  `num` int(10) NULL DEFAULT NULL COMMENT '成交数量',
  PRIMARY KEY (`id`) USING BTREE,
  INDEX `orderid`(`order_id`) USING BTREE,
  CONSTRAINT `orderid` FOREIGN KEY (`order_id`) REFERENCES `orders` (`order_id`) ON DELETE CASCADE ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 64 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

订单状态表(order)

DROP TABLE IF EXISTS `orders`;
CREATE TABLE `orders`  (
  `order_id` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'id',
  `openid` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户id\r\n',
  `pay_status` varchar(12) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '支付状态 待付款 代发货',
  `create_time` datetime(0) NULL DEFAULT NULL COMMENT '订单创建时间',
  `pay_price` decimal(10, 2) NULL DEFAULT NULL COMMENT '商品总价',
  PRIMARY KEY (`order_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

小程序页面

小程序一共有4个tabbar:首页,分类,购物车,我的.商品的展示这一块在多个地方使用,比如首页和分类都有,因此可以将其组件化,方便复用.
技术选型:
小程序：2.8.1
小程序组件：iView 2.0.0

由于代码量巨大,所以不在这里贴出来,可以去github查看.

后端

后端采用java的SSM编写.

难点

跨域CORS：因为是前后端分离的项目，所以会产生跨域的问题，解决方案可以有前端也可以是后端解决；最后是采用了后端配置跨域解决了问题,当然跨域的办法很多,不止局限这一种。

<filter>
    <filter-name>encoding</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
        <param-name>encoding</param-name>
        <param-value>UTF-8</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>encoding</filter-name>
    <url-pattern>*.action</url-pattern>
</filter-mapping>

Token：token的使用就是为了数据安全，原理是前端登录，后端生成token给前端，前端存储token然后在后续请求头加上token，后端对之后的每次请求都会验证token是否有效。
Token的具体实现可以查看这篇文章

技术选型

视图框架：SpringMVC 5.x
持久层框架：Mybatis 3.x
数据库连接池：Druid 1.x

管理端

用Vue写的一个及其简易的后台管理系统.
技术选型:
前端框架：Vue.js 2.x
页面组件：Element 2.x
后台交互：Axios 0.18.0

小林

http://grapevinelin.cn/2019/09/30/ssm-wei-xin-xiao-cheng-xu-vue-xiang-mu-shi-zhan-shang-cheng-xi-tong/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源小林 !

小程序 vue ssm

火焰之纹章：圣魔之光石

2019-10-18 游戏服务器

火焰之纹章游戏

自用软件小工具推荐

2019-07-28 软件工具

软件工具

SSM+微信小程序+VUE项目实战：商城系统

项目仓库

项目截图

需求描述

功能分析

开发环境

数据库设计

小程序页面

后端

难点

技术选型

管理端

你的赏识是我前进的动力