基于SSM的校園二手交易平臺

★小梁帶你玩手機(jī)★

概 要

本次設(shè)計(jì)的是一個校園二手交易平臺（C2C），C2C指個人與個人之間的電子商務(wù)，買家可以查看所有賣家發(fā)布的商品，并且根據(jù)分類進(jìn)行商品過濾，也可以根據(jù)站內(nèi)搜索引擎進(jìn)行商品的查詢，并且與賣家聯(lián)系，達(dá)成交易的意向，也可以發(fā)布求購的信息，讓賣家查看之后，與之聯(lián)系，進(jìn)行交易。而此次主要是針對校園用戶所設(shè)計(jì)的網(wǎng)站，對于數(shù)據(jù)的分類應(yīng)該更多的考慮校園用戶的需求，例如二手書籍、二手?jǐn)?shù)碼等的分類應(yīng)該更加細(xì)致。本次設(shè)計(jì)的主要難度在于數(shù)據(jù)的詳細(xì)分類，對于數(shù)據(jù)的過濾必須要嚴(yán)謹(jǐn)，應(yīng)當(dāng)考慮敏感字體和敏感圖片的過濾。
可能遇到的問題有，在數(shù)據(jù)交互過程中，出現(xiàn)由于屬性名的差距導(dǎo)致的數(shù)據(jù)交互失敗。由于Css屬性設(shè)置的問題，導(dǎo)致界面不完整等等。設(shè)計(jì)的算法都是自己編寫的，可能存在不是最優(yōu)算法的情況。
1 需求分析

建立一個用戶可以自由交易的平臺，通過ajax實(shí)現(xiàn)局部刷新，實(shí)現(xiàn)網(wǎng)站更具人性化，具有更良好的互動。

• 通過手機(jī)號碼注冊賬號并且登陸：每個手機(jī)號碼只可以注冊一個賬號，并且通過賬號完善個人信息和瀏覽商品，發(fā)布商品等，注冊時(shí)需要通過手機(jī)號碼獲取驗(yàn)證碼進(jìn)行驗(yàn)證才能注冊
  
• 實(shí)現(xiàn)二手商城：商城主要顯示總的商品信息，并且可以通過側(cè)邊欄點(diǎn)擊進(jìn)行信息過濾。商品點(diǎn)擊之后可以查看詳細(xì)信息
  
• 站內(nèi)搜索引擎：實(shí)現(xiàn)本站內(nèi)特有的搜索引擎，可以輸入字段，模糊查詢合適的商品并且顯示出來
  
• 求購信息發(fā)布：根據(jù)需求輸入相應(yīng)的信息，發(fā)布求購商品
  
• 求購商城：賣東西的用戶，也可以通過求購商城查看是否有用戶對自己擁有的二手物品有需求，查看詳細(xì)的需求，有的話可以跟買家聯(lián)系進(jìn)行交易
  
• 貨物出售信息發(fā)布：賣家可以發(fā)布二手商品的信息，對商品進(jìn)行描述，并且添加圖片增加可信度，也方便買家查看相應(yīng)的信息
  
• 購物車：將想要的物品添加到購物車，可以修改數(shù)量，選擇是否要支付，移除商品。選擇收貨地址，并且進(jìn)行結(jié)算
  
• 個人信息:用戶發(fā)表求購信息和發(fā)布商品時(shí)需要先進(jìn)行信息的完善，用戶可以查看自己發(fā)布的商品，對發(fā)布的商品進(jìn)行修改或刪除，查看已發(fā)布求購信息，對求購的商品進(jìn)行修改或刪除。
  

2 概要設(shè)計(jì)

系統(tǒng)的整體結(jié)構(gòu)流程圖如下:

登錄/注冊后可看大圖

2.1 系統(tǒng)模塊

本系統(tǒng)的可以分為以下幾個模塊。
2.1.1 商品首頁

負(fù)責(zé)顯示熱門的商品信息，以及顯示本網(wǎng)站的網(wǎng)站信息，導(dǎo)航欄負(fù)責(zé)跳轉(zhuǎn)到各個頁面，沒有登錄顯示按鈕可以讓用戶進(jìn)行登陸和注冊。已登錄的用戶顯示用戶名，并且可以發(fā)布商品信息，查看個人信息等。進(jìn)入首頁的時(shí)候，通過Ajax獲取數(shù)據(jù)庫中存在的熱門商品數(shù)據(jù)集合，并且刷新頁面的內(nèi)容，點(diǎn)擊商品之后跳轉(zhuǎn)到商品詳細(xì)信息模塊。
2.1.2 二手商城模塊

負(fù)責(zé)顯示所有的二手商品，提供類別的側(cè)邊欄給用戶點(diǎn)擊之后顯示對應(yīng)的商品信息。類別側(cè)邊欄的實(shí)現(xiàn)后，需要為每一個類別的元素都添加一個id，通過id來獲取數(shù)據(jù)庫中的數(shù)據(jù)，用Ajax獲取數(shù)據(jù)并且刷新頁面的信息。采用分頁技術(shù)，防止數(shù)據(jù)過多的時(shí)候，顯示在同一個頁面，給用戶帶來不好的體驗(yàn)，分頁支持點(diǎn)擊下一頁上一頁或者直接點(diǎn)擊指定頁面，跳轉(zhuǎn)到指定的頁面。商品點(diǎn)擊之后就要跳轉(zhuǎn)到商品詳情。
2.1.3 商品詳情模塊

負(fù)責(zé)顯示指定的商品詳細(xì)信息，包括圖片、名字、價(jià)格、數(shù)量等，當(dāng)一個商品被點(diǎn)擊之后，通過返回的id查詢到這個數(shù)據(jù)集合，跳轉(zhuǎn)到商品詳細(xì)信息的頁面，商品發(fā)布者可以在下方查看留言，并且與有意者打成交易意向。將對應(yīng)的信息顯示出來，并且提供加入到購物車的功能。商品詳細(xì)信息下方顯示其他用戶的留言，并且已經(jīng)登錄的用戶可以對這件商品進(jìn)行評論，商品發(fā)布者可以在下方查看留言，并且與有意者打成交易意向。商品發(fā)布者可以在下方查看留言，并且與有意者打成交易意向。
2.1.4 站內(nèi)搜索引擎

每一個頁面頂部都存在一個搜索輸入框，用戶通過輸入模糊的商品信息，后臺數(shù)據(jù)庫通過查詢過濾相關(guān)的商品信息，并且顯示出來給用戶查看，顯示出來的商品點(diǎn)擊之后可以顯示商品的詳細(xì)信息。
2.1.5 發(fā)布商品

用戶輸入指定的信息，以及選擇商品的圖片，之后將這些信息結(jié)合當(dāng)前登陸的用戶，通過Ajax發(fā)表到后臺，并且通過框架存儲數(shù)據(jù)到數(shù)據(jù)庫指定表。
2.1.6 發(fā)布求購信息

用戶輸入指定的信息，以及選擇商品的圖片，之后將這些信息結(jié)合當(dāng)前登陸的用戶，通過Ajax發(fā)表到后臺，并且通過框架存儲數(shù)據(jù)到數(shù)據(jù)庫指定的求購信息表。
2.1.7 個人信息模塊

顯示個人信息，例如用戶名、真實(shí)姓名、宿舍號、學(xué)號等，顯示之后還需要支持對于數(shù)據(jù)進(jìn)行修改，修改之后，要同步修改頁面的信息，這需要用到Ajax進(jìn)行數(shù)據(jù)的提交，并且進(jìn)行頁面的局部刷新。
2.1.8 我發(fā)布的商品模塊

顯示個人發(fā)表的商品信息，支持點(diǎn)擊之后對數(shù)據(jù)進(jìn)行修改，例如修改商品名字，修改商品的單價(jià)和數(shù)量等，修改之后將新的數(shù)據(jù)提交到數(shù)據(jù)庫，數(shù)據(jù)庫執(zhí)行相應(yīng)的修改操作，也可以直接下架某件商品，點(diǎn)擊刪除按鈕之后，直接在后臺數(shù)據(jù)庫刪除這一件商品，并且刷新當(dāng)前頁面上顯示的個人發(fā)布的商品。給用戶帶來更好的體驗(yàn)效果。
2.1.9 我發(fā)布的求購信息模塊

顯示個人發(fā)表的求購商品信息，支持點(diǎn)擊之后對數(shù)據(jù)進(jìn)行修改，例如修改商品名字，修改商品的單價(jià)和數(shù)量等，修改之后將新的數(shù)據(jù)提交到數(shù)據(jù)庫，數(shù)據(jù)庫執(zhí)行相應(yīng)的修改操作，也可以直接下架某件商品，點(diǎn)擊刪除按鈕之后，直接在后臺數(shù)據(jù)庫刪除這一件商品，并且刷新當(dāng)前頁面上顯示的個人求購的商品。
2.1.10 購物車模塊

顯示用戶加入購物車的商品，計(jì)算總的價(jià)格，提供全選和取消全選的按鈕，從后臺獲取商品的單價(jià)，判斷當(dāng)前剩余的數(shù)量，當(dāng)用戶點(diǎn)擊數(shù)量添加或者減少之后，對于總價(jià)要實(shí)時(shí)刷新，采用jQuery對數(shù)據(jù)進(jìn)行修改，當(dāng)用戶取消選中其中的某一個商品，要相應(yīng)的減少價(jià)格并且刷新，提供選擇收貨地址，對收獲地址進(jìn)行管理，選好收貨地址之后，結(jié)算購物車，彈出支付頁面，讓用戶選擇付款方式，并且提交。
2.1.11 登錄注冊模塊

用戶通過手機(jī)號碼和密碼進(jìn)行登錄，登錄之后顯示首頁。當(dāng)用戶沒有賬號的時(shí)候，提示用戶進(jìn)行注冊，從登錄界面切換到注冊界面，注冊需要通過手機(jī)號碼獲取驗(yàn)證碼，后臺通過頁面?zhèn)鬟f的手機(jī)號碼，隨機(jī)生成4位數(shù)的驗(yàn)證碼并且緩存，之后通過發(fā)送139郵箱的方式發(fā)送到指定的手機(jī)，手機(jī)收取到驗(yàn)證碼之后輸入驗(yàn)證碼提交，判斷是否正確，正確則注冊成功，失敗則注冊失敗。用戶注冊完之后直接跳轉(zhuǎn)到首頁。
2.2 數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)

首頁需要的數(shù)據(jù)是熱門商品的信息，商品信息需要建立一個Bean對象，存儲內(nèi)容是商品的id、商品名稱、商品單價(jià)、商品類別、商品數(shù)量、商品詳細(xì)信息、商品成色、商品附帶的圖片地址、熱門程度、發(fā)表用戶的id、留言的集合，當(dāng)用戶發(fā)表之后，保存數(shù)據(jù)到Bean對象中，并將它存儲到數(shù)據(jù)庫。首頁請求數(shù)據(jù)之后，根據(jù)熱門度返回多個數(shù)據(jù)，將數(shù)據(jù)存儲到list集合中，并且將它轉(zhuǎn)換為JSON格式數(shù)據(jù)，返回到頁面，頁面解析數(shù)據(jù)并且顯示。
商場則負(fù)責(zé)顯示所有的商品數(shù)據(jù)，實(shí)現(xiàn)側(cè)邊欄點(diǎn)擊指定的類別之后，顯示對應(yīng)類別的數(shù)據(jù)，需要的是類別的id，因此類別Bean對象的數(shù)據(jù)是類別id、類別名稱，點(diǎn)擊之后，通過類別id獲取到商品詳情集合，并且將它轉(zhuǎn)為JSON格式的數(shù)據(jù)，返回到前端頁面，顯示數(shù)據(jù)。
點(diǎn)擊商品之后，需要顯示商品詳細(xì)信息，通過商品的id返回指定商品的Bean對象，轉(zhuǎn)化為JSON格式的數(shù)據(jù)，返回到前端頁面顯示，需要顯示商品的留言信息，因此需要留言的Bean對象，包括數(shù)據(jù)留言id、留言的商品id、留言內(nèi)容、留言時(shí)間，結(jié)合商品的詳情返回JSON格式數(shù)據(jù)，前端解析之后顯示。
求購商城，負(fù)責(zé)顯示所有的求購商品，需要求購商品的Bean，內(nèi)容包括求購商品id、求購商品名稱、求購商品數(shù)量、求購商品單價(jià)、求購商品詳細(xì)信息、求購商品留言集合。頁面顯示時(shí)從后臺返回對象集合轉(zhuǎn)變的JSON數(shù)據(jù)，前端解析數(shù)據(jù)并且顯示出來。
登陸界面需要驗(yàn)證用戶信息，用戶信息包括內(nèi)容用戶id、用戶名、用戶的手機(jī)號碼、用戶密碼、用戶真實(shí)姓名、用戶地址、用戶email、用戶性別、用戶學(xué)號。驗(yàn)證的時(shí)候只需要判斷手機(jī)號碼和密碼是否符合，符合則驗(yàn)證通過，返回驗(yàn)證結(jié)果，用JSON存儲數(shù)據(jù)。失敗則返回失敗信息。
主要用到的數(shù)據(jù)結(jié)構(gòu)是ArrayList負(fù)責(zé)組合各種信息，并且轉(zhuǎn)換為JSON格式數(shù)據(jù)返回。數(shù)據(jù)需要排序的時(shí)候，用到的是快速排序，負(fù)責(zé)排列熱門商品等的信息，并且返回?cái)?shù)據(jù)到前端頁面進(jìn)行顯示。
3 詳細(xì)設(shè)計(jì)

技術(shù)棧

• Java版本：1.8
  
• 數(shù)據(jù)庫：MySQL
  
• 框架：Spring + Spring MVC + MyBatis
  
• 服務(wù)器：Tomcat
  
• 前端解析框架：Thymeleaf
  
• 開發(fā)工具：Idea 2017
  
• 版本管理工具：Maven
  
• 版本控制工具：GitHub
  

3.1 數(shù)據(jù)字典

用戶信息表

字段名

字段類型

是否可為空

備注

用戶密碼表

字段名

字段類型

是否可為空

備注

商品表

字段名

字段類型

是否可為空

備注

商品留言

字段名

字段類型

是否可為空

備注

我的收藏

字段名

字段類型

是否可為空

備注

求購商品

字段名

字段類型

是否可為空

備注

求購商品留言

字段名

字段類型

是否可為空

備注

我發(fā)布的商品

字段名

字段類型

是否可為空

備注

我求購的商品

字段名

字段類型

是否可為空

備注

已購買的商品

字段名

字段類型

是否可為空

備注

購物車

字段名

字段類型

是否可為空

備注

3.2 實(shí)現(xiàn)過程

3.2.1 商品首頁實(shí)現(xiàn)

負(fù)責(zé)顯示熱門的商品信息，以及顯示本網(wǎng)站的網(wǎng)站信息，導(dǎo)航欄負(fù)責(zé)跳轉(zhuǎn)到各個頁面，沒有登錄顯示按鈕可以讓用戶進(jìn)行登陸和注冊。已登錄的用戶顯示用戶名，并且可以發(fā)布商品信息，查看個人信息等。進(jìn)入首頁的時(shí)候，通過Ajax獲取數(shù)據(jù)庫中存在的熱門商品數(shù)據(jù)集合，并且刷新頁面的內(nèi)容，點(diǎn)擊商品之后跳轉(zhuǎn)到商品詳細(xì)信息模塊。
首頁的前端設(shè)計(jì)大體如下：
頂部實(shí)現(xiàn)導(dǎo)航欄，導(dǎo)航欄包括網(wǎng)站logo支持點(diǎn)擊之后返回到首頁、輸入框和按鈕負(fù)責(zé)站內(nèi)搜索引擎的實(shí)現(xiàn)、以及一個span包裹的數(shù)據(jù)，當(dāng)有用戶登陸時(shí)將它替換為用戶名，沒有用戶登錄時(shí)，則將它設(shè)置為登錄注冊按鈕，方便用戶進(jìn)行登錄和注冊。用戶登陸之后，顯示出來的用戶名可以通過綁定鼠標(biāo)進(jìn)入事件，彈出選擇框讓用戶選擇相應(yīng)的操作，例如顯示個人信息、查看發(fā)布的商品、查看求購的商品、發(fā)布商品、發(fā)布求購商品信息。導(dǎo)航欄與其他頁面共用。

登錄/注冊后可看大圖

顯示熱門商品信息，采用輪播圖實(shí)現(xiàn)，主要是先定義一個頂級的div指定position是絕對位置，將除了當(dāng)前顯示的頁面之外的輪播圖div都隱藏起來，為當(dāng)前的div添加一個current類，判斷點(diǎn)擊的方向，如果是右則先獲取到current的下一個div，并且將它準(zhǔn)備在右側(cè)等候進(jìn)入，當(dāng)前的div移出之后，就將下一個進(jìn)入，并且刪除原來的current類，將它添加給新的div。在此過程中控制動畫，就可以實(shí)現(xiàn)一個精美的輪播圖。

登錄/注冊后可看大圖

其他部分實(shí)現(xiàn)效果：

登錄/注冊后可看大圖

登錄/注冊后可看大圖

3.2.2 二手商城實(shí)現(xiàn)

負(fù)責(zé)顯示所有的二手商品，提供類別的側(cè)邊欄給用戶點(diǎn)擊之后顯示對應(yīng)的商品信息。類別側(cè)邊欄的實(shí)現(xiàn)后，需要為每一個類別的元素都添加一個id，通過id來獲取數(shù)據(jù)庫中的數(shù)據(jù)，用Ajax獲取數(shù)據(jù)并且刷新頁面的信息。采用分頁技術(shù)，防止數(shù)據(jù)過多的時(shí)候，顯示在同一個頁面，給用戶帶來不好的體驗(yàn)，分頁支持點(diǎn)擊下一頁上一頁或者直接點(diǎn)擊指定頁面，跳轉(zhuǎn)到指定的頁面。商品點(diǎn)擊之后就要跳轉(zhuǎn)到商品詳情。
主要是設(shè)計(jì)側(cè)邊欄比較有難度，首先獲取后臺返回的三級類別，并且將頂級類別顯示在側(cè)邊欄中，當(dāng)鼠標(biāo)移動上去的時(shí)候，顯示其余兩級目錄，顯示次級目錄作為標(biāo)題，而第三級的目錄則是可點(diǎn)擊的按鈕，點(diǎn)擊之后顯示相應(yīng)類別的商品信息。

登錄/注冊后可看大圖

商城商品展示

登錄/注冊后可看大圖

其次是底部分頁按鈕的實(shí)現(xiàn)，左右切換需要通過jQuery來控制，下一頁則判斷是否已經(jīng)到達(dá)當(dāng)前顯示的頁數(shù)倒數(shù)第二個，如果是就刪除第一個頁數(shù)，并且添加下一頁的頁數(shù)（前提是還有頁數(shù)可以繼續(xù)），如果不是倒數(shù)第二個，就將當(dāng)前元素的current類名刪除并將它賦給下一個元素。

登錄/注冊后可看大圖

3.2.3 商品詳情實(shí)現(xiàn)

負(fù)責(zé)顯示指定的商品詳細(xì)信息，包括圖片、名字、價(jià)格、數(shù)量等，當(dāng)一個商品被點(diǎn)擊之后，通過返回的id查詢到這個數(shù)據(jù)集合，跳轉(zhuǎn)到商品詳細(xì)信息的頁面，商品發(fā)布者可以在下方查看留言，并且與有意者打成交易意向。將對應(yīng)的信息顯示出來，并且提供加入到購物車的功能。商品詳細(xì)信息下方顯示其他用戶的留言，并且已經(jīng)登錄的用戶可以對這件商品進(jìn)行評論，商品發(fā)布者可以在下方查看留言，并且與有意者打成交易意向。商品發(fā)布者可以在下方查看留言，并且與有意者打成交易意向。
顯示商品的詳細(xì)信息，并且添加可以留言的模塊，用戶發(fā)表留言之后，會在下方的留言板通過ajax進(jìn)行實(shí)時(shí)的刷新。

登錄/注冊后可看大圖

留言

登錄/注冊后可看大圖

3.2.4 站內(nèi)搜索引擎實(shí)現(xiàn)

每一個頁面頂部都存在一個搜索輸入框，用戶通過輸入模糊的商品信息，后臺數(shù)據(jù)庫通過查詢過濾相關(guān)的商品信息，并且顯示出來給用戶查看，顯示出來的商品點(diǎn)擊之后可以顯示商品的詳細(xì)信息。

登錄/注冊后可看大圖

搜索結(jié)果

登錄/注冊后可看大圖

3.2.5 發(fā)布商品實(shí)現(xiàn)

用戶輸入指定的信息，以及選擇商品的圖片，之后將這些信息結(jié)合當(dāng)前登陸的用戶，通過Ajax發(fā)表到后臺，并且通過框架存儲數(shù)據(jù)到數(shù)據(jù)庫指定表。
三級聯(lián)動的實(shí)現(xiàn)，用Ajax獲取到三級的類別JSON數(shù)據(jù)，之后解析JSON數(shù)據(jù)，將第一級的添加到第一個下拉框，第二級的添加到第二個下拉框，第三級的添加到第三個下拉框，當(dāng)?shù)谝粋€或者是第二個發(fā)生改變的時(shí)候，通過獲取父容器的子集合修改后兩級或者一級的下拉框內(nèi)容，用jQuery的html替換即可。

登錄/注冊后可看大圖

登錄/注冊后可看大圖

點(diǎn)擊圖片后顯示縮略圖，需要先采用一個file的input，獲取到file的文件集合，并且獲取它的網(wǎng)頁緩存地址，獲取后將它設(shè)置到img的src中，可以添加一個漸變的動畫效果，給用戶帶來更好的視覺體驗(yàn)。

登錄/注冊后可看大圖

3.2.6 發(fā)布求購信息實(shí)現(xiàn)

用戶輸入指定的信息，以及選擇商品的圖片，之后將這些信息結(jié)合當(dāng)前登陸的用戶，通過Ajax發(fā)表到后臺，并且通過框架存儲數(shù)據(jù)到數(shù)據(jù)庫指定的求購信息表。三級聯(lián)動采用前一個的即可。

登錄/注冊后可看大圖

3.2.7 個人信息頁面實(shí)現(xiàn)

顯示個人信息，例如用戶名、真實(shí)姓名、宿舍號、學(xué)號等，顯示之后還需要支持對于數(shù)據(jù)進(jìn)行修改，修改之后，要同步修改頁面的信息，這需要用到Ajax進(jìn)行數(shù)據(jù)的提交，并且進(jìn)行頁面的局部刷新。
所有信息采用jQuery的EasyUI中的accordion顯示，標(biāo)題顯示信息，而底部內(nèi)容則顯示修改的組件，之后Ajax修改具體信息后需要將對應(yīng)的新的內(nèi)容，采用jQuery顯示到標(biāo)題中。

登錄/注冊后可看大圖

登錄/注冊后可看大圖

3.2.8 我發(fā)布的商品實(shí)現(xiàn)

顯示個人發(fā)表的商品信息，支持點(diǎn)擊之后對數(shù)據(jù)進(jìn)行修改，例如修改商品名字，修改商品的單價(jià)和數(shù)量等，修改之后將新的數(shù)據(jù)提交到數(shù)據(jù)庫，數(shù)據(jù)庫執(zhí)行相應(yīng)的修改操作，也可以直接下架某件商品，點(diǎn)擊刪除按鈕之后，直接在后臺數(shù)據(jù)庫刪除這一件商品，并且刷新當(dāng)前頁面上顯示的個人發(fā)布的商品。給用戶帶來更好的體驗(yàn)效果。

登錄/注冊后可看大圖

點(diǎn)擊修改

登錄/注冊后可看大圖

3.2.9 我發(fā)布的求購信息實(shí)現(xiàn)

顯示個人發(fā)表的求購商品信息，支持點(diǎn)擊之后對數(shù)據(jù)進(jìn)行修改，例如修改商品名字，修改商品的單價(jià)和數(shù)量等，修改之后將新的數(shù)據(jù)提交到數(shù)據(jù)庫，數(shù)據(jù)庫執(zhí)行相應(yīng)的修改操作，也可以直接下架某件商品，點(diǎn)擊刪除按鈕之后，直接在后臺數(shù)據(jù)庫刪除這一件商品，并且刷新當(dāng)前頁面上顯示的個人求購的商品。

登錄/注冊后可看大圖

登錄/注冊后可看大圖

3.2.10 購物車實(shí)現(xiàn)

顯示用戶加入購物車的商品，計(jì)算總的價(jià)格，提供全選和取消全選的按鈕，從后臺獲取商品的單價(jià)，判斷當(dāng)前剩余的數(shù)量，當(dāng)用戶點(diǎn)擊數(shù)量添加或者減少之后，對于總價(jià)要實(shí)時(shí)刷新，采用jQuery對數(shù)據(jù)進(jìn)行修改，當(dāng)用戶取消選中其中的某一個商品，要相應(yīng)的減少價(jià)格并且刷新，提供選擇收貨地址，對收獲地址進(jìn)行管理，選好收貨地址之后，結(jié)算購物車，彈出支付頁面，讓用戶選擇付款方式，并且提交。

登錄/注冊后可看大圖

點(diǎn)擊添加數(shù)量和減少

登錄/注冊后可看大圖

3.2.11 登錄注冊實(shí)現(xiàn)

用戶通過手機(jī)號碼和密碼進(jìn)行登錄，登錄之后顯示首頁。當(dāng)用戶沒有賬號的時(shí)候，提示用戶進(jìn)行注冊，從登錄界面切換到注冊界面，注冊需要通過手機(jī)號碼獲取驗(yàn)證碼，后臺通過頁面?zhèn)鬟f的手機(jī)號碼，隨機(jī)生成4位數(shù)的驗(yàn)證碼并且緩存，之后通過發(fā)送139郵箱的方式發(fā)送到指定的手機(jī)，手機(jī)收取到驗(yàn)證碼之后輸入驗(yàn)證碼提交，判斷是否正確，正確則注冊成功，失敗則注冊失敗。用戶注冊完之后直接跳轉(zhuǎn)到首頁。
登錄界面需要4個頁面，第一個是登錄界面，顯示手機(jī)號碼和密碼的組件，并且需要底部添加注冊按鈕，以及忘記密碼。第二個是注冊界面，注冊界面首先提供用戶輸入手機(jī)號碼以及驗(yàn)證碼，獲取驗(yàn)證碼的按鈕，獲取之后跳轉(zhuǎn)到下一步，也就是輸入密碼界面。輸入密碼界面需要兩次確認(rèn)密碼，輸入確認(rèn)之后就是跳轉(zhuǎn)到首頁。最后一個界面是忘記密碼，同樣通過輸入手機(jī)號碼獲取驗(yàn)證碼即可。之后將這四個界面通過CSS3的transform屬性，將四個界面組合成一個立方體，當(dāng)用戶點(diǎn)擊切換到各自界面的按鈕時(shí)，就采用transform的rotateY，將切換的效果實(shí)現(xiàn)成立體翻轉(zhuǎn)的效果。

登錄/注冊后可看大圖

登錄/注冊后可看大圖

登錄/注冊后可看大圖

后臺實(shí)現(xiàn)的過程
本次后臺使用的編程語言為Java，使用的框架是Spring+SpringMVC+Mybatis，前端網(wǎng)頁渲染的語言不使用JSP，而我選擇使用的是thymeleaf框架，原因如下：

• thymeleaf可以直接渲染出HTML5和CSS3的效果
  
• 前端寫的網(wǎng)頁合并到后臺處理的時(shí)候不需要轉(zhuǎn)換成jsp頁面，方便快捷
  
• thymeleaf可以很方便的解析后臺傳輸?shù)角岸说闹?br />
• thymeleaf，我個人認(rèn)為是個比較好的模板，性能也比一般的，比如freemaker的要高，而且把將美工和程序員能夠結(jié)合起來，美工能夠在瀏覽器中查看靜態(tài)效果，程序員可以在應(yīng)用服務(wù)器查看帶數(shù)據(jù)的效果。
  
• thymeleaf是一個支持html原型的自然引擎，它在html標(biāo)簽增加額外的屬性來達(dá)到模板+數(shù)據(jù)的展示方式，由于瀏覽器解釋html時(shí)，忽略未定義的標(biāo)簽屬性，因此thymeleaf的模板可以靜態(tài)運(yùn)行。
  

后臺結(jié)構(gòu)總圖

登錄/注冊后可看大圖

• java:存放Java代碼
  
• bean：用于序列化到前端，然后解析的實(shí)體類。
  
• controller：spring和springMVC的控制器，用于處理請求的鏈接
  
• dao：和數(shù)據(jù)庫進(jìn)行交互
  
• pojo：普通的Java實(shí)體類
  
• service：定義接口，用于連接controller和dao
  
• token：生成唯一標(biāo)識，用于防止用戶重復(fù)提交。
  
• tool：工具類，例如處理文件，文本敏感詞過濾，圖片色情鑒別等等。
  
• resources：存放資源文件，例如Mybatis生成的xml文件，spring，springMVC，mybatis配置文件等等
  
• css：網(wǎng)站樣式
  
• img：網(wǎng)站部分圖片
  
• js：JavaScript文件
  
• templates：網(wǎng)站html文件
  

后臺實(shí)現(xiàn)了一個只能單用戶登錄的功能
如果有兩個用戶使用同一個賬號分別登錄，那么后一個登錄的用戶會踢掉第一個用戶登錄的賬號，也就是說先登錄的用戶會被強(qiáng)制退出。實(shí)現(xiàn)細(xì)節(jié)：主要使用的是websockt和spring websockt。首先前端判斷用戶有沒有登錄，如果有登錄的話，就將用戶的手機(jī)號碼，當(dāng)前時(shí)間發(fā)送到后臺，后臺接收到信息，解析信息，將信息存儲到Map中，前臺循環(huán)提交這些信息，并判斷Map中手機(jī)號碼對應(yīng)的時(shí)間是否相等，如果不相等，證明有其他用戶登錄了該賬號，后臺發(fā)送下線信息到前端，前端收到信息后，觸發(fā)退出當(dāng)前賬號事件。
常規(guī)數(shù)據(jù)庫增刪查改
考慮到密碼是重要的信息，所以當(dāng)操作密碼的時(shí)候，都是先使用MD5對其進(jìn)行加密后處理。例如修改密碼，注冊用戶等等。各個數(shù)據(jù)表之間的關(guān)聯(lián)都是通過邏輯處理進(jìn)行數(shù)據(jù)聯(lián)系的。
防止用戶重復(fù)提交
在每個界面，都會由后臺生成一個token，然后前端頁面存儲該token，如果用戶進(jìn)行提交按鈕等事件時(shí)，就會連這個token一起發(fā)送到后臺進(jìn)行處理，后臺若獲取不到token或者token不相匹配，那么就判定該用戶重復(fù)提交這個事件，后臺直接返回原本頁面。
敏感詞過濾
管理員將敏感詞編入到數(shù)據(jù)庫中，用戶發(fā)布商品時(shí)附帶的商品名稱，商品備注等等，都會被過濾，將其中的敏感詞替代成。然后返回對應(yīng)的數(shù)值。用戶在填寫商品名稱，詳情的時(shí)候，還會ajax自動和后臺進(jìn)行驗(yàn)證判斷，并實(shí)時(shí)提醒用戶有沒有輸入敏感詞。
圖片色情鑒別
使用的是百度的百度開發(fā)者平臺中的色情圖片識別功能。通過提交一張圖片到百度的這個功能中，該項(xiàng)目功能就會返回一個數(shù)字，姑且稱該值為色情值，如果該色情值超過一個給定的數(shù)值，那么就可以判定該圖片為色情圖片，如果用戶上傳的是色情圖片，那么就無法插入，修改，后臺會直接返回一個錯誤值給前端，提示使用了非法的圖片。
4.問題分析

在實(shí)現(xiàn)只能單用戶登錄的時(shí)候
由于是第一次編寫，以前沒有經(jīng)驗(yàn)，剛開始的想法是設(shè)計(jì)2個Map（m1,m2），用于存儲前一次登錄（m1）和再次登錄（m2）的手機(jī)號碼和對應(yīng)的時(shí)間。首先，當(dāng)用戶第一次登錄的時(shí)候，m1和m2必定都為空，m2先通過手機(jī)號碼存儲當(dāng)前的時(shí)間，然后前端通過websockt發(fā)送定時(shí)信息過來請求判斷，在后臺處理前端發(fā)送過來的信息的時(shí)，先判斷m1是否存在m2中該的該手機(jī)，如果不存在，則證明為第一次登錄，那么m1存儲m2中對應(yīng)手機(jī)的對應(yīng)時(shí)間。如果存在，那么將m1中時(shí)間和m2中的時(shí)間進(jìn)行比較，若比較結(jié)果一致，是單用戶登錄；若不一致，該手機(jī)為前一次登錄，強(qiáng)迫下線。當(dāng)用戶再次登錄的時(shí)候，m2中存儲手機(jī)對應(yīng)的當(dāng)前的時(shí)間，那么前一次登錄的時(shí)候m1中存儲的手機(jī)對應(yīng)的時(shí)間必然小于再次登錄中m2中存儲的時(shí)間，此時(shí)，前一次登錄強(qiáng)迫下線，m1中的時(shí)間刷新為m2中對應(yīng)的時(shí)間。但是這個思路出現(xiàn)了一個嚴(yán)重的問題，在測試的時(shí)候，首次登錄后，第二次登錄確實(shí)會踢掉第一次登錄，但是第三次登錄的時(shí)候，所有的用戶都平安無事，不會互相排擠，此時(shí)出現(xiàn)的問題應(yīng)該是線程不安全導(dǎo)致的結(jié)果。m1，m2這2個map都可能會出現(xiàn)這種情況。
解決方法：設(shè)計(jì)一個Map（m），用于存儲手機(jī)號碼和其對應(yīng)的時(shí)間。首先，用戶登錄后，將當(dāng)前的時(shí)間，手機(jī)號碼通過websockt發(fā)送到后臺，后臺進(jìn)行判斷處理，如果發(fā)送過來的時(shí)間和m中存儲的時(shí)間進(jìn)行比較，若一致，證明沒有其他用戶登錄，若不一致，證明其他用戶登錄過，那么當(dāng)前這次用戶就會被迫下線
設(shè)計(jì)的工具類中
因?yàn)榇嬖诤芏鄠€類和包，如果沒有使用工廠模式進(jìn)行設(shè)計(jì)的時(shí)候，那么在啟動項(xiàng)目的時(shí)候，多用戶登錄時(shí)，就會導(dǎo)致線程不安全或者線程堵塞，并且將類中的所有方法聲明為static時(shí)，會占用了許多的內(nèi)存。
解決方法：使用靜態(tài)工廠模式-靜態(tài)內(nèi)部類。將所有的工具類集中到一個總類中，然后為給總類設(shè)計(jì)一個靜態(tài)內(nèi)部類，其他將要調(diào)用的方法設(shè)計(jì)為public非靜態(tài)方法，如果調(diào)用的時(shí)候用工廠調(diào)用就可以了。
當(dāng)使用多個參數(shù)通過mybatis獲取數(shù)據(jù)庫數(shù)據(jù)時(shí)
出現(xiàn)了參數(shù)未定義的情況，這是因?yàn)槎鄠€參數(shù)的時(shí)候，要將這些參數(shù)封裝為一個Map。
解決方法：將多個參數(shù)封裝為一個Map，然后將該Map作為參數(shù)傳遞給mybatis的處理方法。
發(fā)送手機(jī)驗(yàn)證碼出現(xiàn)的錯誤
一開始像使用郵箱驗(yàn)證用戶的，但是在通過郵箱給用法發(fā)送信息的時(shí)候，這個時(shí)候就有多個郵箱作發(fā)送者供選擇-QQ,163,127,sina等等。原先使用的是163郵箱進(jìn)行發(fā)送信息，但是由于發(fā)送的內(nèi)容過于少，被系統(tǒng)認(rèn)定為垃圾郵件不給發(fā)送或者接收。其他郵箱也類似。后來感覺使用郵箱發(fā)送驗(yàn)證碼已經(jīng)被淘汰了，現(xiàn)在流行手機(jī)驗(yàn)證了，所以改為發(fā)送手機(jī)驗(yàn)證碼。但是手機(jī)發(fā)送驗(yàn)證碼的話，不想使用網(wǎng)上別人提供的服務(wù)，打算自己寫一個，關(guān)鍵是怎么將驗(yàn)證碼發(fā)送到手機(jī)上。
解決方法：將驗(yàn)證碼發(fā)送到139郵箱上就可以了，一般的手機(jī)用戶都會默認(rèn)綁定139郵箱的，如果139郵箱收到信息，那么就會通過發(fā)送短信的形式提示到對應(yīng)的手機(jī)上，這樣就可以實(shí)現(xiàn)手機(jī)驗(yàn)證碼的發(fā)送了。
前端使用Ajax局部刷新時(shí)
有可能會導(dǎo)致新顯示的內(nèi)容無法綁定點(diǎn)擊事件，最終導(dǎo)致在點(diǎn)擊相應(yīng)的按鈕（例如加入購物車按鈕）時(shí)，頁面沒有反應(yīng)。
解決方法：在Ajax的for循環(huán)顯示結(jié)果內(nèi)容后，為按鈕等綁定相應(yīng)的事件。這樣就可以解決該問題。
5.用戶使用說明

5.1 首頁

首先訪問本站網(wǎng)址，進(jìn)入首頁，可以瀏覽首頁的商品信息，首頁輪播圖可以左右切換查看商品信息，如果沒有主動切換，那么每3.5s之后會自動往右切換一張，往下滑動顯示的是其他的一些熱門商品縮略信息，點(diǎn)擊商品名字之后可以查看該商品的詳細(xì)信息和留言。再下方是一些其他信息，可以忽略。
5.2 普通游客的限制

普通游客可以隨意訪問首頁，可以通過導(dǎo)航欄訪問商城，求購商城等。但是如要要發(fā)布求購、發(fā)布商品則需要先登錄。
5.3 沒有賬號？

如果用戶還沒有賬號，那么點(diǎn)擊右上角的注冊按鈕，之后會跳轉(zhuǎn)到注冊界面，用戶需要輸入手機(jī)號，再通過它獲取驗(yàn)證碼，注意輸入的手機(jī)號必須要格式正確并且有效，獲取驗(yàn)證碼之后，便點(diǎn)擊下一步，此時(shí)到達(dá)的界面是確認(rèn)密碼界面，重復(fù)輸入密碼，兩次輸入的密碼必須一致。確認(rèn)完畢之后就會進(jìn)入首頁。如果用戶忘記了自己注冊過的賬號密碼，那么點(diǎn)擊登錄界面的忘記密碼選項(xiàng)，輸入注冊時(shí)使用的手機(jī)號碼，通過此手機(jī)號碼獲取驗(yàn)證碼，輸入驗(yàn)證碼之后，點(diǎn)擊下一步開始重置密碼，重置完畢之后就會重新進(jìn)入到首頁。
5.4 商城

用戶想要查看其他用戶發(fā)布的商品，需要通過點(diǎn)擊導(dǎo)航欄處的商城進(jìn)入到商城頁面，在此可以瀏覽所有的商品，每頁顯示12個，底部的分頁按鈕，可以點(diǎn)擊之后切換到用戶想找的頁面。而用戶如果需要過濾信息，找到自己想要的類別，左側(cè)懸浮的懸浮框，鼠標(biāo)移動到指定的類別中，查看詳細(xì)的類別，點(diǎn)擊自己想要找的商品類別，網(wǎng)站便會過濾出指定的商品呈現(xiàn)給用戶。
商城顯示的商品信息只是一部分，通過點(diǎn)擊商品名可以跳轉(zhuǎn)到商品詳細(xì)信息頁面，用戶可以在此查看商品的所有信息，可以將它添加到購物車，或者查看下方其他用戶的留言，也可以針對自己的意見，對商品做出評價(jià)。
5.5 模糊查詢

如果想要模糊查詢商品，最頂部有一個輸入框，輸入商品的信息，點(diǎn)擊搜索按鈕，系統(tǒng)會自動過濾合適的商品呈現(xiàn)給用戶。
5.6 求購商城

如果用戶有商品想要出售，可以進(jìn)入求購商城，瀏覽其他用戶的求購信息，通過點(diǎn)擊頂部的導(dǎo)航欄 求購商城 進(jìn)入查看所有的求購信息，同樣有分頁和側(cè)邊欄的功能。
5.7 發(fā)布商品信息

如果已經(jīng)登錄過，那么右上角顯示的是用戶名，將鼠標(biāo)移動到上面，會彈出一個下拉框，點(diǎn)擊發(fā)布商品信息，按照提示輸入各自的信息，之后確認(rèn)信息無誤之后點(diǎn)擊發(fā)布按鈕即可。
5.8 發(fā)布求購信息

發(fā)布求購信息的過程跟發(fā)布商品信息一樣，主要是點(diǎn)擊下拉框的發(fā)布求購信息，在發(fā)表即可。
5.9 查看我發(fā)布的商品

鼠標(biāo)移動到左上角的用戶名，點(diǎn)擊顯示出來的下拉框的我發(fā)布的商品，就可以進(jìn)入到自己發(fā)布過的商品，可以點(diǎn)擊每一個商品下方的修改圖標(biāo)可以對商品進(jìn)行修改，點(diǎn)擊刪除圖片可以下架這個商品。
5.10 查看我的求購商品

跟查看我發(fā)布的商品基本一致，只是點(diǎn)擊的是我的求購商品。
5.11 購物車

用戶瀏覽到合適的商品，可以點(diǎn)擊添加至購物車的按鈕，之后可以將鼠標(biāo)移動至右上角用戶名處，點(diǎn)擊顯示出來的下拉列表，點(diǎn)擊我的購物車，進(jìn)入到我的購物車查看自己有意向購買的商品。此時(shí)可以選擇收貨地址，或者修改購物車中的一些信息，例如修改數(shù)量，或者刪除某一件商品。也可以同時(shí)選中所有的商品，或者是取消選中所有的商品，之后便可以結(jié)算。
6 設(shè)計(jì)總結(jié)或結(jié)論

該C2C校園二手交易平臺，界面簡潔明了，能給用戶一種美的視覺上的享受。并且操作簡單易懂，可以大膽但是毫不夸張的說，本系統(tǒng)適用于99%的青少年愉快的使用，對于不是很了解智能科技的人來說，只要看看就基本可以掌握然后熟練的使用該系統(tǒng)了。并且本系統(tǒng)的動畫效果做得非常的完美，前端工作人員爭取使用最少的代碼實(shí)現(xiàn)最炫酷的動態(tài)效果，例如3D頁面轉(zhuǎn)換，動態(tài)加入購物車效果，搜索的時(shí)候動態(tài)自動提示商品名字功能等等，無一不是本系統(tǒng)的亮點(diǎn)。由于前端本著使用最少的代碼，實(shí)現(xiàn)最炫酷的動態(tài)效果，所以其性能可以來說是杠杠的。并且前端所構(gòu)建的網(wǎng)站為響應(yīng)式網(wǎng)站，當(dāng)頁面的大小發(fā)送變化的時(shí)候，頁面會隨著變化，但是我們的變化不會出現(xiàn)任何的紕漏。在兼容性方面，本網(wǎng)站可以完美的兼容ie8+，F(xiàn)irefox8+，chrome6+等等，雖然目前比較少用戶使用這些版本以下的瀏覽器，但是要做的話，我們就要力爭做到完美，前端人員通過查詢資料，目前可以最完美的兼容上訴瀏覽器的以下版本。

• 前端頁面缺點(diǎn)：對于那些不兼容HTML5和CSS3的瀏覽器，使用的是JavaScript來動態(tài)實(shí)現(xiàn)這些3D效果的，所以可能展示的效果不如支持HTML5和CSS3的本身效果好。對應(yīng)瀏覽器版本真的是過低的用戶，無法完美的顯示本系統(tǒng)的動態(tài)網(wǎng)頁。JavaScript實(shí)現(xiàn)的那些動畫效果可能存在某些目前未知的bug，導(dǎo)致性能上的加載可能會出現(xiàn)瑕疵
  
• 后臺實(shí)現(xiàn)的優(yōu)點(diǎn)：后臺為了提高性能，使用了一些目前屬于比較好的設(shè)計(jì)模式，例如工廠方法模式，代理模式，備忘錄模式，單例模式等等。數(shù)據(jù)庫表的設(shè)計(jì)思想主要是參考阿里巴巴的開發(fā)手冊進(jìn)行設(shè)計(jì)的，在性能上，建立了適當(dāng)?shù)乃饕鰪?qiáng)了查詢速度，并且自己設(shè)計(jì)了許多的算法對后臺數(shù)據(jù)的處理進(jìn)行優(yōu)化等等。本來想使用集群和分布式來實(shí)現(xiàn)后臺，但是考慮到現(xiàn)在如果使用集群，分布式來實(shí)現(xiàn)，那么開發(fā)周期得提升不止一個檔次的時(shí)間
  

網(wǎng)站加載圖片的時(shí)候，通常耗費(fèi)的主要流量和影響速度的原因之一就是這個，所以后臺設(shè)計(jì)了一個比較有意思的算法對圖片進(jìn)行適當(dāng)?shù)膲嚎s，在前端顯示的時(shí)候，主要顯示的壓縮后的圖片，當(dāng)鼠標(biāo)移到圖片上的時(shí)候，那么通過ajax顯示未被壓縮過的圖片的放大版。這樣，既可以節(jié)省帶寬，又可以提高用戶的體驗(yàn)。
為了防止XSS攻擊，可以使用消毒和HttpOnly防止該現(xiàn)象；對于注入攻擊，使用的方法為錯誤回顯，盲注，參數(shù)綁定；對于CSRF攻擊，可以使用表單token，驗(yàn)證碼和Rererfer check。
對于密碼，手機(jī)號碼，真實(shí)信息等等敏感信息，通常都需要對其進(jìn)行信息加密，我使用的是單向散列表加密和對稱加密，還有就是使用公鑰密鑰配對核實(shí)認(rèn)證。但是如果使用到密鑰的話，那么一般會要求用戶下載安全證書到本機(jī)。
信息過濾和反垃圾是目前一個比較主流的問題。我使用的主要是文本匹配來過濾敏感詞的。當(dāng)用戶發(fā)布的信息很長的時(shí)候，使用的過濾算法是雙數(shù)組Trie算法進(jìn)行敏感詞過濾，該算法利用兩個稀疏數(shù)組存儲樹結(jié)構(gòu)，base數(shù)組存儲Trie樹的節(jié)點(diǎn)，check數(shù)組進(jìn)行狀態(tài)檢查。該算法需要根據(jù)業(yè)務(wù)場景和經(jīng)驗(yàn)確定數(shù)組大小，避免數(shù)組過大或者沖突過多。
簡而言之，前端效果簡潔炫酷，操作簡單易懂。
沒有實(shí)現(xiàn)的功能：秒殺系統(tǒng)，前端反向代理，CDN加速。

-----------------------------

我就軍

源代碼有嗎？

王曉迪

請問可以求個源代碼嘛。[大哭][大哭][大哭]

海豚

請問有源碼嗎

莫羽曦

有的

采夢

和我的畢業(yè)論文標(biāo)題一模一樣