基于springboot和vue的校园二手交易网站_基于vue+springboot的校园二手商品交易网站-CSDN博客

目前，网络上的学生二手交易平台，主要是为买卖双方提供一个进行信息交流的平台，用户可以在注册后，发表自己需要转让的商品信息，也可以查看需求的商品信息和转让人的信息，并进行购买。使用者亦可透过消息向产品资讯提问，并可自行发表产品资讯。该网站将物品分为不同类别，并设有检索功能，并将当前物品信息展示出来，并可由管理员加入特别的资讯。

目前的二手买卖网站，质量良莠不齐，发布的消息的真伪没有经过严格的审核，消息的真伪得不到保障[。与此同时，对已经销售或申请的消息，也没有及时地进行更新，这就造成了站点中的许多消息丧失了时效性。

1.6 本章小结

本章重点是对以 Spring Boot和 Vue为基础的校园二手交易网站的开发背景和意义进行了详细的介绍，并对目前二手交易在社会上的情况进行了论述，以及选择该题目的理由进行了说明，最后对本文的研究内容进行了描述。

2 需求分析

在软件开发的全过程中，需求分析显得尤为重要。在需求分析阶段，首先定义了系统所要使用的角色，并在此基础上对各个角色所要完成的功能进行了界定。开发人员必须了解用户具体的需求和需要。本章对系统进行了可行性分析，分析了管理员和用户的业务流程，又对系统的功能性需求和数据需求进行了说明。

2.1 可行性分析

2.1.1技术可行性

平台前台页面的开发语言为Java技术和Spring Boot框架，在一些页面中也涉及到JavaScript脚本，数据库用到了MySQL来进行开发。

Java吸收了C/C++的优点，但是摒弃了指针等容易使程序崩溃的内容，提升了语言的健壮性[3]。Java是完全的面向对象语言，非常适合大型软件的设计和开发。它去掉了头文件，指针，结构，联合等内容，比起其他语言，更加简单易学[4]。跨平台是Java语言的核心优势，且Java称霸时间较早，在整个行业建立了强大的生态体系，目前已经成为了覆盖IT行业的“第一大语言”，是计算机界的“英语”。虽然后来也有其他的跨平台语言出现，但是无法和Java强大的生态体系抗衡。Java的安全模型基于一个可定制的“沙盒”，Java 软件程序可在其中安全运行，对系统或用户无潜在风险[5]。

Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程[6]。该框架采用习惯优于配置的原则，从而使开发人员不再需要定义样板化的配置。用通俗的话来理解，就是Spring Boot其实不是什么新的框架，它只是默认配置了很多框架的使用方式，就像Maven整合了所有的jar包，Spring Boot整合了所有的框架。概括来讲就是，它使编码变得简单、使配置变得简单、使部署变得简单、使监控变得简单[7]。

MySQL数据库系统的结构化使数据管理更加方便，同时数据库系统丰富的接口可以与外界应用进行数据沟通与交换[8]。数据库系统的特点如下。

本人的软件知识和语言知识，相信是可以完成平台的设计和开发，所以在技术上是可行的。

2.1.2经济可行性

关于校园二手交易网站的经济分析，重点是分析在网站发展中所需的经济费用，看其是否低于最初的预算。在设计本网站时，所使用到的资源包括了 IDEA和 MySQL数据库，这两种工具都可以在网络上任意下载，并且只要在本人的计算机上就可以进行开发，所以在开发本网站时的经济成本很低，而且未来价值不可估算，所以这是一个非常有价值的网站。

2.5 本章小结

本章首先对校园二手交易需求进行分析。然后从用户和管理员两个角度对校园二手交易系统的功能模块进行了用例分析，确定具体有哪些功能。最后，对数据需求进行分析。

3系统设计

系统设计是以系统的整体目标和需求分析的结果为基础，对系统的整体架构和各个功能模块展开了具体的设计，以下是主要的设计流程。

3.1 总体设计

该系统的前端以 vue.js为基础，而后台则以 Spring Boot技术为基础。前端使用 ajax技术，将参数放到请求头中，并以JOSN格式传送到后台，后台使用 Restful样式的接口，来接收请求以及参数，并对其进行处理。这样就达到了高内聚、低耦合的效果，从而加速了系统的扩容与部署。在前面，路由被交给了浏览器端来执行，而后端则只需要负责传输 JSON数据，这样就可以提高系统的响应速度，同时还可以获得更好的用户体验。前端在vue.js的基础上，利用 Ajax请求，在后台进行 JSON的数据交换，再与 Bootstrap相结合，实现了网页特效的生成。Nginx作为一个 HTTP和一个反向代理服务器，对前端请求进行转发，从而避免了跨域的问题，并作为一个负载均衡器。在数据服务器中，使用 MySQL实现对各大系统的数据的存储。系统总体架构图如图 3-1 所示。

图 3-1 系统总体架构图

3.2 系统功能结构设计

结合校园二手交易系统的需求分析，整个系统分为前台和后台，即用户和管理员两大角色组成。

前端功能模块主要包括主页、购物车、和个人中心等，其中主页包括商品的分类展示，商品的详情查看，在商品的详情查看页面可以选择立即购买或者加入购物车，在商品页面还可以进行留言。购物车包括对购物车中订单的管理结算或者删除等。个人中心中主要有注册登录功能，可以对个人的信息进行编辑修改，还有发布商品功能，对已经发布的商品进行管理修改、删除等。对个人的商品订单进行管理对个人的地址进行管理。

后台功能主要包括用户管理、广告管理、分类管理、商品管理、订单管理等功能。统计分析是对过去的一段时间的订单数量进行统计并且以统计图展示出来，能够帮助管理员更好的了解市场，做出决策。用户管理主要是对已经注册的用户进行管理，可以查询、修改、删除用户，方便用户的使用和管理。广告管理是对首页的广告展示进行管理，对广告进行修改删除的操作。分类管理主要是对首页展示的分类进行增删改的操作。商品管理主要是对用户已经发布的商品进行管理。订单管理主要是对用户的订单进行管理，主要功能是按编号查询订单和订单删除。本系统的功能结构图如图 3-2 所示。

图 3-2 系统功能结构图

3.4 用户主要功能设计

3.4.1 个人中心模块功能设计

个人中心模块的功能包括注册登录、我的地址、我的订单、编辑个人信息、发布商品和我的发布，没有登录的用户进入系统之后需要登录，没有注册的用户需要注册之后登录。成功登录后在主页进入个人中心模块，然后选择相应的模块进行管理。个人中心管理模块的功能模块图如图所示3-6。

图3-6 个人中心管理模块图

订单管理模块的类图如图 3-7 所示。

图 3-7订单管理模块的类图

用户进入系统后，先选择注册，页面跳转到注册页面，在注册页面中用户可以输入自己的信息，点击注册，调用 register()方法，系统需要对注册信息是否完整和密码是否一致进行判断，如果信息完整而且密码一致，就会请求到后台register()接口，接口将接收到的member数据调用到到service层的queryByLoginName()方法然后完成注册。成功登录注册后就能够管理我的订单等相关信息。如果想要发布商品，点击发布商品，选择图片，填写物品名称等信息，点击发布。跳转到发布商品页面。点击选择图片标签，通过 fileupload()方法调用到后台upload()方法保存图片，通过 savegoods()方法后调用Service 层然后将数据保存到数据库中。

Class GoodsEntity

类名：商品信息实体类

功能：主要为用户提供商品信息，方便用户获取，GoodsEntity 类的具体信息如表 3-1 所示。

表 3-1 GoodsEntity类

类名	GoodsEntity
包名	Goods.entity.GoodsEntity
类描述	该类为商品信息实体类
属性	权限			类型	名称		描述
	private			Integer	id		商品 id
	private			String	goodsName		商品名称
	private			Integer	categoryId		分类id
	private			BigDecimal	price		商品价格
	private			String	describe		商品描述
	private			String	picUrl		商品图片
	private			Date	createTime		创建时间
	private			Integer	status		上下架状态
方法		权限	方法名			描述
		public	getId			获取商品id
		public	setId			设置商品 id
		public	getGoodsName			获取商品名称
		public	setGoodsName			设置商品名称
		public	getCategoryId			获取分类id
		public	setCategoryId			设置分类id
		public	getPrice			获取商品价格
		public	setPrice			设置商品价格
		public	getDescribe			获取商品描述
		public	setDescribe			设置商品描述
		public	getPicUrl			获取商品图片
		public	setPicUrl			设置商品图片
		public	getCreateTime			获取创建时间
		public	setCreateTime			设置创建时间
		public	getStatus			获取上下架转态
		public	setStatus			设置上下架状态

3.4.2 购物车功能设计

购物车模块包括查看购物车、加入购物车、商品结算和商品删除功能。购物车模块的模块图如图3-10所示

图3-10 购物车模块图

具体的购物车管理模块类图如图 3-5 所示。

图 3-5商品管理模块的类图

用户成功登录校园二手交易网站，在首页商品浏览之后，对自己满意的商品可以选择加入购物车。用户成功登录校园二手交易网站，在首页浏览商品双击查看详情之后，页面跳转到商品详情页面，对满意的商品可以选择加入购物车，点击加入购物车，页面会触发addShopCart()事件，请求到后台接口ApiCartController中的save()方法，然后将接受的参数处理调用到cartService层，最后将数据保存到数据库中，加入购物车之后在购物车页面就可以看到购物车列表可以点击商品结算，点击删除按钮页面触发delect()方法，传递到后台将数据删除。

Class GoodsEntity

类名：商品信息实体类

功能：主要为用户提供商品信息，方便用户获取，GoodsEntity 类的具体信息如表 3-1 所示。

表 3-1 GoodsEntity类

类名	GoodsEntity
包名	Goods.entity.GoodsEntity
类描述	该类为商品信息实体类
属性	权限			类型	名称		描述
	private			Integer	id		商品 id
	private			String	goodsName		商品名称
	private			Integer	categoryId		分类id
	private			BigDecimal	price		商品价格
	private			String	describe		商品描述
	private			String	picUrl		商品图片
	private			Date	createTime		创建时间
	private			Integer	status		上下架状态
方法		权限	方法名			描述
		public	getId			获取商品id
		public	setId			设置商品 id
		public	getGoodsName			获取商品名称
		public	setGoodsName			设置商品名称
		public	getCategoryId			获取分类id
		public	setCategoryId			设置分类id
		public	getPrice			获取商品价格
		public	setPrice			设置商品价格
		public	getDescribe			获取商品描述
		public	setDescribe			设置商品描述
		public	getPicUrl			获取商品图片
		public	setPicUrl			设置商品图片
		public	getCreateTime			获取创建时间
		public	setCreateTime			设置创建时间
		public	getStatus			获取上下架转态
		public	setStatus			设置上下架状态

3.4.3 商品展示功能设计

商品展示模块包括商品搜索功能和分类展示功能。商品展示模块的模块图如图3-10所示。

图3-10 购物车模块图

具体的商品展示模块的类图如图 3-6 所示。

图 3-6商品展示模块的类图

用户登录成功后，进入了学校的二手交易系统，在搜索栏中输入物品的名称，然后点击搜索按钮，如果存在就能搜索到自己想要的物品。进入校园二手交易系统之后，页面自动跳转到主界面，在用户成功登录系统之后，在搜索框中输入想要搜索的信息，点击查找，前台会调用页面的search()方法，然后在方法中通过页面的链接跳转到商品搜索页面，在页面中通过getGoods()方法调用到后台controller层，然后将数据从数据库中查出来，返回到前端。在进入首页的时候组件会通过created()方法去调用查找分类的方法getCategory()将分类数据从数据库中查出来，然后循环展示在前台页面中。

Class GoodsEntity

类名：商品信息实体类

功能：主要为用户提供商品信息，方便用户获取，GoodsEntity 类的具体信息如表 3-1 所示。

表 3-1 GoodsEntity类

类名	GoodsEntity
包名	Goods.entity.GoodsEntity
类描述	该类为商品信息实体类
属性	权限	类型	名称		描述
	private	Integer	id		商品 id
	private	String	goodsName		商品名称
	private	Integer	categoryId		分类id
	private	BigDecimal	price		商品价格
	private	String	describe		商品描述
	private	String	picUrl		商品图片
	private	Date	createTime		创建时间
	private	Integer	status		上下架状态
方法	权限	方法名		描述
	public	getId		获取商品id
	public	setId		设置商品 id
	public	getGoodsName		获取商品名称
	public	setGoodsName		设置商品名称
	public	getCategoryId		获取分类id
	public	setCategoryId		设置分类id
	public	getPrice		获取商品价格
	public	setPrice		设置商品价格
	public	getDescribe		获取商品描述
	public	setDescribe		设置商品描述

续表3-1

public	getPicUrl	获取商品图片
public	setPicUrl	设置商品图片
public	getCreateTime	获取创建时间
public	setCreateTime	设置创建时间
public	getStatus	获取上下架转态
public	setStatus	设置上下架状态

3.5 管理员主要功能设计

3.5.1 商品管理功能设计

商品管理模块主要是按照条件搜索商品信息、添加商品、商品详情查看、商品信息修改，商品删除功能。用户在主页中可以分类查找商品，也可以通过商品名称搜索商品，然后对想要的商品可以加入购物车或者直接购买。用户也可以将自己想要出售的商品进行发布。系统会将数据存入到数据库中，之后管理员就能对商品进行操作，具体的商品管理模块类图如图 3-5 所示。

图 3-5商品管理模块的类图

搜索商品信息的功能设计：用户在主界面搜索框中输入要检索的商品名，点击查询按钮，然后页面中触发search()方法，链接到搜索物品页面，然后页面通过getGoods()方法调用到后台的controller层然后将数据从数据库中查出来，返回到前端。

发布商品的功能设计：用户有想要出售的商品可以在个人中心中的发布商品栏中添加商品，功能的主要实现为用户在发布商品页面中的input标签和select标签选择添加的内容，选择添加的图片，然后点击保存按钮，就会触发页面中的saveGoods()方法调用到后台的save()方法。

商品删除的功能设计：在用户添加商品之后，管理员就可以在后台商品管理页面查看到商品的信息，对商品可以进行删除操作。选中选择框之后点击删除按钮触发del()方法。获取选中的id，然后请求到后台的controller层

商品管理模块主要相关类的说明如下：

Class GoodsEntity

类名：商品信息实体类

功能：主要为用户提供商品信息，方便用户获取，GoodsEntity 类的具体信息如表 3-1 所示。

表 3-1 GoodsEntity类

类名	GoodsEntity
包名	Goods.entity.GoodsEntity
类描述	该类为商品信息实体类
属性	权限			类型	名称		描述
	private			Integer	id		商品 id
	private			String	goodsName		商品名称
	private			Integer	categoryId		分类id
	private			BigDecimal	price		商品价格
	private			String	describe		商品描述
	private			String	picUrl		商品图片
	private			Date	createTime		创建时间
	private			Integer	status		上下架状态
方法		权限	方法名			描述
		public	getId			获取商品id
		public	setId			设置商品 id
		public	getGoodsName			获取商品名称
		public	setGoodsName			设置商品名称
		public	getCategoryId			获取分类id

续表3-1

public	setCategoryId	设置分类id
public	getPrice	获取商品价格
public	setPrice	设置商品价格
public	getDescribe	获取商品描述
public	setDescribe	设置商品描述
public	getPicUrl	获取商品图片
public	setPicUrl	设置商品图片
public	getCreateTime	获取创建时间
public	setCreateTime	设置创建时间
public	getStatus	获取上下架转态
public	setStatus	设置上下架状态

3.5.2 商品类别功能设计

商品类别管理模块的主要目的是让用户在前端可以选择自己喜欢的商品类别，这样可以让用户更容易地找到商品，而管理员则可以添加商品类别，也可以对其进行修改，具体的商品类别管理模块的类图如图 3-6 所示。

图 3-6 类别管理模块的类图

添加商品类别的功能设计：点击管理端之后，管理员验证用户名和密码通过后在侧栏中选择商品管理之后页面跳转到category.html页面点击新增按钮，触发add()方法，进入新增页面选择图片填写类别信息之后点击确定按钮触发saveOrUpdate()方法请求到后台save()方法，然后将数据保存到数据库中。

修改商品类别的功能设计：点击管理端之后，管理员验证用户名和密码通过后在侧栏中选择商品管理之后页面跳转到category.html页面选中要修改的数据点击修改按钮，触发update()方法，进入更新页面选择图片填写类别信息之后点击确定按钮触发saveOrUpdate()方法请求到后台controller层

1. Class CategoryEntity

类名：商品类别实体类

功能：将商品进行分类，便于用户查找也便于管理员进行管理CategoryEntity类的具体信息如表 3-3 所示。

表 3-3 CategoryEntity类

类名	CategoryEntity
包名	Goods.entity.CategoryEntity
类描述	该类为商品类别实体类
属性	权限	类型	名称	描述
	private	String	id	类别 id
	private	String	categoryName	类别名称
	private	Integer	sort	排序id
	private	String	picUrl	类别图片
方法	权限	方法名		描述
	public	getId		获取类别 id
	public	setId		设置类别 id
	public	getCategoryName		获取类别名称
	public	setCategoryName		设置类别名称
	public	getSort		获取排序id
	public	setSort		设置排序id
	public	getPicUrl		获取图片url
	public	setPicUrl		设置图片url

3.5.3 订单管理功能设计

订单管理模块中，用户在前台提交了订单之后，管理员登录之后就能在后台查看到订单数据管理员主要是对订单数据进行查询和删除操作，具体的订单管理模块的类图如图 3-7 所示。

图 3-7 订单管理类图

查询订单功能设计：订单管理模块中，用户在前台提交了订单之后，管理员登录之后就能在后台查看到订单数据，点击左侧栏的订单管理页面跳转到订单管理页面，在页面中的input框中输入要查询的订单编号，点击查询按钮会触发query()方法调用到后台。

删除订单的功能设计：订单管理模块中，用户在前台提交了订单之后，管理员登录之后就能在后台查看到订单数据，点击左侧栏的订单管理页面跳转到订单管理页面，选中要删除的订单，点击删除触发del()方法请求到后台controller层的delete()方法，然后将数据保存到数据库中，然后返回到前端。

1. Class OrderEntity

类名：订单管理实体类

功能：用户在提交订单之后，用户可以查看订单数据，订单数据也会展示在后台管理系统中，由管理员进行管理 OrderEntity类的具体信息如表 3-4 所示。

表 3-4 OrderEntity类

类名	OrderEntity
包名	order.entity.OrderEntity
类描述	该类为订单信息实体类
属性	权限		类型	名称		描述
	private		Integer	id		订单 id
	private		String	orderNumber		订单编号
	private		BigDecimal	totalAmount		订单金额
	private		Integer	orderStatus		订单状态
	private		MemberEntity	member		成员
	private		List	orderGoodsList		订单商品
	private		String	remark		订单备注
	private		Date	createTime		订单创建时间
方法	权限	方法名			描述
	public	getId			获取订单 id
	public	setId			设置订单 id
	public	getOrderNumber			获取订单编号
	public	setOrderNumber			设置订单编号
	public	getTotalAmount			获取订单金额
	public	setTotalAmount			设置订单金额
	public	getOrderStatus			获取订单状态
	public	setOrderStatus			设置订单状态
	public	getMember			获取成员
	public	setMember			设置成员
	public	getOrderGoodsList			获取订单商品
	public	setOrderGoodsList			设置订单商品
	public	getRemark			获取订单备注
	public	setRemark			设置订单备注
	public	getCreateTime			获取创建时间

3.5.4 用户管理功能设计

用户管理模块中，管理员可以对已经注册的用户进行管理，主要操作有查询、密码重置，删除功能下面以密码重置功能为例，具体的用户管理模块的类图如图 3-7 所示。

图 3-8 用户管理类图

密码重置功能设计：用户管理模块中，用户在前台注册了用户信息，管理员在后台登录之后就能在后台查看到用户信息，点击左侧栏的用户管理页面跳转到用户管理页面，在页面中点击密码重置按钮，触发updateInit()方法，请求到后台controller层的updateInit()方法，然后将数据保存到数据库中，返回到前端。

Class MemberEntity

类名：用户基本信息实体类

功能：主要对用户基本信息实体类进行封装，用于设置用户基本信息实体各种属性的设置与获取，User 类的具体信息如表 3-5 所示。

表 3-5 MemberEntity类

类名	MemberEntity
包名	Member.entity.MemberEntity
类描述	该类为用户基本信息实体类
属性	权限		类型	名称		描述
	private		String	id		用户 id
	private		String	openid		微信openid
	private		String	nickname		昵称
	private		Integer	avatarUrl		头像
方法	权限		方法名			描述
	public		getId			获取用户 id
	public		setId			设置用户 id
方法	权限	方法名			描述
	public	getOpenid			获取用户微信openid
	public	setOpenid			设置用户微信openid
	public	getNickname			获取昵称
	public	setNickname			设置昵称
	public	getAvatarUrl			获取头像
	public	setAvatarUrl			设置头像

Class MemberAddressEntity

类名：用户详细信息实体类

功能：主要对用户详细信息实体类进行封装，用于设置用户详细信息实体各种属性的设置与获取，UserInfo 类的具体信息如表 3-6 所示。

表 3-6 MemberAddressEntity类

类名	MemberAddressEntity
包名	Member.entity.MemberAddressEntity
类描述	该类为用户详细信息实体类
属性	权限	类型	名称	描述
	private	String	id	用户 id
	private	String	name	用户名
	private	Integer	contacts	用户性别
	private	String	avatarUrl	用户头像
	private	String	email	用户邮箱
	private	String	address	用户地址

续表3-6

方法	权限	方法名	描述
	public	getId	获取用户 id
	public	setId	设置用户 id
	public	getName	获取用户名
	public	setName	设置用户名
	public	getContacts	获取用户联系人
	public	setContacts	设置用户联系人
	public	getAvatarUrl	获取用户头像
	public	setAvatarUrl	设置用户头像
	public	getEmail	获取用户邮箱
	public	setEmail	设置用户邮箱
	public	getAddress	获取用户地址
	public	setAddress	设置用户地址

3.5.5 广告管理功能设计

广告管理模块中，管理员可以对主页的广告进行管理，主要操作有增加、修改、删除功能，下面以修改广告功能为例，具体的广告管理模块的类图如图 3-9 所示。

修改广告的功能设计：管理员在后台登录之后就能查看到用户信息，点击左侧栏的广告管理页面跳转到广告管理页面选中要修改的数据点击修改按钮，触发update()方法，进入更新页面选择图片填写类别信息之后点击确定按钮触发saveOrUpdate()方法请求到后台controller，然后将数据保存到数据库中，返回到前端。

图 3-9 广告管理的类图

1. Class AdvertEntity

类名：广告信息实体类

功能：对广告信息进行封装，AdvertEntity类的具体信息如表 3-7 所示。

表 3-7 AdvertEntity类

类名	AdvertEntity
包名	advert.entity.AdvertEntity
类描述	该类为广告信息实体类
属性	权限		类型	名称		描述
	private		String	id		广告id
	private		String	picUrl		广告图片
	private		String	link		广告链接
	private		Integer	sort		广告分类
	private		Date	createTime		创建时间
方法	权限	方法名			描述
	public	getId			获取广告id
	public	setId			设置广告id
	public	getPicUrl			获取广告图片
	public	setPicUrl			设置广告图片
	public	getLink			获取广告链接
	public	setLink			设置广告链接
	public	getSort			获取广告分类
	public	setSort			设置广告分类
	public	getCreateTime			获取创建时间
	public	setCreateTime			设置创建时间

3.7 本章小结

本章是对该系统的总体设计进行说明。首先，在此基础上，完成了整个体系结构的整体结构设计，并对整个体系结构的运行过程进行了详细的分析，接着，对每个功能模块进行了详细的分析，并通过一个类图来说明各个模块之间的实施关系。

4 系统实现

系统的实现就是将系统以可视化的方式展现在用户的眼前，校园二手交易系统的实现由系统前端展示模块和后台管理模块构成。其主要功能模块的具体实施过程如下所示。

4.1 用户主要功能模块的实现

4.1.1 个人中心模块功能实现

一、用户注册登录功能

1.用户注册功能的实现

用户在进入校园二手交易系统之后，如果还没有注册，那么首先要点击注册，填写用户名、密码等信息，之后再点击注册按钮，注册完毕后就可以使用刚刚注册的信息登录系统。

用户注册功能的实现过程如下：

(1)用户进入系统后，先选择注册，页面跳转到 register.html 页面。

(2)在注册页面中，用户可以输入自己需要输入的信息，点击注册，并调用 register()方法，系统需要对注册信息是否完整和密码是否一致进行判断，如果信息完整而且密码一致，那么就可以通过ajax的post请求请求到后台的接口。

(3)具体代码实现逻辑：用户点击注册之后前台通过ajax请求到后controller层ApiLoginController的register()接口，接口将接收到的MemberEntity类型的member数据调用到到service的memberService中queryByLoginName()方法，然后调用到memberDao层的queryByLoginName()方法，controller层通过返回的数据m判断用户是否已经注册。

(4)如果没有注册，调用到memberService层的save()方法，然后调用到dao层的save方法，然后通过insert语句将数据保存到数据库中。并返回注册成功的数据，返回到前端。

用户注册功能时序图如图 4-12 所示。

图 4-12 用户注册功能时序图

用户注册功能实现图如图 4-13 所示。

图 4-13 用户注册功能实现图

2.用户登录功能实现

用户成功注册之后，或者之前注册过，用户进入校园二手交易系统后，点击登录按钮，输入用户名和密码，如果用户名和密码正确，完成登录。

用户登录功能的实现过程如下：

(1)用户点击登录按钮进行登录，页面跳转到 login.html 页面。

(2)用户在页面中输入信息，点击登录，调用页面中的login()方法，系统首先判断登录名和密码是否完整，如果完整，页面则通过ajax的post 请求给后台。

(3)具体代码实现逻辑：用户点击登录按钮之后，系统通过 ajax的post请求，请求到后台接口ApiLoginController 控制层中的login()方法，方法中将传入的信息通过memberService的queryByLoginName()方法传递给dao层，通过返回的memberEntity类型的member对象来判断账号是否存在，且账号密码是否正确。然后生成token，然后将用户信息和token放在一个Map中返回到前端。

具体用户登录时序图如图 4-14 所示。

图 4-14 用户登录时序图

具体用户登录效果图如图 4-15 所示。

图 4-15 用户登录效果图

二、发布商品功能

1.发布商品的功能实现

用户进入校园二手交易系统后，在用户成功登录系统之后，进入个人中心，点击发布商品，选择图片，填写物品名称等信息，点击发布。

发布商品的实现过程如下：

(1)用户成功进入校园二手交易系统，且成功登录系统，点击个人中心，前端页面跳转到 user.html 页面。点击个人中心中的发布商品，跳转到publish.html页面。

(2)选择图片功能实现具体代码实现逻辑：点击选择图片标签，触发事件fileupload()，调用到后台的api接口中的upload()方法，方法中先判断文件是否为空，然后将文件保存到定义的文件夹路径中。

(3)保存按钮具体代码实现逻辑：在要发布的信息输入完成之后，点击保存按钮页面触发savegoods()方法，方法中通过ajax的post请求到后端ApiGoodsController层的save()方法，然后调用Service 层 ApiGoodsService中的 save()方法，然后Service 层调用dao层的update()方法，将数据保存到数据库中。

(4)数据保存到商品表之后，后台管理员通过审核之后就能够在前端商品页面展示了。

具体发布商品时序图如图 4-20 所示。

图 4-20 发布商品时序图

具体发布商品效果图如图 4-21 所示。

图 4-21 发布商品效果图

三、用户商品留言功能

1.用户商品留言功能实现

用户成功登录校园二手交易网站，用户就可以在商品详情页面查看每个用户的评论，在详情页面也可以在文本框中输入想要评论的信息，然后点击保存之后，信息就会保存然后展示在详情页面中

用户发布动态功能的实现过程如下：

(1)用户在详情页面detail.html点击留言按钮，前端页面会触发组件evaluation弹窗展示，先判断是否登录，如果已经登录，则可以在文本框中输入留言内容

(2)在文本框中输入内容，然后点击保存按钮，留言就会保存到详情页面中。

(3)具体代码实现逻辑：用户点击保存时，会触发页面中的 saveComment()方法，然后通过ajax发送 post 请求，然后将留言数据提交到后台 ApiEvaluationController 中的save()方法，然后调用Service 层 orderEvaluationService中的 save()方法，然后Service 层调用dao层的update()方法，将数据保存到数据库中。

用户发布动态时序图如图 4-16 所示。

图 4-16 用户商品留言时序图

用户商品留言功能实现图如图 4-17 所示。

图 4-17 用户商品留言效果图

4.1.2 购物车功能实现

商品加入购物车功能

1.商品加入购物车功能实现

用户成功登录校园二手交易网站，在首页商品浏览之后，对自己满意的商品可以选择加入购物车。

商品加入购物车实现过程如下：

(1)用户成功登录校园二手交易网站，在首页浏览商品双击查看详情之后，页面跳转到detail.html页面跳转到对满意的商品可以选择加入购物车，点击加入购物车。

(2)点击加入购物车，页面会触发addShopCart()事件，方法中会将选择的行所有属性保存在对象中，然后通过ajax的post请求携带数据调用到后台的接口。

(3)请求到后台接口ApiCartController中的save()方法，然后将接受的参数处理调用到cartService层的save()方法，然后通过cartDao和mybatis然后通过insert语句将数据保存到数据库中。

(4)加入购物车之后在购物页面cart.html就可以看到购物车列表可以点击商品结算。

具体的加入购物车时序图如图 4-9 所示。

图 4-9 加入购物车时序图

商品加入购物车实现图如图 4-10 所示。

图 4-10 加入购物车实现图

4.1.3 商品展示功能实现

一、用户搜索商品功能

1.用户搜索商品功能实现

用户登录成功后，进入了学校的二手交易系统，在搜索栏中，输入物品的名称，再点击搜索按钮，如果存在，就能搜索到自己想要的物品。

用户搜索商品功能的实现过程如下：

(1)进入校园二手交易系统之后，页面自动跳转到index.html页面，在用户成功登录系统之后，在首页刷新之后，可以选择商品等操作。

(2)在搜索框中输入想要搜索的信息，点击查找，前台会调用页面的search()方法，然后在方法中通过页面的链接跳转到goods.html页面，在页面中调用了getGoods()方法通过传入的参数q（搜索栏信息）用ajax的post请求后台接口，接收返回数据。

(3)具体的代码实现逻辑：后台通过controller层的list()方法接收到前台传过来的参数，然后将接收到的参数简单处理后调用goodsService层的queryList()方法然后调用到goodsDao层通过xml配置文件然后通过select语句将数据保存到数据库中。将返回的数据封装到GoodsEntity类型的list中，返回到前端。

(4)前端通过返回的返回的数据，将数据封装goodses数组中，在html页面中通过div标签将数据循环出来。

用户搜索功能时序图如图 4-3 所示。

图 4-3 用户搜索功能时序图

用户搜索功能实现图如图 4-4 所示。

图 4-4 用户搜索功能实现图

二、商品分类功能

1.商品分类功能实现

用户进入系统首页之后点击全部商品页面下的分类组件就能跳转到相应的分类中，然后选择自己想要的商品类别。

商品分类功能的实现过程如下：

用户进入校园二手交易系统之后页面打开index.html页面，然后选择自己喜欢的模块，页面就会请求到相应的模块.
在进入首页的时候，组件会通过created()方法去调用查找分类的方法getCategory()，然后页面中通过getJSON()方法（封装了ajax）调用后台请求，然后将返回的数据存放在categoryList中，然后前端页面通过标签中的for循环将数据循环展示出来。
请求调用到后台的ApiCategoryController层list方法，然后定义一个params，调用categoryService层的queryList()方法。然后再categoryDao层调用queryList()方法，通过mybatis的xml文件，从数据库中拿到商品分类表flea_category的数据，最后将数据在controller层封装成CategoryEntity类型的list返回到前端。
前端展示之后，用户就可以按照分类查看商品信息了，对满意的商品可以直接点击查看详情然后点击购买。

分类功能时序图如图 4-7 所示。

图 4-7 商品分类功能时序图

分类功能效果图如图 4-10 所示。

图 4-8 分类功能实现图

4.2管理员主要功能模块的实现

4.2.1 商品管理模块实现

1.商品管理模块功能实现

后台商品管理模块主要是按照商品名称搜索商品信息、审核通过按钮、审核失败按钮、和商品删除功能。用户可以在主页中的个人中心中发布想要出售的商品。系统会将数据存入到数据库中，之后管理员就能对商品进行操作。

商品管理模块的实现过程如下：

(1)商品搜索功能：管理员输入用户名和密码，验证正确后，进入管理员页面。在管理员页面点击商品管理，商品管理页面会显示商品的基本信息，商品名称，分类等信息。可以通过商品名称搜索想要浏览的商品，用户在主界面搜索框中输入要检索的商品名，点击查询按钮，然后页面中的button组件就会触发vue中methods里面的search()方法，然后页面通过getGoods()方法，以传过来的检索信息q以及page和pagesize等为参数，通过jQuery封装的ajax调用到后台。

(2)后台的controller层的list方法通过接收到的Map调用service层（goodsService）的queryList()方法，然后调用到goodsDao层通过xml配置文件将数据从数据库中查出来，将返回的数据封装到GoodsEntity类型的list中，返回到前端。

(3)商品审核功能：在主页有用户在个人中心添加了新的商品之后，后台管理员在goods.html就能在商品管理页面查看到新发布的商品信息，然后通过直接查看或者搜索功能，选择到想要审批的商品，可以选择审批通过或者审批不通过，或者删除按钮，点击审批通过，页面触发upper()方法，方法中通过ajax的post请求调用到后台。

(4)后台通过注解调用到GoodsController层的upper()方法，然后调用goodsService层的updateStatus()方法，最后通过dao层updateStatus()方法和myabtis，然后通过insert语句将数据保存到数据库中，返回到前端。

(5)审核失败的功能同商品审核功能类似。

商品管理时序图如图 4-26 所示。

图 4-26商品管理时序图

商品管理实现图如图 4-28 所示

图 4-28商品管理实现图

4.2.2 分类管理模块实现

1.分类管理模块实现

商品类别管理模块的主要目的是让用户在前端可以选择自己喜欢的商品类别，这样可以让用户更容易地找到商品，而管理员则可以添加商品类别，也可以对其进行修改。

添加的实现过程如下：

(1)点击管理端之后，管理员验证用户名和密码通过后再侧栏中选择商品类别管理之后页面跳转到category.html页面。

(2)点击新增按钮，触发add()方法，在页面中有一个showList判断点击新增后就会改变布尔类型showList的值新增组件就会展示出来，进入新增页面选择图片填写类别信息之后点击确定按钮触发saveOrUpdate()方法，方法中通过ajax提交的post请求到后台

(3)后台根据url请求到后台controller层的save()方法，save方法通过接收到的MemberEntity类型的数据调用service层的save()方法然后再调用到dao层的save()方法然后通过insert语句将数据保存到数据库中。

添加分类时序图如图 4-37 所示。

图 4-37 分类管理时序图

添加商品分类实现图如图 4-38 所示

图 4-38 添加商品分类实现图

修改商品分类的实现过程如下：

(1)点击管理端之后，管理员验证用户名和密码通过后在侧栏中选择商品管理之后页面跳转到category.html页面。

(2)选中要修改的数据点击修改按钮，触发update()方法，在页面中有一个showList判断点击新增后就会改变布尔类型showList的值新增组件就会展示出来，进入更新页面选择图片填写类别信息之后点击确定按钮触发saveOrUpdate()方法，方法中通过ajax提交的post请求到后台。

(3)后台通过url请求到后台controller层的save()方法，save()方法通过接收到的MemberEntity类型的数据调用service层的save()方法然后再调用到dao层的save()方法将数据保存到数据库中。

修改商品分类时序图如图 4-39 所示。

图 4-39 修改商品分类时序图

修改商品分类效果图如图 4-40 所示。

图 4-40 修改商品分类效果图

4.2.3 订单管理模块实现

1.订单管理实现

订单管理模块中，用户在前台提交了订单之后，管理员登录之后就能在后台查看到订单数据管理员主要是对订单数据进行查询和查看操作。

订单查看的实现过程如下：

(1)订单管理模块中，用户在前台提交了订单之后，管理员登录之后就能在后台查看到订单数据，点击左侧栏的订单管理页面跳转到order.html页面。

(2)双击要查看的订单，触发select()方法，通过getSelectedVals()方法获取选中的id，然后通过ajax提交的post请求到后台。

(3)请求到后台controller层的select()方法，然后方法中调用Service层中的selectBatch()方法，然后通过dao层selectBatch()方法然后通过select语句将数据保存到数据库中。然后返回到前端。

订单查看时序图如图 4-35 所示。

图 4-35 订单查询时序图

订单查看实现图如图 4-36 所示。

图 4-36 订单查看实现图

4.2.4 用户管理模块实现

1.用户管理实现

用户在首页注册之后，信息就会显示在后台用户管理页面，用户管理模块中，管理员可以对已经注册的用户进行管理，主要操作有查询、密码重置，删除功能下面以密码重置功能为例。

密码重置的实现过程如下：

(1)管理员进入用户管理模块时，前端会跳转到member.html。

(2)页面，该页面会显示用户头像、昵称、姓名等。

(3)用户管理模块中，用户在前台注册了用户信息之后，管理员在后台登录之后就能在后台查看到用户信息，点击左侧栏的用户管理页面跳转到member.html页面，在页面中点击密码重置按钮，触发updateInit()事件，通过getSelectedVals()获得选中的id，方法中通过ajax提交的post请求，根据url请求到后台。

(4)根据前台url请求到后台controller层的updateInit()方法，updateInit()方法通过接收到的id调用service层的update()方法然后再调用到dao层的update()方法通过mybatis的insert语句将数据保存到数据库中，返回到前端。

密码重置时序图如图 4-31 所示。

图 4-31密码重置时序图

用户密码重置实现图如图 4-32 所示。

图 4-32 密码重置实现图

查看用户信息的实现过程如下：

(1)管理员输入账号密码进入校园二手交易管理系统后台，然后点击用户管理页面。

(2)管理员选中一行用户数据然后点击删除按钮触发select()事件，方法中通过ajax的post请求到后端。

(3)后端通过前台的url请求到MemberController层的select()方法，然后调用到memberService层的selectBatch()方法，然后在memberDao层和mybatis然后通过insert语句将数据保存到数据库中。

(4)保存成功之后，后台将数据返回到前端。

查看用户信息的时序图如图 4-33 所示。

图 4-33 查看用户信息的时序图

查询用户信息的实现图如图 4-34 所示。

图 4-34 查看用户信息的实现图

4.2.5 广告管理模块实现

1.广告管理模块实现

广告管理模块中，管理员可以对已经主页展示的广告进行管理，主要操作有增加、修改、删除功能下面以修改广告功能为例。

添加广告的实现过程如下：

(1)点击管理端之后，管理员验证用户名和密码通过后在侧栏中选择广告管理之后页面跳转到advert.html页面点击新增按钮。

(2)触发add()方法，在页面中有一个showList判断点击新增后就会改变布尔类型showList的值新增组件就会展示出来，进入新增页面选择图片、排序、和是否启用之后点击确定按钮触发saveOrUpdate()方法，方法中通过ajax提交的post请求到后台。

(3)后台根据url请求到后台controller层的save()方法，save()方法通过接收到的MemberEntity类型的数据调用service层的save()方法然后再调用到dao层的save()方法，然后通过insert语句将数据保存到数据库中。

添加广告时序图如图 4-41 所示。

图 4-41 添加广告时序图

添加广告效果图如图 4-42 所示。

图 4-42 添加广告实现图

修改广告的实现过程如下：

(1)管理员在后台登录之后就能在后台查看到用户信息，点击左侧栏的广告管理页面跳转到advert.html页面选中要修改的数据点击修改按钮。

(2)触发update()方法，在页面中有一个showList判断点击新增后就会改变布尔类型showList的值新增组件就会展示出来，进入更新页面选择图片填写类别信息之后点击确定按钮触发saveOrUpdate()方法，方法中通过ajax提交的post请求到后台。

(3)根据url请求到后台controller层的update()方法，update()方法通过接收到的MemberEntity类型的数据调用service层的update()方法然后再调用到dao层的update()方法将数据保存到数据库中，返回到前端。

修改广告时序图如图 4-43 所示。

图 4-43 修改广告时序图

修改广告效果图如图 4-44 所示。

图4-44修改广告实现图

4.3 本章小结

在这一章中，对系统功能实现部分进行了重点的阐述，它们分别从前端功能实现和后台功能实现两个方面，对校园二手交易系统的主要功能进行了介绍。在此过程中，对主要模块商品展示功能的设计流程进行了详细的阐述，并对其进行了详细的说明，最后再对该功能的界面效果图进行展示。

5 系统测试

测试是开发一个系统的重要环节，是对软件最后的完成起至关重要的作用[11]。随着新技术的出现，软件测试的方法也变得越来越多，对系统整体的功能和性能需求也逐步提高。测试的目的保证系统的完整性，避免某些功能影响其他功能的运行，保证了系统的独立性[12]。

5.4本章小结

这一章的重点是对软件的功能进行了测试，并用表格的方式说明了各部分的测试结果。其中包含用户登录注册、商品分类、购物车管理、用户评论、管理员管理商品、管理员管理用户对这些功能性模组的测试说明，并对每一个模块调用接口的时间进行性能测试。

6 结束语

本论文主要设计了一个基于Spring Boot和Vue的校园二手交易系统，设计目标要求达到界面友好、运行流畅、操作简单。应用所学的知识，完成系统基本功能的设计与实现。

基于springboot和vue的校园二手交易网站

1 绪论

1.1 项目开发背景和意义

1.2 项目研究现状

1.6 本章小结

2 需求分析

2.1 可行性分析

2.1.1技术可行性

2.1.2经济可行性

2.5 本章小结

3系统设计

3.1 总体设计

3.2 系统功能结构设计

3.4 用户主要功能设计

3.4.1 个人中心模块功能设计

3.4.2 购物车功能设计

3.4.3 商品展示功能设计

3.5 管理员主要功能设计

3.5.1 商品管理功能设计

3.5.2 商品类别功能设计

3.5.3 订单管理功能设计

3.5.4 用户管理功能设计

3.5.5 广告管理功能设计

3.7 本章小结

4 系统实现

4.1 用户主要功能模块的实现

4.1.1 个人中心模块功能实现

4.1.2 购物车功能实现

4.1.3 商品展示功能实现

4.2管理员主要功能模块的实现

4.2.1 商品管理模块实现

4.2.2 分类管理模块实现

4.2.3 订单管理模块实现

4.2.4 用户管理模块实现

4.2.5 广告管理模块实现

4.3 本章小结

5 系统测试

5.4本章小结

6 结束语

6.1 XXX

6.2 XXX