实训时小组写的一个项目,有2个使用端,用户端是微信小程序,后台管理端是vue写的网页,后端统一是一个项目Spring+SpringMVC+Mybatis。
文章目录
- 项目仓库
- 项目截图
- 需求描述
- 功能分析
- 开发环境
- 数据库设计
- 小程序页面
- 后端
- 难点
- 技术选型
- 管理端
项目仓库
- 小程序:https://github.com/GrapevineLin/WSLLShopping
- 后端: https://github.com/GrapevineLin/WSLL-spring
- 后台管理端: https://github.com/GrapevineLin/WSLL-Admin
项目截图
需求描述
- 前台系统的功能设计
前台管理是为用户提供友好的操作界面,供用户进行商品浏览、购物和生成订单等操作。
而当用户使用购物车时,首先进行登录身份验证。如果为新用户,需要进行注册。 - 用户注册和登录
用户在进行购物之前,需要先进行登录,这样用户结束购物时,通过登录账号来进行结账。对于新用户,可以通过绑定微信信息进行注册。 - 商品浏览与搜索
商品浏览是网上购物系统网站提供给用户的一个基本功能。用户可以根据商品的类别来分类浏览商品。在系统的主页面上,能够对所有商品类别进行列表,用户可以通过单击商品类别名称,来浏览商品,查看商品的图片和价格等最基本的信息,在浏览的过程中,可以将满意的商品添加到购物车中。
用户也可以通过使用系统提供的收索功能对商品进行收索,查找自己需要的商品。 - 购物车
用户在浏览商品的过程中,可以将所满意的商品通过单击“购买”按钮添加到购物车中。浏览结束或者在浏览的过程中可以查看购物车里放置商品的情况,并且可以查看所购买商品的名称、价格、描述、购买数量、单价等信息。
在购物车中可以通过单价“移除”按钮将不想购买的商品删除,也可以任意更改购买商品的数量。 - 产生订单
在用户购物结束后,进行结账时,需要填写相关的信息和确认购买商品的信息。用户确认后开始填写订单信息,包括号码、类型、送货的详细地址。填写完毕之后,用户就可以提交订单了。用户可以在下次登录后查看自己订单和发货情况。 - 用户留言功能
为了能够及时了解用户的需求和意见,本网站增加了留言薄功能,以便本网站及时了解用户需求并即使改进不足,以便可以更好地为用户服务。 - 后台管理的功能设计
后台管理的功能主要是为了网站的管理员提供对商品信息、订单信息的管理。 - 商品信息管理
在商品信息管理模块中,管理员可以添加新的商品,设置商品的类型、名称、价格等信息。也可以对已添加的商品信息进行修改和删除。 - 订单管理
在订单管理模块中,实现管理员对用户提交的订单进行查看,也可以对交易完成后保存一定时间的订单信息进行删除。同时管理员的一项重要工作就是设置用户购买商品的发货状态。如果设置了用户订单已经发货,则当用户查看订单时,可以看到订单交易的情况。
功能分析
可实现需求 | 具体分析 |
---|---|
登录及权限 | 用户在进行购物之前,需要先进行登录,这样用户结束购物时,通过登录账号来进行结账。后台管理系统只有拥有管理员权限的用户才能登陆。 |
商品浏览与搜索 | 用户登录后在商城主页可以查询和浏览商城信息,可以在分类页面对商品的类别进行选择。 |
购物车 | 用户在浏览商品的过程中,可以将所满意的商品通过单击“购买”按钮添加到购物车中。 |
产生订单 | 在购物车中点击付款,输入订单收获地址,核实商品相关信息,点击生成订单,可在用户页面查看订单信息。 |
商品信息管理 | 在商品信息管理模块中,管理员可以添加新的商品,设置商品的类型、名称、价格等信息。也可以对已添加的商品信息进行修改和删除。 |
订单管理 | 在订单管理模块中,实现管理员对用户提交的订单进行查看,也可以对交易完成后保存一定时间的订单信息进行删除。 |
开发环境
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