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

★小梁帶你玩手機★

概 要

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

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

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

2 概要設計

系統(tǒng)的整體結構流程圖如下:

登錄/注冊后可看大圖

2.1 系統(tǒng)模塊

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

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

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

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

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

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

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

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

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

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

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

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

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

技術棧

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

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

用戶信息表

字段名

字段類型

是否可為空

備注

用戶密碼表

字段名

字段類型

是否可為空

備注

商品表

字段名

字段類型

是否可為空

備注

商品留言

字段名

字段類型

是否可為空

備注

我的收藏

字段名

字段類型

是否可為空

備注

求購商品

字段名

字段類型

是否可為空

備注

求購商品留言

字段名

字段類型

是否可為空

備注

我發(fā)布的商品

字段名

字段類型

是否可為空

備注

我求購的商品

字段名

字段類型

是否可為空

備注

已購買的商品

字段名

字段類型

是否可為空

備注

購物車

字段名

字段類型

是否可為空

備注

3.2 實現(xiàn)過程

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

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

登錄/注冊后可看大圖

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

登錄/注冊后可看大圖

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

登錄/注冊后可看大圖

登錄/注冊后可看大圖

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

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

登錄/注冊后可看大圖

商城商品展示

登錄/注冊后可看大圖

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

登錄/注冊后可看大圖

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

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

登錄/注冊后可看大圖

留言

登錄/注冊后可看大圖

3.2.4 站內搜索引擎實現(xiàn)

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

登錄/注冊后可看大圖

搜索結果

登錄/注冊后可看大圖

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

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

登錄/注冊后可看大圖

登錄/注冊后可看大圖

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

登錄/注冊后可看大圖

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

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

登錄/注冊后可看大圖

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

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

登錄/注冊后可看大圖

登錄/注冊后可看大圖

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

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

登錄/注冊后可看大圖

點擊修改

登錄/注冊后可看大圖

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

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

登錄/注冊后可看大圖

登錄/注冊后可看大圖

3.2.10 購物車實現(xiàn)

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

登錄/注冊后可看大圖

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

登錄/注冊后可看大圖

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

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

登錄/注冊后可看大圖

登錄/注冊后可看大圖

登錄/注冊后可看大圖

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

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

后臺結構總圖

登錄/注冊后可看大圖

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

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

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

5.1 首頁

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我就軍

源代碼有嗎？

王曉迪

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

海豚

請問有源碼嗎

莫羽曦

有的

采夢

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