基于SSM的校园二手交易平台的设计与实现

淩亂°似流年 2022-05-25 02:14 207阅读 0赞

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

**完整的设计报告在后面**

喜欢就点一下star哟，谢谢亲的支持  
[https://github.com/wsk1103/Used-Trading-Platform][https_github.com_wsk1103_Used-Trading-Platform]

下载地址： [https://download.csdn.net/download/wsk1103/13189870][https_download.csdn.net_download_wsk1103_13189870]

Java版本：1.8  
数据库：MySQL  
框架：Spring + Spring MVC + MyBatis  
服务器：Tomcat  
前端解析框架：Thymeleaf  
开发工具：Idea 2017  
版本管理工具：Maven  
版本控制工具：GitHub

搭建数据库  
MySQL  
driver=com.mysql.jdbc.Driver  
url=jdbc:mysql://localhost:3306/c2c  
username=root  
password=123456  
initiaSize=0  
maxActive=20  
maxIdle=20  
minIdle=1  
maxWait=60000  
、

先在数据中创建名为c2c的数据库，使用Navicat for MySQL运行 c2c.sql文件创建表和导入数据

将图片解压到任意一个盘，然后配置Tomcat，将图片路径引用到本地配置的图片路径下。  
![这里写图片描述][70]  
设置访问路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzazExMDM_size_16_color_FFFFFF_t_70]

## 3.2 实现过程 ##

### 3.2.1 商品首页实现 ###

![这里写图片描述][70 1]

![这里写图片描述][70 2]  
其他部分实现效果  
![这里写图片描述][70 3]  
![这里写图片描述][70 4]

### 3.2.2 二手商城实现 ###

![这里写图片描述][70 5]  
商城商品展示  
![这里写图片描述][70 6]

![这里写图片描述][70 7]  
![这里写图片描述][70 8]

### 3.2.3 商品详情实现 ###

![这里写图片描述][70 9]  
留言  
![这里写图片描述][70 10]

### 3.2.4 站内搜索引擎实现 ###

![这里写图片描述][70 11]  
搜索结果  
![这里写图片描述][70 12]

### 3.2.5 发布商品实现 ###

![这里写图片描述][70 13]  
![这里写图片描述][70 14]

![这里写图片描述][70 15]

### 3.2.6 发布求购信息实现 ###

![这里写图片描述][70 16]

### 3.2.7 个人信息页面实现 ###

![这里写图片描述][70 17]  
![这里写图片描述][70 18]

### 3.2.8 我发布的商品实现 ###

![这里写图片描述][70 19]  
点击修改  
![这里写图片描述][70 20]

### 3.2.9我发布的求购信息实现 ###

![这里写图片描述][70 21]  
![这里写图片描述][70 22]

### 3.2.10购物车实现 ###

![这里写图片描述][70 23]  
点击添加数量和减少  
![这里写图片描述][70 24]

### 3.2.11登录注册实现 ###

![这里写图片描述][70 25]  
![这里写图片描述][70 26]  
![这里写图片描述][70 27]

# 一、设计概要 #

本次设计的是一个校园二手交易平台（C2C），C2C指个人与个人之间的电子商务，买家可以查看所有卖家发布的商品，并且根据分类进行商品过滤，也可以根据站内搜索引擎进行商品的查询，并且与卖家联系，达成交易的意向，也可以发布求购的信息，让卖家查看之后，与之联系，进行交易。而此次主要是针对校园用户所设计的网站，对于数据的分类应该更多的考虑校园用户的需求，例如二手书籍、二手数码等的分类应该更加细致。本次设计的主要难度在于数据的详细分类，对于数据的过滤必须要严谨，应当考虑敏感字体和敏感图片的过滤。

可能遇到的问题有，在数据交互过程中，出现由于属性名的差距导致的数据交互失败。由于Css属性设置的问题，导致界面不完整等等。设计的算法都是自己编写的，可能存在不是最优算法的情况。

# 二、设计正文 #

## 1 需求分析 ##

建立一个用户可以自由交易的平台，通过ajax实现局部刷新，实现网站更具人性化，具有更良好的互动。以下是总体需求

### 1.1 通过手机号码注册账号并且登陆 ###

每个手机号码只可以注册一个账号，并且通过账号完善个人信息和浏览商品，发布商品等，注册时需要通过手机号码获取验证码进行验证才能注册。

### 1.2 实现二手商城 ###

商城主要显示总的商品信息，并且可以通过侧边栏点击进行信息过滤。商品点击之后可以查看详细信息。

### 1.3 站内搜索引擎 ###

实现本站内特有的搜索引擎，可以输入字段，模糊查询合适的商品并且显示出来。

### 1.4 求购信息发布 ###

根据需求输入相应的信息，发布求购商品。

### 1.5 求购商城 ###

卖东西的用户，也可以通过求购商城查看是否有用户对自己拥有的二手物品有需求，查看详细的需求，有的话可以跟买家联系进行交易。

### 1.6 货物出售信息发布 ###

卖家可以发布二手商品的信息，对商品进行描述，并且添加图片增加可信度，也方便买家查看相应的信息。

### 1.7 购物车 ###

将想要的物品添加到购物车，可以修改数量，选择是否要支付，移除商品。选择收货地址，并且进行结算。

### 1.8 个人信息 ###

用户发表求购信息和发布商品时需要先进行信息的完善，用户可以查看自己发布的商品，对发布的商品进行修改或删除，查看已发布求购信息，对求购的商品进行修改或删除。

## 2 概要设计 ##

系统的整体结构流程图如下

![这里写图片描述][70 28]

### 2.1 系统模块 ###

本系统的可以分为以下几个模块。

#### 2.1.1 商品首页 ####

负责显示热门的商品信息，以及显示本网站的网站信息，导航栏负责跳转到各个页面，没有登录显示按钮可以让用户进行登陆和注册。已登录的用户显示用户名，并且可以发布商品信息，查看个人信息等。进入首页的时候，通过Ajax获取数据库中存在的热门商品数据集合，并且刷新页面的内容，点击商品之后跳转到商品详细信息模块。

#### 2.1.2 二手商城模块 ####

负责显示所有的二手商品，提供类别的侧边栏给用户点击之后显示对应的商品信息。类别侧边栏的实现后，需要为每一个类别的元素都添加一个id，通过id来获取数据库中的数据，用Ajax获取数据并且刷新页面的信息。采用分页技术，防止数据过多的时候，显示在同一个页面，给用户带来不好的体验，分页支持点击下一页上一页或者直接点击指定页面，跳转到指定的页面。商品点击之后就要跳转到商品详情。

#### 2.1.3 商品详情模块 ####

负责显示指定的商品详细信息，包括图片、名字、价格、数量等，当一个商品被点击之后，通过返回的id查询到这个数据集合，跳转到商品详细信息的页面，商品发布者可以在下方查看留言，并且与有意者打成交易意向。将对应的信息显示出来，并且提供加入到购物车的功能。商品详细信息下方显示其他用户的留言，并且已经登录的用户可以对这件商品进行评论，商品发布者可以在下方查看留言，并且与有意者打成交易意向。商品发布者可以在下方查看留言，并且与有意者打成交易意向。

#### 2.1.4 站内搜索引擎 ####

每一个页面顶部都存在一个搜索输入框，用户通过输入模糊的商品信息，后台数据库通过查询过滤相关的商品信息，并且显示出来给用户查看，显示出来的商品点击之后可以显示商品的详细信息。

#### 2.1.5 发布商品 ####

用户输入指定的信息，以及选择商品的图片，之后将这些信息结合当前登陆的用户，通过Ajax发表到后台，并且通过框架存储数据到数据库指定表。

#### 2.1.6 发布求购信息 ####

用户输入指定的信息，以及选择商品的图片，之后将这些信息结合当前登陆的用户，通过Ajax发表到后台，并且通过框架存储数据到数据库指定的求购信息表。

#### 2.1.7 个人信息模块 ####

显示个人信息，例如用户名、真实姓名、宿舍号、学号等，显示之后还需要支持对于数据进行修改，修改之后，要同步修改页面的信息，这需要用到Ajax进行数据的提交，并且进行页面的局部刷新。

#### 2.1.8 我发布的商品模块 ####

显示个人发表的商品信息，支持点击之后对数据进行修改，例如修改商品名字，修改商品的单价和数量等，修改之后将新的数据提交到数据库，数据库执行相应的修改操作，也可以直接下架某件商品，点击删除按钮之后，直接在后台数据库删除这一件商品，并且刷新当前页面上显示的个人发布的商品。给用户带来更好的体验效果。

#### 2.1.9 我发布的求购信息模块 ####

显示个人发表的求购商品信息，支持点击之后对数据进行修改，例如修改商品名字，修改商品的单价和数量等，修改之后将新的数据提交到数据库，数据库执行相应的修改操作，也可以直接下架某件商品，点击删除按钮之后，直接在后台数据库删除这一件商品，并且刷新当前页面上显示的个人求购的商品。

#### 2.1.10 购物车模块 ####

显示用户加入购物车的商品，计算总的价格，提供全选和取消全选的按钮，从后台获取商品的单价，判断当前剩余的数量，当用户点击数量添加或者减少之后，对于总价要实时刷新，采用jQuery对数据进行修改，当用户取消选中其中的某一个商品，要相应的减少价格并且刷新，提供选择收货地址，对收获地址进行管理，选好收货地址之后，结算购物车，弹出支付页面，让用户选择付款方式，并且提交。

#### 2.1.11 登录注册模块 ####

用户通过手机号码和密码进行登录，登录之后显示首页。当用户没有账号的时候，提示用户进行注册，从登录界面切换到注册界面，注册需要通过手机号码获取验证码，后台通过页面传递的手机号码，随机生成4位数的验证码并且缓存，之后通过发送139邮箱的方式发送到指定的手机，手机收取到验证码之后输入验证码提交，判断是否正确，正确则注册成功，失败则注册失败。用户注册完之后直接跳转到首页。

## 2.2 数据结构设计 ##

首页需要的数据是热门商品的信息，商品信息需要建立一个Bean对象，存储内容是商品的id、商品名称、商品单价、商品类别、商品数量、商品详细信息、商品成色、商品附带的图片地址、热门程度、发表用户的id、留言的集合，当用户发表之后，保存数据到Bean对象中，并将它存储到数据库。首页请求数据之后，根据热门度返回多个数据，将数据存储到list集合中，并且将它转换为JSON格式数据，返回到页面，页面解析数据并且显示。

商场则负责显示所有的商品数据，实现侧边栏点击指定的类别之后，显示对应类别的数据，需要的是类别的id，因此类别Bean对象的数据是类别id、类别名称，点击之后，通过类别id获取到商品详情集合，并且将它转为JSON格式的数据，返回到前端页面，显示数据。

点击商品之后，需要显示商品详细信息，通过商品的id返回指定商品的Bean对象，转化为JSON格式的数据，返回到前端页面显示，需要显示商品的留言信息，因此需要留言的Bean对象，包括数据留言id、留言的商品id、留言内容、留言时间，结合商品的详情返回JSON格式数据，前端解析之后显示。

求购商城，负责显示所有的求购商品，需要求购商品的Bean，内容包括求购商品id、求购商品名称、求购商品数量、求购商品单价、求购商品详细信息、求购商品留言集合。页面显示时从后台返回对象集合转变的JSON数据，前端解析数据并且显示出来。

登陆界面需要验证用户信息，用户信息包括内容用户id、用户名、用户的手机号码、用户密码、用户真实姓名、用户地址、用户email、用户性别、用户学号。验证的时候只需要判断手机号码和密码是否符合，符合则验证通过，返回验证结果，用JSON存储数据。失败则返回失败信息。

主要用到的数据结构是ArrayList负责组合各种信息，并且转换为JSON格式数据返回。数据需要排序的时候，用到的是快速排序，负责排列热门商品等的信息，并且返回数据到前端页面进行显示。

# 3 详细设计 #

## 3.1 数据字典 ##

用户信息表

<table> 
 <thead> 
  <tr> 
   <th align="center">字段名</th> 
   <th align="center">字段类型</th> 
   <th align="center">是否可为空</th> 
   <th align="center">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">Id</td> 
   <td align="center">Int(11)</td> 
   <td align="center">否</td> 
   <td align="center">主键</td> 
  </tr> 
  <tr> 
   <td align="center">Modify</td> 
   <td align="center">Datetime</td> 
   <td align="center">是</td> 
   <td align="center">修改时间</td> 
  </tr> 
  <tr> 
   <td align="center">Username</td> 
   <td align="center">Varchar(50)</td> 
   <td align="center">否</td> 
   <td align="center">用户昵称</td> 
  </tr> 
  <tr> 
   <td align="center">Phone</td> 
   <td align="center">Char(11)</td> 
   <td align="center">否</td> 
   <td align="center">用户手机号码</td> 
  </tr> 
  <tr> 
   <td align="center">realName</td> 
   <td align="center">Varchar(20)</td> 
   <td align="center">是</td> 
   <td align="center">用户真实姓名</td> 
  </tr> 
  <tr> 
   <td align="center">Clazz</td> 
   <td align="center">Varchar(20)</td> 
   <td align="center">是</td> 
   <td align="center">用户所在班级</td> 
  </tr> 
  <tr> 
   <td align="center">Sno</td> 
   <td align="center">Char(12)</td> 
   <td align="center">是</td> 
   <td align="center">用户学号</td> 
  </tr> 
  <tr> 
   <td align="center">Dormitory</td> 
   <td align="center">Varchar(20)</td> 
   <td align="center">是</td> 
   <td align="center">宿舍号</td> 
  </tr> 
  <tr> 
   <td align="center">Gender</td> 
   <td align="center">Char（2）</td> 
   <td align="center">是</td> 
   <td align="center">性别</td> 
  </tr> 
  <tr> 
   <td align="center">Createtime</td> 
   <td align="center">Datetime</td> 
   <td align="center">是</td> 
   <td align="center">创建时间</td> 
  </tr> 
  <tr> 
   <td align="center">Avatar</td> 
   <td align="center">Varchar(200)</td> 
   <td align="center">是</td> 
   <td align="center">头像</td> 
  </tr> 
 </tbody> 
</table>

用户密码表

商品表

<table> 
 <thead> 
  <tr> 
   <th align="center">字段名</th> 
   <th align="center">字段类型</th> 
   <th align="center">是否可为空</th> 
   <th align="center">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">Id</td> 
   <td align="center">Int(11)</td> 
   <td align="center">否</td> 
   <td align="center">主键</td> 
  </tr> 
  <tr> 
   <td align="center">Modify</td> 
   <td align="center">Datetime</td> 
   <td align="center">是</td> 
   <td align="center">修改时间</td> 
  </tr> 
  <tr> 
   <td align="center">Name</td> 
   <td align="center">Varchar(50)</td> 
   <td align="center">否</td> 
   <td align="center">商品名称</td> 
  </tr> 
  <tr> 
   <td align="center">Level</td> 
   <td align="center">Int</td> 
   <td align="center">否</td> 
   <td align="center">商品成色</td> 
  </tr> 
  <tr> 
   <td align="center">Remark</td> 
   <td align="center">Varchar(255)</td> 
   <td align="center">是</td> 
   <td align="center">商品详细信息</td> 
  </tr> 
  <tr> 
   <td align="center">Price</td> 
   <td align="center">Decimal(0.00)</td> 
   <td align="center">否</td> 
   <td align="center">商品价格</td> 
  </tr> 
  <tr> 
   <td align="center">Sort</td> 
   <td align="center">Int</td> 
   <td align="center">否</td> 
   <td align="center">商品类别</td> 
  </tr> 
  <tr> 
   <td align="center">Count</td> 
   <td align="center">Int</td> 
   <td align="center">否</td> 
   <td align="center">商品数量</td> 
  </tr> 
  <tr> 
   <td align="center">Display</td> 
   <td align="center">Int</td> 
   <td align="center">否</td> 
   <td align="center">商品是否被下架</td> 
  </tr> 
  <tr> 
   <td align="center">Transaction</td> 
   <td align="center">Int</td> 
   <td align="center">否</td> 
   <td align="center">交易方式</td> 
  </tr> 
  <tr> 
   <td align="center">Sales</td> 
   <td align="center">Int</td> 
   <td align="center">否</td> 
   <td align="center">商品销量</td> 
  </tr> 
  <tr> 
   <td align="center">Uid</td> 
   <td align="center">Int</td> 
   <td align="center">否</td> 
   <td align="center">发表的用户id</td> 
  </tr> 
  <tr> 
   <td align="center">Image</td> 
   <td align="center">Varchar(255)</td> 
   <td align="center">否</td> 
   <td align="center">商品的图片地址</td> 
  </tr> 
 </tbody> 
</table>

商品留言

我的收藏

求购商品

<table> 
 <thead> 
  <tr> 
   <th align="center">字段名</th> 
   <th align="center">字段类型</th> 
   <th align="center">是否可为空</th> 
   <th align="center">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">Id</td> 
   <td align="center">Int(11)</td> 
   <td align="center">否</td> 
   <td align="center">主键</td> 
  </tr> 
  <tr> 
   <td align="center">Modify</td> 
   <td align="center">Datetime</td> 
   <td align="center">是</td> 
   <td align="center">修改时间</td> 
  </tr> 
  <tr> 
   <td align="center">Name</td> 
   <td align="center">Varchar(50)</td> 
   <td align="center">否</td> 
   <td align="center">求购商品名称</td> 
  </tr> 
  <tr> 
   <td align="center">Remark</td> 
   <td align="center">Varchar(255)</td> 
   <td align="center">是</td> 
   <td align="center">求购商品详情</td> 
  </tr> 
  <tr> 
   <td align="center">Price</td> 
   <td align="center">Decimal(0.00)</td> 
   <td align="center">否</td> 
   <td align="center">求购商品价格</td> 
  </tr> 
  <tr> 
   <td align="center">Sort</td> 
   <td align="center">Int</td> 
   <td align="center">否</td> 
   <td align="center">求购商品类别</td> 
  </tr> 
  <tr> 
   <td align="center">Count</td> 
   <td align="center">Int</td> 
   <td align="center">否</td> 
   <td align="center">求购商品数量</td> 
  </tr> 
  <tr> 
   <td align="center">Display</td> 
   <td align="center">Int</td> 
   <td align="center">否</td> 
   <td align="center">信息是否被删除</td> 
  </tr> 
  <tr> 
   <td align="center">Transaction</td> 
   <td align="center">Int</td> 
   <td align="center">否</td> 
   <td align="center">交易方式</td> 
  </tr> 
  <tr> 
   <td align="center">Uid</td> 
   <td align="center">Int</td> 
   <td align="center">否</td> 
   <td align="center">发表的用户id</td> 
  </tr> 
  <tr> 
   <td align="center">Image</td> 
   <td align="center">Varchar(255)</td> 
   <td align="center">否</td> 
   <td align="center">商品的图片地址</td> 
  </tr> 
 </tbody> 
</table>

求购商品留言

我发布的商品

我求购的商品

已购买的商品

购物车

## 3.2 实现过程 ##

### 3.2.1 商品首页实现 ###

首页的前端设计大体如下

顶部实现导航栏，导航栏包括网站logo支持点击之后返回到首页、输入框和按钮负责站内搜索引擎的实现、以及一个span包裹的数据，当有用户登陆时将它替换为用户名，没有用户登录时，则将它设置为登录注册按钮，方便用户进行登录和注册。用户登陆之后，显示出来的用户名可以通过绑定鼠标进入事件，弹出选择框让用户选择相应的操作，例如显示个人信息、查看发布的商品、查看求购的商品、发布商品、发布求购商品信息。导航栏与其他页面共用。

![这里写图片描述][70 1]  
　　显示热门商品信息，采用轮播图实现，主要是先定义一个顶级的div指定position是绝对位置，将除了当前显示的页面之外的轮播图div都隐藏起来，为当前的div添加一个current类，判断点击的方向，如果是右则先获取到current的下一个div，并且将它准备在右侧等候进入，当前的div移出之后，就将下一个进入，并且删除原来的current类，将它添加给新的div。在此过程中控制动画，就可以实现一个精美的轮播图。  
![这里写图片描述][70 2]  
　　其他部分实现效果  
![这里写图片描述][70 3]  
![这里写图片描述][70 4]

### 3.2.2 二手商城实现 ###

二手商城前端实现

主要是设计侧边栏比较有难度，首先获取后台返回的三级类别，并且将顶级类别显示在侧边栏中，当鼠标移动上去的时候，显示其余两级目录，显示次级目录作为标题，而第三级的目录则是可点击的按钮，点击之后显示相应类别的商品信息。  
![这里写图片描述][70 5]  
商城商品展示  
![这里写图片描述][70 6]

其次是底部分页按钮的实现，左右切换需要通过jQuery来控制，下一页则判断是否已经到达当前显示的页数倒数第二个，如果是就删除第一个页数，并且添加下一页的页数（前提是还有页数可以继续），如果不是倒数第二个，就将当前元素的current类名删除并将它赋给下一个元素。  
![这里写图片描述][70 7]  
![这里写图片描述][70 8]

### 3.2.3 商品详情实现 ###

显示商品的详细信息，并且添加可以留言的模块，用户发表留言之后，会在下方的留言板通过ajax进行实时的刷新。  
![这里写图片描述][70 9]  
　　留言  
![这里写图片描述][70 10]

### 3.2.4 站内搜索引擎实现 ###

每一个页面顶部都存在一个搜索输入框，用户通过输入模糊的商品信息，后台数据库通过查询过滤相关的商品信息，并且显示出来给用户查看，显示出来的商品点击之后可以显示商品的详细信息。  
![这里写图片描述][70 11]  
　　搜索结果  
![这里写图片描述][70 12]

### 3.2.5 发布商品实现 ###

用户输入指定的信息，以及选择商品的图片，之后将这些信息结合当前登陆的用户，通过Ajax发表到后台，并且通过框架存储数据到数据库指定表。

三级联动的实现，用Ajax获取到三级的类别JSON数据，之后解析JSON数据，将第一级的添加到第一个下拉框，第二级的添加到第二个下拉框，第三级的添加到第三个下拉框，当第一个或者是第二个发生改变的时候，通过获取父容器的子集合修改后两级或者一级的下拉框内容，用jQuery的html替换即可。  
![这里写图片描述][70 13]  
![这里写图片描述][70 14]  
　点击图片后显示缩略图，需要先采用一个file的input，获取到file的文件集合，并且获取它的网页缓存地址，获取后将它设置到img的src中，可以添加一个渐变的动画效果，给用户带来更好的视觉体验。  
![这里写图片描述][70 15]

### 3.2.6 发布求购信息实现 ###

用户输入指定的信息，以及选择商品的图片，之后将这些信息结合当前登陆的用户，通过Ajax发表到后台，并且通过框架存储数据到数据库指定的求购信息表。三级联动采用前一个的即可。  
![这里写图片描述][70 16]

### 3.2.7 个人信息页面实现 ###

所有信息采用jQuery的EasyUI中的accordion显示，标题显示信息，而底部内容则显示修改的组件，之后Ajax修改具体信息后需要将对应的新的内容，采用jQuery显示到标题中。  
![这里写图片描述][70 17]  
![这里写图片描述][70 18]

### 3.2.8 我发布的商品实现 ###

显示个人发表的商品信息，支持点击之后对数据进行修改，例如修改商品名字，修改商品的单价和数量等，修改之后将新的数据提交到数据库，数据库执行相应的修改操作，也可以直接下架某件商品，点击删除按钮之后，直接在后台数据库删除这一件商品，并且刷新当前页面上显示的个人发布的商品。给用户带来更好的体验效果。  
![这里写图片描述][70 19]  
　　点击修改  
![这里写图片描述][70 20]

### 3.2.9我发布的求购信息实现 ###

显示个人发表的求购商品信息，支持点击之后对数据进行修改，例如修改商品名字，修改商品的单价和数量等，修改之后将新的数据提交到数据库，数据库执行相应的修改操作，也可以直接下架某件商品，点击删除按钮之后，直接在后台数据库删除这一件商品，并且刷新当前页面上显示的个人求购的商品。  
![这里写图片描述][70 21]  
![这里写图片描述][70 22]

### 3.2.10购物车实现 ###

### 3.2.11登录注册实现 ###

登录界面需要4个页面，第一个是登录界面，显示手机号码和密码的组件，并且需要底部添加注册按钮，以及忘记密码。第二个是注册界面，注册界面首先提供用户输入手机号码以及验证码，获取验证码的按钮，获取之后跳转到下一步，也就是输入密码界面。输入密码界面需要两次确认密码，输入确认之后就是跳转到首页。最后一个界面是忘记密码，同样通过输入手机号码获取验证码即可。之后将这四个界面通过CSS3的transform属性，将四个界面组合成一个立方体，当用户点击切换到各自界面的按钮时，就采用transform的rotateY，将切换的效果实现成立体翻转的效果。  
![这里写图片描述][70 25]  
![这里写图片描述][70 26]  
![这里写图片描述][70 27]

##### 后台实现的过程 #####

1. 总述：本次后台使用的编程语言为Java，使用的框架是Spring+SpringMVC+Mybatis，前端网页渲染的语言不使用JSP，而我选择使用的是thymeleaf框架，

原因如下：

a. thymeleaf可以直接渲染出HTML5和CSS3的效果。

b.前端写的网页合并到后台处理的时候不需要转换成jsp页面，方便快捷。

c. thymeleaf可以很方便的解析后台传输到前端的值。

d. thymeleaf，我个人认为是个比较好的模板，性能也比一般的，比如freemaker的要高，而且把将美工和程序员能够结合起来，美工能够在浏览器中查看静态效果，程序员可以在应用服务器查看带数据的效果。

e. thymeleaf是一个支持html原型的自然引擎，它在html标签增加额外的属性来达到模板+数据的展示方式，由于浏览器解释html时，忽略未定义的标签属性，因此thymeleaf的模板可以静态运行。

2. 后台结构总图  
![这里写图片描述][70 29]

java:存放Java代码  
　　bean：用于序列化到前端，然后解析的实体类。  
　　controller：spring和springMVC的控制器，用于处理请求的链接  
　　dao：，和数据库进行交互  
　　pojo：普通的Java实体类  
　　service：定义接口，用于连接controller和dao  
　　token：生成唯一标识，用于防止用户重复提交。  
　　tool：工具类，例如处理文件，文本敏感词过滤，图片色情鉴别等等。  
　　resources：存放资源文件，例如Mybatis生成的xml文件，spring，springMVC，mybatis配置文件等等  
　　css：网站样式  
　　img：网站部分图片  
　　js：JavaScript文件  
　　templates：网站html文件

3.后台实现了一个只能单用户登录的功能：如果有两个用户使用同一个账号分别登录，那么后一个登录的用户会踢掉第一个用户登录的账号，也就是说先登录的用户会被强制退出。实现细节：主要使用的是websockt和spring websockt。首先前端判断用户有没有登录，如果有登录的话，就将用户的手机号码，当前时间发送到后台，后台接收到信息，解析信息，将信息存储到Map中，前台循环提交这些信息，并判断Map中手机号码对应的时间是否相等，如果不相等，证明有其他用户登录了该账号，后台发送下线信息到前端，前端收到信息后，触发退出当前账号事件。

4.常规数据库增删查改：考虑到密码是重要的信息，所以当操作密码的时候，都是先使用MD5对其进行加密后处理。例如修改密码，注册用户等等。各个数据表之间的关联都是通过逻辑处理进行数据联系的。

5.防止用户重复提交：在每个界面，都会由后台生成一个token，然后前端页面存储该token，如果用户进行提交按钮等事件时，就会连这个token一起发送到后台进行处理，后台若获取不到token或者token不相匹配，那么就判定该用户重复提交这个事件，后台直接返回原本页面。

6.敏感词过滤：管理员将敏感词编入到数据库中，用户发布商品时附带的商品名称，商品备注等等，都会被过滤，将其中的敏感词替代成\*\*。然后返回对应的数值。用户在填写商品名称，详情的时候，还会ajax自动和后台进行验证判断，并实时提醒用户有没有输入敏感词。

7.图片色情鉴别：使用的是百度的百度开发者平台中的色情图片识别功能。通过提交一张图片到百度的这个功能中，该项目功能就会返回一个数字，姑且称该值为色情值，如果该色情值超过一个给定的数值，那么就可以判定该图片为色情图片，如果用户上传的是色情图片，那么就无法插入，修改，后台会直接返回一个错误值给前端，提示使用了非法的图片。

## 4.问题分析 ##

4.1 在实现只能单用户登录的时候，由于是第一次编写，以前没有经验，刚开始的想法是设计2个Map（m1,m2），用于存储前一次登录（m1）和再次登录（m2）的手机号码和对应的时间。首先，当用户第一次登录的时候，m1和m2必定都为空，m2先通过手机号码存储当前的时间，然后前端通过websockt发送定时信息过来请求判断，在后台处理前端发送过来的信息的时，先判断m1是否存在m2中该的该手机，如果不存在，则证明为第一次登录，那么m1存储m2中对应手机的对应时间。如果存在，那么将m1中时间和m2中的时间进行比较，若比较结果一致，是单用户登录；若不一致，该手机为前一次登录，强迫下线。当用户再次登录的时候，m2中存储手机对应的当前的时间，那么前一次登录的时候m1中存储的手机对应的时间必然小于再次登录中m2中存储的时间，此时，前一次登录强迫下线，m1中的时间刷新为m2中对应的时间。但是这个思路出现了一个严重的问题，在测试的时候，首次登录后，第二次登录确实会踢掉第一次登录，但是第三次登录的时候，所有的用户都平安无事，不会互相排挤，此时出现的问题应该是线程不安全导致的结果。m1，m2这2个map都可能会出现这种情况。

解决方法：设计一个Map（m），用于存储手机号码和其对应的时间。首先，用户登录后，将当前的时间，手机号码通过websockt发送到后台，后台进行判断处理，如果发送过来的时间和m中存储的时间进行比较，若一致，证明没有其他用户登录，若不一致，证明其他用户登录过，那么当前这次用户就会被迫下线

4.2 设计的工具类中，因为存在很多个类和包，如果没有使用工厂模式进行设计的时候，那么在启动项目的时候，多用户登录时，就会导致线程不安全或者线程堵塞，并且将类中的所有方法声明为static时，会占用了许多的内存。

解决方法：使用静态工厂模式-静态内部类。将所有的工具类集中到一个总类中，然后为给总类设计一个静态内部类，其他将要调用的方法设计为public非静态方法，如果调用的时候用工厂调用就可以了。

4.3 当使用多个参数通过mybatis获取数据库数据时，出现了参数未定义的情况，这是因为多个参数的时候，要将这些参数封装为一个Map。

解决方法：将多个参数封装为一个Map，然后将该Map作为参数传递给mybatis的处理方法。

4.4 发送手机验证码出现的错误：一开始像使用邮箱验证用户的，但是在通过邮箱给用法发送信息的时候，这个时候就有多个邮箱作发送者供选择-QQ,163,127,sina等等。原先使用的是163邮箱进行发送信息，但是由于发送的内容过于少，被系统认定为垃圾邮件不给发送或者接收。其他邮箱也类似。后来感觉使用邮箱发送验证码已经被淘汰了，现在流行手机验证了，所以改为发送手机验证码。但是手机发送验证码的话，不想使用网上别人提供的服务，打算自己写一个，关键是怎么将验证码发送到手机上。

解决方法：将验证码发送到139邮箱上就可以了，一般的手机用户都会默认绑定139邮箱的，如果139邮箱收到信息，那么就会通过发送短信的形式提示到对应的手机上，这样就可以实现手机验证码的发送了。

4.5 前端使用Ajax局部刷新时，有可能会导致新显示的内容无法绑定点击事件，最终导致在点击相应的按钮（例如加入购物车按钮）时，页面没有反应。

解决方法：在Ajax的for循环显示结果内容后，为按钮等绑定相应的事件。这样就可以解决该问题。

## 6.用户使用说明 ##

### 6.1 首页 ###

首先访问本站网址，进入首页，可以浏览首页的商品信息，首页轮播图可以左右切换查看商品信息，如果没有主动切换，那么每3.5s之后会自动往右切换一张，往下滑动显示的是其他的一些热门商品缩略信息，点击商品名字之后可以查看该商品的详细信息和留言。再下方是一些其他信息，可以忽略。

### 6.2 普通游客的限制 ###

普通游客可以随意访问首页，可以通过导航栏访问商城，求购商城等。但是如要要发布求购、发布商品则需要先登录。

### 6.3 没有账号？ ###

如果用户还没有账号，那么点击右上角的注册按钮，之后会跳转到注册界面，用户需要输入手机号，再通过它获取验证码，注意输入的手机号必须要格式正确并且有效，获取验证码之后，便点击下一步，此时到达的界面是确认密码界面，重复输入密码，两次输入的密码必须一致。确认完毕之后就会进入首页。如果用户忘记了自己注册过的账号密码，那么点击登录界面的忘记密码选项，输入注册时使用的手机号码，通过此手机号码获取验证码，输入验证码之后，点击下一步开始重置密码，重置完毕之后就会重新进入到首页。

### 6.4 商城 ###

用户想要查看其他用户发布的商品，需要通过点击导航栏处的商城进入到商城页面，在此可以浏览所有的商品，每页显示12个，底部的分页按钮，可以点击之后切换到用户想找的页面。而用户如果需要过滤信息，找到自己想要的类别，左侧悬浮的悬浮框，鼠标移动到指定的类别中，查看详细的类别，点击自己想要找的商品类别，网站便会过滤出指定的商品呈现给用户。

商城显示的商品信息只是一部分，通过点击商品名可以跳转到商品详细信息页面，用户可以在此查看商品的所有信息，可以将它添加到购物车，或者查看下方其他用户的留言，也可以针对自己的意见，对商品做出评价。

### 6.5 模糊查询 ###

如果想要模糊查询商品，最顶部有一个输入框，输入商品的信息，点击搜索按钮，系统会自动过滤合适的商品呈现给用户。

### 6.6 求购商城 ###

如果用户有商品想要出售，可以进入求购商城，浏览其他用户的求购信息，通过点击顶部的导航栏 求购商城 进入查看所有的求购信息，同样有分页和侧边栏的功能。

### 6.7 发布商品信息 ###

如果已经登录过，那么右上角显示的是用户名，将鼠标移动到上面，会弹出一个下拉框，点击发布商品信息，按照提示输入各自的信息，之后确认信息无误之后点击发布按钮即可。

### 6.8 发布求购信息 ###

发布求购信息的过程跟发布商品信息一样，主要是点击下拉框的发布求购信息，在发表即可。

### 6.9 查看我发布的商品 ###

鼠标移动到左上角的用户名，点击显示出来的下拉框的我发布的商品，就可以进入到自己发布过的商品，可以点击每一个商品下方的修改图标可以对商品进行修改，点击删除图片可以下架这个商品。

### 6.10 查看我的求购商品 ###

跟查看我发布的商品基本一致，只是点击的是我的求购商品。

### 6.11 购物车 ###

用户浏览到合适的商品，可以点击添加至购物车的按钮，之后可以将鼠标移动至右上角用户名处，点击显示出来的下拉列表，点击我的购物车，进入到我的购物车查看自己有意向购买的商品。此时可以选择收货地址，或者修改购物车中的一些信息，例如修改数量，或者删除某一件商品。也可以同时选中所有的商品，或者是取消选中所有的商品，之后便可以结算。

# 三、设计总结或结论 #

该C2C校园二手交易平台，界面简洁明了，能给用户一种美的视觉上的享受。并且操作简单易懂，可以大胆但是毫不夸张的说，本系统适用于99%的青少年愉快的使用，对于不是很了解智能科技的人来说，只要看看就基本可以掌握然后熟练的使用该系统了。并且本系统的动画效果做得非常的完美，前端工作人员争取使用最少的代码实现最炫酷的动态效果，例如3D页面转换，动态加入购物车效果，搜索的时候动态自动提示商品名字功能等等，无一不是本系统的亮点。由于前端本着使用最少的代码，实现最炫酷的动态效果，所以其性能可以来说是杠杠的。并且前端所构建的网站为响应式网站，当页面的大小发送变化的时候，页面会随着变化，但是我们的变化不会出现任何的纰漏。在兼容性方面，本网站可以完美的兼容ie8+，Firefox8+，chrome6+等等，虽然目前比较少用户使用这些版本以下的浏览器，但是要做的话，我们就要力争做到完美，前端人员通过查询资料，目前可以最完美的兼容上诉浏览器的以下版本。

前端页面缺点：对于那些不兼容HTML5和CSS3的浏览器，使用的是JavaScript来动态实现这些3D效果的，所以可能展示的效果不如支持HTML5和CSS3的本身效果好。对应浏览器版本真的是过低的用户，无法完美的显示本系统的动态网页。JavaScript实现的那些动画效果可能存在某些目前未知的bug，导致性能上的加载可能会出现瑕疵。

后台实现的优点：后台为了提高性能，使用了一些目前属于比较好的设计模式，例如工厂方法模式，代理模式，备忘录模式，单例模式等等。数据库表的设计思想主要是参考阿里巴巴的开发手册进行设计的，在性能上，建立了适当的索引，增强了查询速度，并且自己设计了许多的算法对后台数据的处理进行优化等等。本来想使用集群和分布式来实现后台，但是考虑到现在如果使用集群，分布式来实现，那么开发周期得提升不止一个档次的时间。

网站加载图片的时候，通常耗费的主要流量和影响速度的原因之一就是这个，所以后台设计了一个比较有意思的算法对图片进行适当的压缩，在前端显示的时候，主要显示的压缩后的图片，当鼠标移到图片上的时候，那么通过ajax显示未被压缩过的图片的放大版。这样，既可以节省带宽，又可以提高用户的体验。

为了防止XSS攻击，可以使用消毒和HttpOnly防止该现象；对于注入攻击，使用的方法为错误回显，盲注，参数绑定；对于CSRF攻击，可以使用表单token，验证码和Rererfer check。

对于密码，手机号码，真实信息等等敏感信息，通常都需要对其进行信息加密，我使用的是单向散列表加密和对称加密，还有就是使用公钥密钥配对核实认证。但是如果使用到密钥的话，那么一般会要求用户下载安全证书到本机。

信息过滤和反垃圾是目前一个比较主流的问题。我使用的主要是文本匹配来过滤敏感词的。当用户发布的信息很长的时候，使用的过滤算法是双数组Trie算法进行敏感词过滤，该算法利用两个稀疏数组存储树结构，base数组存储Trie树的节点，check数组进行状态检查。该算法需要根据业务场景和经验确定数组大小，避免数组过大或者冲突过多。

简而言之，前端效果简洁炫酷，操作简单易懂。

没有实现的功能：秒杀系统，前端反向代理，CDN加速。

## 参考文献 ##

\[1\] 李智慧. 大型网站技术架构 核心原理与案例分析\[M\].北京，工业机械出版社，2013.  
\[2\] 马丁著 韩磊译.代码整洁之道\[Clean Code A Handbook of Agile Software Craftsmanship\] \[M\]. 北京，人们邮电出版社，2010.  
\[3\] Craig Walls 著 张卫滨译. Spring In Action\[M\]. 北京，人民邮电出版社，2016  
\[4\] Thomas H.Cormen , Charles E.Leiserson, Ronald L.Rivest, Clifford Stein著，徐云，王刚等译. 算法导论（原书第3版）\[M\]. 北京，机械工业出版社，2015  
\[5\] Joshua Bloch 著 杨春花 俞黎敏 译. Effective Java(Second Edition) \[M\]. 北京，机械工业出版社，2016  
\[6\] 本·弗莱恩（Ben Frain）著奇舞团 译. 响应式Web设计 HTML5和CSS3实战（第2版）\[M\]. 人民邮电出版社，2017  
\[7\] 达科特（Jon Duckett） 著 刘涛，陈学敏 译. JavaScript&jQuery交互式Web前端开发\[M\]. 清华大学出版社，2015  
\[8\] NicholasC.Zakas著 李松峰曹力 译. JavaScript高级程序设计(第3版)\[M\]. 人民邮电出版社，2016

[https_github.com_wsk1103_Used-Trading-Platform]: https://github.com/wsk1103/Used-Trading-Platform
[https_download.csdn.net_download_wsk1103_13189870]: https://download.csdn.net/download/wsk1103/13189870
[70]: /images/20220525/9e97a3639f36448dba04c87fce52cadc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzazExMDM_size_16_color_FFFFFF_t_70]: /images/20220525/902d402819e34d43aaae1ea2a22aeda2.png
[70 1]: /images/20220525/1299800dc8fa45aeb893f5b5a1ee0bc1.png
[70 2]: /images/20220525/b121db72b6554bffbbd080c691d79531.png
[70 3]: /images/20220525/dd2a72c570cf4c23b2fc4fc61fa0694a.png
[70 4]: /images/20220525/371d77447de54ee1ad4b04eda41b8987.png
[70 5]: /images/20220525/4809a441a94144938a95f155c6de956e.png
[70 6]: /images/20220525/ca535e97304c412dac83ad1fa5eb0527.png
[70 7]: /images/20220525/f2d3f042a67c4435b23500520c809135.png
[70 8]: /images/20220525/a20884e07c5a4405b7ef36286058fb59.png
[70 9]: /images/20220525/f6257db55f524a5f9b71507e3d4283a6.png
[70 10]: /images/20220525/33516c574a2f421da19a3a81583e30d9.png
[70 11]: /images/20220525/1ac20441ec2e4d0eb8f2290d8d40b7a8.png
[70 12]: /images/20220525/5805b16cfe854dbe8d1cd2c0e7fd9cf8.png
[70 13]: /images/20220525/25da921115404d4ab617d041323dd330.png
[70 14]: /images/20220525/0573c82bbe974f60b84e89944f4773cd.png
[70 15]: /images/20220525/3fe4cf9a79cd4d8ca06fdb8fbfabdc51.png
[70 16]: /images/20220525/773d2021b46543d193bff18c77ebf9db.png
[70 17]: /images/20220525/29a5090e72cc4123813ee308f85d8edc.png
[70 18]: /images/20220525/bddf0e17e21d4d0c929ef272fe4a3ab8.png
[70 19]: /images/20220525/b565773ba67d46cab064f8f8ee0c8053.png
[70 20]: /images/20220525/d611ce7f37a24868846c2086752a25c9.png
[70 21]: /images/20220525/6f64baf47e444c1a93454ef95dd6c5fe.png
[70 22]: /images/20220525/391efac112734f51a797e6e9edaa20ac.png
[70 23]: /images/20220525/b608a6490bbf44d7b7e4b82787690fd3.png
[70 24]: /images/20220525/8b7db11b673b47d3915b316fe9803719.png
[70 25]: /images/20220525/068895b832674813845edc75738a4e8c.png
[70 26]: /images/20220525/39d98dc38fcc455f8e172a91ffdc0309.png
[70 27]: /images/20220525/9c7cc1251cec461f95d9f7e1dd73d016.png
[70 28]: /images/20220525/d57502bb95784299bee86ffe4305150c.png
[70 29]: /images/20220525/42eccbe794c945a3b0d0ccf5d2606957.png