愛鋒貝

標(biāo)題: 基于SSM的校園二手交易平臺(tái) [打印本頁(yè)]
作者: ★小梁帶你玩手機(jī)★    時(shí)間: 2023-3-27 07:05
標(biāo)題: 基于SSM的校園二手交易平臺(tái)
概 要

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

建立一個(gè)用戶可以自由交易的平臺(tái)，通過(guò)ajax實(shí)現(xiàn)局部刷新，實(shí)現(xiàn)網(wǎng)站更具人性化，具有更良好的互動(dòng)。
2 概要設(shè)計(jì)

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

(, 下載次數(shù): 32)

2.1 系統(tǒng)模塊

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

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

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

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

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

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

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

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

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

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

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

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

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

技術(shù)棧
3.1 數(shù)據(jù)字典

用戶信息表
字段名字段類型是否可為空備注
用戶密碼表
字段名字段類型是否可為空備注
商品表
字段名字段類型是否可為空備注
商品留言
字段名字段類型是否可為空備注
我的收藏
字段名字段類型是否可為空備注
求購(gòu)商品
字段名字段類型是否可為空備注
求購(gòu)商品留言
字段名字段類型是否可為空備注
我發(fā)布的商品
字段名字段類型是否可為空備注
我求購(gòu)的商品
字段名字段類型是否可為空備注
已購(gòu)買的商品
字段名字段類型是否可為空備注
購(gòu)物車
字段名字段類型是否可為空備注
3.2 實(shí)現(xiàn)過(guò)程

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

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

(, 下載次數(shù): 23)

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

(, 下載次數(shù): 21)

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

(, 下載次數(shù): 25)

(, 下載次數(shù): 27)

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

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

(, 下載次數(shù): 22)

商城商品展示

(, 下載次數(shù): 29)

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

(, 下載次數(shù): 24)

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

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

(, 下載次數(shù): 30)

留言

(, 下載次數(shù): 25)

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

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


(, 下載次數(shù): 26)

搜索結(jié)果

(, 下載次數(shù): 30)

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

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


(, 下載次數(shù): 26)

(, 下載次數(shù): 18)

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

(, 下載次數(shù): 16)

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

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

(, 下載次數(shù): 25)

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

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

(, 下載次數(shù): 26)

(, 下載次數(shù): 28)

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

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

(, 下載次數(shù): 27)

點(diǎn)擊修改

(, 下載次數(shù): 21)

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

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

(, 下載次數(shù): 25)

(, 下載次數(shù): 27)

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

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

(, 下載次數(shù): 35)

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

(, 下載次數(shù): 16)

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

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

(, 下載次數(shù): 30)

(, 下載次數(shù): 27)

(, 下載次數(shù): 20)

后臺(tái)實(shí)現(xiàn)的過(guò)程
本次后臺(tái)使用的編程語(yǔ)言為Java，使用的框架是Spring+SpringMVC+Mybatis，前端網(wǎng)頁(yè)渲染的語(yǔ)言不使用JSP，而我選擇使用的是thymeleaf框架，原因如下：
后臺(tái)結(jié)構(gòu)總圖

(, 下載次數(shù): 23)

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

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

5.1 首頁(yè)

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

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

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

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

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

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

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

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

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

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

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

該C2C校園二手交易平臺(tái)，界面簡(jiǎn)潔明了，能給用戶一種美的視覺上的享受。并且操作簡(jiǎn)單易懂，可以大膽但是毫不夸張的說(shuō)，本系統(tǒng)適用于99%的青少年愉快的使用，對(duì)于不是很了解智能科技的人來(lái)說(shuō)，只要看看就基本可以掌握然后熟練的使用該系統(tǒng)了。并且本系統(tǒng)的動(dòng)畫效果做得非常的完美，前端工作人員爭(zhēng)取使用最少的代碼實(shí)現(xiàn)最炫酷的動(dòng)態(tài)效果，例如3D頁(yè)面轉(zhuǎn)換，動(dòng)態(tài)加入購(gòu)物車效果，搜索的時(shí)候動(dòng)態(tài)自動(dòng)提示商品名字功能等等，無(wú)一不是本系統(tǒng)的亮點(diǎn)。由于前端本著使用最少的代碼，實(shí)現(xiàn)最炫酷的動(dòng)態(tài)效果，所以其性能可以來(lái)說(shuō)是杠杠的。并且前端所構(gòu)建的網(wǎng)站為響應(yīng)式網(wǎng)站，當(dāng)頁(yè)面的大小發(fā)送變化的時(shí)候，頁(yè)面會(huì)隨著變化，但是我們的變化不會(huì)出現(xiàn)任何的紕漏。在兼容性方面，本網(wǎng)站可以完美的兼容ie8+，F(xiàn)irefox8+，chrome6+等等，雖然目前比較少用戶使用這些版本以下的瀏覽器，但是要做的話，我們就要力爭(zhēng)做到完美，前端人員通過(guò)查詢資料，目前可以最完美的兼容上訴瀏覽器的以下版本。
網(wǎng)站加載圖片的時(shí)候，通常耗費(fèi)的主要流量和影響速度的原因之一就是這個(gè)，所以后臺(tái)設(shè)計(jì)了一個(gè)比較有意思的算法對(duì)圖片進(jìn)行適當(dāng)?shù)膲嚎s，在前端顯示的時(shí)候，主要顯示的壓縮后的圖片，當(dāng)鼠標(biāo)移到圖片上的時(shí)候，那么通過(guò)ajax顯示未被壓縮過(guò)的圖片的放大版。這樣，既可以節(jié)省帶寬，又可以提高用戶的體驗(yàn)。
為了防止XSS攻擊，可以使用消毒和HttpOnly防止該現(xiàn)象；對(duì)于注入攻擊，使用的方法為錯(cuò)誤回顯，盲注，參數(shù)綁定；對(duì)于CSRF攻擊，可以使用表單token，驗(yàn)證碼和Rererfer check。
對(duì)于密碼，手機(jī)號(hào)碼，真實(shí)信息等等敏感信息，通常都需要對(duì)其進(jìn)行信息加密，我使用的是單向散列表加密和對(duì)稱加密，還有就是使用公鑰密鑰配對(duì)核實(shí)認(rèn)證。但是如果使用到密鑰的話，那么一般會(huì)要求用戶下載安全證書到本機(jī)。
信息過(guò)濾和反垃圾是目前一個(gè)比較主流的問(wèn)題。我使用的主要是文本匹配來(lái)過(guò)濾敏感詞的。當(dāng)用戶發(fā)布的信息很長(zhǎng)的時(shí)候，使用的過(guò)濾算法是雙數(shù)組Trie算法進(jìn)行敏感詞過(guò)濾，該算法利用兩個(gè)稀疏數(shù)組存儲(chǔ)樹結(jié)構(gòu)，base數(shù)組存儲(chǔ)Trie樹的節(jié)點(diǎn)，check數(shù)組進(jìn)行狀態(tài)檢查。該算法需要根據(jù)業(yè)務(wù)場(chǎng)景和經(jīng)驗(yàn)確定數(shù)組大小，避免數(shù)組過(guò)大或者沖突過(guò)多。
簡(jiǎn)而言之，前端效果簡(jiǎn)潔炫酷，操作簡(jiǎn)單易懂。
沒有實(shí)現(xiàn)的功能：秒殺系統(tǒng)，前端反向代理，CDN加速。

-----------------------------
作者: 我就軍    時(shí)間: 2023-3-27 08:15
源代碼有嗎？
作者: 王曉迪    時(shí)間: 2023-3-27 10:06
請(qǐng)問(wèn)可以求個(gè)源代碼嘛。[大哭][大哭][大哭]
作者: 海豚    時(shí)間: 2023-3-27 11:15
請(qǐng)問(wèn)有源碼嗎
作者: 莫羽曦    時(shí)間: 2023-3-27 12:49
有的
作者: 采夢(mèng)    時(shí)間: 2023-3-27 14:14
和我的畢業(yè)論文標(biāo)題一模一樣



歡迎光臨 愛鋒貝 (http://m.7gfy2te7.cn/) Powered by Discuz! X3.4