基于SSM的校园二手交易平台

Java版本：1.8
数据库：MySQL
框架：Spring + Spring MVC + MyBatis
服务器：Tomcat
前端框架：Vuejs
开发工具：Idea 2018
版本管理工具：Maven
版本控制工具：Git

系统预览：

登陆&个人中心

首页&商品展示

商品详情&购物车

订单管理&提交订单

商品上传&商品管理

一、设计概要

本系统作为校园二手商品交易平台的小型电商网站，只要是为了解决大学生的闲置物品繁多，尤其是毕业的学生有很多闲置的物品需要处理，闲置的东西需要转手成为问题，随着电子商务的兴起，以服务于学生的二手交易平台系统的出现可以很好地解决现在大学生闲置物品的问题，同时资源可以得到重新地利用，本系统在进行需求分析后，基本实现了校园二手交易平台的需求，包括登录注册，商品搜索，发布商品，商品评价，个人信息管理，订单管理，本系统采用前后端分离的模式，前端使用vue + elementui实现界面的设计实现，后端采用springmvc,spring,mybatis的mvc模式。

二、需求分析

用户登陆注册功能：可以进行表单的校验，不符合规则的输入不能进行表单的提交，不符合规则的输入进行相应的提示。

商品搜索功能：对用户的搜索框输入进行模糊查询，根据关键词和商品类型进行模糊查询。

个人信息管理：用户手机号码密码的修改，收货地址的新增，修改，删除，余额充值。

订单管理：未付款订单的取消与付款，未付款订单超时取消，已付款订单发货，已发货订单的订单收货，已收货订单的订单商品评价，评价的修改，已完成订单的删除，待处理订单的发货。

商品发布：用户可以自己发布商品在二手交易平台上卖，需要输入商品名称，商品详情，商品分类，商品颜色，商品价格，商品数量，商品图片上传，商品名称，商品详情有长度校验，商品分类和颜色有非空校验，商品数量和金额，有非空和数字校验，商品图片上传有非空校验且可以进行商品图片预览。

商品详情：点击商品进入相应商品详情页面，可以查看商品相关信息，将商品加入购物车或立即购买，加入购物车或立即购买需要用户已经登录，不然会有提示用户登陆。

购物车：用户登陆后可以看见自己购物车有几件商品，可以选择相应的商品进行订单提交，购物车中的商品可以增加或减少数量计算价格，多件商品同时下单，进行购物车的删除等操作。

下单：用户选择相应的商品进行下单，选择收货地址，点击确定下单生成订单，判断商品库存是否充足，库存不足则生成订单失败，弹出相应的提示，用户支付订单判断用户余额是否充足，余额不足弹出相应的提示。

三、数据库设计

用户信息表：

字段	数据类型	字段名
id	int	用户ID
userName	varchar	用户名
password	varchar	密码
phone	int	手机号
email	varchar	电子邮箱
wallet	float	钱包

地址表：

字段	数据类型	字段名
aid	int	地址ID
receiver	varchar	收货人
pca	varchar	省市区
address	varchar	地址
phone	int	手机号
uid	int	用户ID

商品表：

字段	数据类型	字段名
pid	int	商品ID
pName	varchar	商品名称
color	varchar	颜色
remark	varchar	描述
price	float	价格
type	varchar	类型
count	int	库存
display	int	状态
sales	int	销量
uid	int	用户ID
image	varchar	图片
createTime	datetime	发布时间
updateTime	datetime	更新时间

购物车表：

字段	数据类型	字段名
cartid	int	购物城ID
uid	int	用户ID
pid	int	商品ID
count	int	数量
createTime	datetime	创建时间

评论表：

字段	数据类型	字段名
cid	int	评论ID
createTime	datetime	创建时间
content	varchar	内容
display	int	状态
pid	int	商品ID
uid	int	用户ID

订单表：

字段	数据类型	字段名
oid	int	订单ID
orderCode	varchar	订单编码
pid	int	商品ID
uid	int	用户ID
aid	int	地址ID
status	int	状态
count	int	数量
amount	float	总价

四、系统功能模块实现

登录&注册

登陆注册模块详细设计：用户进入登入页面后输入账号和密码进行登录，当用户名为空时提示用户名不能为空且字符不少于三个字符，密码为空时提示密码不能为空且密码不少于6个字符，当校验规则没有通过时，点击登录会弹出提示信息，校验规则通过后点击登录，会通过用户输入的账号密码在数据库查找对应的用户，如找到则登陆成功跳转首页，否则提示账号或密码错误；用户注册时，需要输入用户名，密码，手机号，邮箱，每个输入框都有对应的校验规则，只有校验规则通过时才能注册，当数据库中有相同用户名时，提示用户，该用户名已存在，注册成功后跳转登陆页面进行登录。

购物车&个人信息

购物车使用el-table显示购物车中商品数量,商品图片，商品名称，单价，金额，用户点击复选框选择相应的商品，选择数量会自动计算金额和计算已选择商品数量，这里的实现是使用element表格的selection-change方法在多选框改变的时候重新计算商品总价格，商品数量改变金额也会进行重新的计算，在输入框改变的时候会调用@change="numberChange"方法重新计算商品金额，商品操作可以进行购物车的删除，在要删除的那一项后面点击删除按钮弹出确认删除框，点击确认即可发送请求controller接收购物车cartid将该购物车从购物车表中删除，也没面重新调用查找购物车列表的方法将最新的购物车列表重新展示实现购物车的删除，购物无车删除也会调用获取购物车数量的方法更新购物车数量进行显示；选择需要购买的商品后，点击结算，页面会通过router跳转到下单页面进行下单，参数为购物车的cartids，this.$router.push({ path: '/comfirmOrder', query: { cartIds: cartIds }})如果用户没有选择商品，结算按钮会变成灰色，不可点击。

个人信息管理页面如上，用户进入个人中心，可以看到我的信息和地址管理，用户点击添加地址按钮，触发insertAddress方法，将弹框visible属性设置为true，弹框显示用户选择省市区，省市区使用el-cascader级联选择器（npm install element-china-area-data -S 安装中国省市区数据依赖，然后import相应组件即可使用) ，然后输入详细地址，收货人手机和姓名，通过表单校验后点击增加确认增加，发送请求到后台将数据插入地址表中，然后然后调用查询地址列表方法重新加载地址列表，编辑和删除使用作用域插槽slot-scope，点击编辑将点击行的数据row作为参数传到编辑方法中，然后将省市区，详细地址，收货人手机姓名回显到编辑框，当用户修改数据后，通过校验规则点击确认修改，发送请求到后台进行地址的修改，然后调用查询地址列表的方法重新加载地址列表数据，删除地址弹出确认删除框，点击确认，发送请求到controller，参数为地址id，通过mybatis执行sql将地址删除。

商品发布&订单提交

顶部使用el-step绑定商品参数，商品属性，图片上传操作，当完成商品发布某一操作就会完成勾选，商品参数包括商品名称，商品详情，商品分类，这几个有非空校验，名称和详情有长度限制，商品属性包括商品颜色，商品颜色使用el-colorPicker颜色选择器，商品数量，商品价格使用el-input-number计数器，type为number，这些有非空校验，数量价格只能是数字，图片上传使用el-upload通过点击或拖拽上传图片，上传后如上图可以看到缩略图，上传成功还会有勾选效果，拥有良好的视觉交互效果，选择图片上传会将图片存储到后台静态目录的下，通过校验后点击发布商品，商品信息封装成json对象传到controller进行处理，将商品插入到数据库商品表中，发布商品成功后会弹出商品发布成功的提示，之后在我的我的发布商品可以看见自己发布的商品，也可以在首页查询商品看见自己的商品。

订单提交模块详细设计：订单提交模块用户对购买的商品进行下单，选择收货地址后点击提交订单，后台会去判断库存是否充足，如果库存不足，订单将会被取消，如果库存充足，会进行库存的扣减，此时为了防止库存扣减为负数的情况，即多个人同事买了某件商品，查出来库存是充足的，但同时扣减库存可能会发生库存扣减为负数的情况，这种情况是不允许的，这里采用mysql的行锁机制，在扣减库存的sql语句后加上where 库存-购买数量>0,这样只有一个人亏扣减库存成功，其他人扣减失败，扣减失败后会取消订单，事务进行回滚，库存扣减成功后会生成订单，接下来会弹出支付框，如果支付成功，订单会被卖家处理进行发货，如果未付款，订单会在十五分钟后取消，并且返还商品库存。

五、总结

本系统是customer to customer校园二手交易平台，界面美观，简洁，颜色搭配合理，操作简便，拥有良好的提示效果和交互设计，系统前端使用vue渐进式框架+elementui编写，前端页面设计优美，使用elementui组件是开发效率大大提高，其中组件美观易用，比如上传组件可以看到图片的缩略图，还可以进行预览，极大增加了用户的体验，阅读api操作组件属性和方法能够非常方便；vue的组件化减少了重复的代码，vue的条件渲染，列表渲染，双向绑定，监听器等大大加大了开发的效率，使用vuecli创建项目会自动安装相应依赖，使前端开发工程化；在兼容性方面，本网站兼容firefox和chrome浏览器等主流浏览器。后台使用ssm框架，springmvc，spring和mybatis是企业里使用的主流框架，spring的ioc和依赖注入能够降低系统的耦合度，spring声明式事务能够通过注解进行事务管理，该框架拥有开发效率快，功能齐全，解耦等优点，在开发过程中编写业务代码简洁清晰，加上合理的注释，使代码简洁易懂，具有很好的可读性；在数据库的设计上满足第三范式，在sql性能上适当建立索引，减少不必要的数据查询，增强了sql的执行速度，减少了查询时间。

开发过程中遇到许多问题，比如跨域问题，请求发送不到后台系统，vue组件通信问题等，但都通过查询资料和在实习过程中学习解决了问题，系统没有实现vue的缓存，可以将组件缓存起来，当再次使用组件时，不用重新去后台去请求数据。通过这次开发，巩固了自己所学的开发技术，从中学到了很多东西，虽然系统可能存在一些问题，但功能完善，界面效果美观，交互良好，拥有非常好的用户体验。