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

一、设计概要

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

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

二、设计正文

1 需求分析

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

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

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

1.2 实现二手商城

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

1.3 站内搜索引擎

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

1.4 求购信息发布

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

1.5 求购商城

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

1.6 货物出售信息发布

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

1.7 购物车

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

1.8 个人信息

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

2 概要设计

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

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 数据字典

用户信息表

用户密码表

商品表

商品留言

我的收藏

求购商品

求购商品留言

我发布的商品

我求购的商品

已购买的商品

购物车

3.2 实现过程

3.2.1 商品首页实现

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

首页的前端设计大体如下

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

3.2.2 二手商城实现

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

二手商城前端实现

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

3.2.3 商品详情实现

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

显示商品的详细信息，并且添加可以留言的模块，用户发表留言之后，会在下方的留言板通过ajax进行实时的刷新。

3.2.4 站内搜索引擎实现

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

3.2.5 我发布的商品实现

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

3.2.6购物车实现

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

3.2.7 登录注册实现

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

四、设计总结或结论

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