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

文章目录

项目仓库

  • 小程序:https://github.com/GrapevineLin/WSLLShopping
  • 后端: https://github.com/GrapevineLin/WSLL-spring
  • 后台管理端: https://github.com/GrapevineLin/WSLL-Admin

项目截图

   
   
   

需求描述

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

功能分析

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

开发环境

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张表：商品，订单，用户，管理员，购物车，订单商品，商品类别，评论信息，地址

  1. 用户表(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;
  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;
  1. 管理员表（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;
  1. 购物车表(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;
  1. 评论表(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;
  1. 商品类目表(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;
  1. 商品表(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;
  1. 订单表(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;
  1. 订单状态表(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编写.

难点

  1. 跨域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>
  1. 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

# 小程序 # spring # mybatis
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue