導(dǎo)語(yǔ)：校園二手書(shū)交易網(wǎng)站設(shè)計(jì)研究一文來(lái)源于網(wǎng)友上傳，不代表本站觀點(diǎn)，若需要原創(chuàng)文章可咨詢(xún)客服老師，歡迎參考。

摘要：為鼓勵(lì)二手圖書(shū)的循環(huán)利用，增強(qiáng)大學(xué)生的環(huán)保意識(shí)，利用線上加線下相結(jié)合的模式，力求構(gòu)建一個(gè)面向校內(nèi)大學(xué)生的二手書(shū)交易平臺(tái)。選擇VisualStudioCode軟件作為網(wǎng)站基本制作工具，使用HTML、Css和JavaScript完成網(wǎng)頁(yè)布局，并采用數(shù)據(jù)庫(kù)、Vue.js及ElementUI等相關(guān)技術(shù)，實(shí)現(xiàn)了用戶(hù)的在線注冊(cè)、二手書(shū)籍瀏覽、分類(lèi)、查詢(xún)、購(gòu)買(mǎi)等功能，最終以網(wǎng)站的形式達(dá)到二手書(shū)交易的目的。

關(guān)鍵詞：校園二手書(shū)；交易平臺(tái)；網(wǎng)站設(shè)計(jì)

傳統(tǒng)的線下交易模式一般是由二手書(shū)商或者廢品回收人員在畢業(yè)季按照廢品價(jià)格進(jìn)行回收，此時(shí)的畢業(yè)生由于急需處理手上閑置的書(shū)籍，便以較低的價(jià)格出售，市場(chǎng)上的二手書(shū)店只有一些大眾化的書(shū)籍，只能滿(mǎn)足一小部分同學(xué)的需求。線上交易平臺(tái)會(huì)優(yōu)先回收暢銷(xiāo)書(shū)籍，很多相對(duì)冷門(mén)的專(zhuān)業(yè)書(shū)籍會(huì)在掃碼時(shí)提示拒收，這對(duì)賣(mài)書(shū)者來(lái)說(shuō)無(wú)疑是糟糕的體驗(yàn)。而對(duì)于購(gòu)書(shū)者來(lái)說(shuō)，圖書(shū)的品相和質(zhì)量往往難以判斷，每個(gè)人對(duì)八成新的定義不一樣，并且線上也難以查看圖書(shū)內(nèi)部的筆記、涂改等情況，二手書(shū)交易平臺(tái)的網(wǎng)站設(shè)計(jì)旨在解決上述不足。

1二手書(shū)交易平臺(tái)的使用價(jià)值

1.1為交易雙方提供便利

書(shū)有余年校內(nèi)二手書(shū)交易網(wǎng)站的出現(xiàn)，對(duì)于買(mǎi)書(shū)者而言不僅可以降低購(gòu)書(shū)成本，還可以享受到更優(yōu)質(zhì)的服務(wù)；對(duì)于賣(mài)書(shū)者而言，處理掉自己閑置的圖書(shū)不僅可以為生活騰出空間，還可以獲得一份額外的收入。本網(wǎng)站不需要第三方的介入，節(jié)省了交易過(guò)程中的費(fèi)用，并且沒(méi)有時(shí)間限制，從而讓買(mǎi)書(shū)和賣(mài)書(shū)的人都有充足的時(shí)間進(jìn)行交易。

1.2良好的購(gòu)書(shū)體驗(yàn)

針對(duì)傳統(tǒng)的交易模式，本網(wǎng)站采用了線上加線下的交易方式，作為一個(gè)免費(fèi)的信息發(fā)布端，將各種書(shū)籍的信息分門(mén)別類(lèi)進(jìn)行整理，購(gòu)書(shū)者只需要進(jìn)入對(duì)應(yīng)的分區(qū)，選擇對(duì)應(yīng)的類(lèi)別就可以方便、快捷地找到自己需要的圖書(shū)。

1.3社區(qū)交易模式的優(yōu)勢(shì)

本網(wǎng)站將交易的區(qū)域設(shè)置在華宇校園內(nèi)，交易的雙方大多都為華宇師生。這使得交易的時(shí)間和距離都大幅縮短，交易雙方確認(rèn)交易后，買(mǎi)家可以在當(dāng)天甚至是一兩個(gè)小時(shí)內(nèi)就可以拿到自己購(gòu)買(mǎi)的圖書(shū)。

1.4圖書(shū)復(fù)用實(shí)現(xiàn)價(jià)值提升

通過(guò)將二手圖書(shū)循環(huán)利用的方式，促進(jìn)優(yōu)質(zhì)書(shū)籍在校園中的流動(dòng)，充分利用閑置圖書(shū)的剩余價(jià)值，達(dá)到降低使用成本，減少資源浪費(fèi)的目的。

2校園二手書(shū)交易平臺(tái)設(shè)計(jì)

2.1選擇制作工具

使用VisualStudioCode作為代碼編輯器，其不僅具有對(duì)JavaScript和Node.js的內(nèi)置支持，還可以支持豐富的其他語(yǔ)言和運(yùn)行時(shí)的生態(tài)環(huán)境，并且VisualStudioCode支持開(kāi)源插件，可以通過(guò)安裝實(shí)現(xiàn)代碼提示、語(yǔ)法高亮、代碼美化等各種功能。使用Navicat作為數(shù)據(jù)庫(kù)管理工具。Navicat是一套用于簡(jiǎn)化數(shù)據(jù)庫(kù)管理的數(shù)據(jù)庫(kù)管理工具，他的功能足以滿(mǎn)足專(zhuān)業(yè)開(kāi)發(fā)人員的所有需求，但對(duì)初學(xué)者來(lái)說(shuō)又簡(jiǎn)單易操作。使用Photoshop處理圖片素材、網(wǎng)站標(biāo)準(zhǔn)、和海報(bào)圖片等素材。Photoshop是主要以處理像素構(gòu)成的數(shù)字圖像為主的圖像處理軟件，可以有效地處理圖片編輯工作。

2.2網(wǎng)頁(yè)布局規(guī)劃

網(wǎng)站以校園的學(xué)生為主要用戶(hù)，每個(gè)用戶(hù)都可以有兩種身份：既可以是賣(mài)家，也可以是買(mǎi)家，買(mǎi)家可以瀏覽然后購(gòu)買(mǎi)自己想要的圖書(shū)。本網(wǎng)站應(yīng)當(dāng)實(shí)現(xiàn)在線瀏覽、條件檢索、個(gè)人信息管理、購(gòu)買(mǎi)圖書(shū)、加入購(gòu)物車(chē)及訂單信息等相應(yīng)功能，網(wǎng)站功能架構(gòu)圖如圖1所示。網(wǎng)站由五個(gè)部分組成：首頁(yè)主要有書(shū)攤區(qū)、考試專(zhuān)區(qū)兩大板塊，用于展示推薦的書(shū)籍信息；書(shū)籍分類(lèi)頁(yè)面主要用于完成按書(shū)籍分類(lèi)信息的定向檢索和展示；推薦頁(yè)面子頁(yè)主要展示推薦的書(shū)籍及熱門(mén)作者信息；搜索頁(yè)面主要用于完成按書(shū)籍名稱(chēng)、作者等信息的定向檢索和展示；個(gè)人信息頁(yè)面主要包含個(gè)人信息、買(mǎi)家信息、賣(mài)家信息等內(nèi)容的展示。

3平臺(tái)各個(gè)部分設(shè)計(jì)

3.1首頁(yè)制作

網(wǎng)站首頁(yè)整體自上而下分為“導(dǎo)航欄”“Banner”“書(shū)籍分區(qū)”“圖書(shū)推薦”“熱門(mén)書(shū)籍”“熱門(mén)作家”以及“底部”七個(gè)板塊構(gòu)成。導(dǎo)航欄上放置了“購(gòu)物指南”“書(shū)籍分類(lèi)”“登錄/注冊(cè)”“個(gè)人中心”四個(gè)功能模塊，其中“購(gòu)物指南”和“書(shū)籍分類(lèi)”按鈕還添加數(shù)個(gè)子頁(yè)，通過(guò)下拉欄內(nèi)的按鈕實(shí)現(xiàn)相應(yīng)跳轉(zhuǎn)功能，導(dǎo)航欄右側(cè)是搜索欄和搜索按鈕。Banner以四張與讀書(shū)有關(guān)的圖片為背景，每張上面有四個(gè)書(shū)籍圖標(biāo)，圖標(biāo)下方有讀書(shū)相關(guān)的勵(lì)志名言。布局方式為引入背景圖片，在背景上層添加一個(gè)背景為70%透明度的黑色盒子，壓暗整體色調(diào)，將圖標(biāo)盒子和文字盒子使用相對(duì)定位固定在相應(yīng)位置，根據(jù)四張背景圖片制作四個(gè)對(duì)應(yīng)的Banner盒子，通過(guò)v-show控制它們是否渲染，引用組件后借助element-ui封裝組件實(shí)現(xiàn)Banner輪播效果。底部板塊左半部分展示網(wǎng)站Logo，右半部分展示聯(lián)系我們的基本信息。布局通過(guò)調(diào)整對(duì)齊方式和內(nèi)外邊距實(shí)現(xiàn)整體效果。

3.2書(shū)籍分類(lèi)制作

書(shū)籍分類(lèi)通過(guò)對(duì)大學(xué)生常用書(shū)籍進(jìn)行調(diào)查，分為六類(lèi)，每個(gè)分類(lèi)一個(gè)板塊，實(shí)現(xiàn)方式為先完成單個(gè)板塊組件的編寫(xiě)，使用v-for指令通過(guò)傳入不同的分類(lèi)信息，遍歷出六個(gè)不同的板塊，通過(guò)遍歷的key值的奇偶值實(shí)現(xiàn)顏色的交替顯示。鼠標(biāo)點(diǎn)擊時(shí)調(diào)用跳轉(zhuǎn)方法并傳入query參數(shù)，用于得到用戶(hù)點(diǎn)擊的分類(lèi)名。書(shū)籍分類(lèi)頁(yè)面用于展示每個(gè)分區(qū)下的幾個(gè)小分類(lèi)，每個(gè)分類(lèi)展示四到八本圖書(shū)，點(diǎn)擊圖書(shū)后會(huì)進(jìn)入書(shū)籍詳情頁(yè)。實(shí)現(xiàn)方式為用戶(hù)點(diǎn)擊某個(gè)分區(qū)后，會(huì)在跳轉(zhuǎn)時(shí)傳入Props參數(shù)的Title值來(lái)區(qū)分用戶(hù)點(diǎn)擊的分區(qū)，并渲染出對(duì)應(yīng)的分類(lèi)組件。同時(shí)在組件渲染前向服務(wù)器發(fā)送請(qǐng)求，將返回的書(shū)籍信息根據(jù)Title值拆分為對(duì)應(yīng)的對(duì)象，然后根據(jù)對(duì)象中的值遍歷每一本書(shū)的展示組件<EveryBook>，同時(shí)將書(shū)籍的詳細(xì)信息傳入<EveryBook>以展示每一本書(shū)的圖片及作者信息，如圖2所示。

3.3圖書(shū)推薦及熱門(mén)作家推薦

圖書(shū)推薦頁(yè)面展示三本熱門(mén)圖書(shū)，熱門(mén)作家模塊則展示本網(wǎng)站推薦的三位作家，點(diǎn)擊后可分別跳轉(zhuǎn)到相應(yīng)的圖書(shū)推薦頁(yè)面和作家詳情頁(yè)面。布局方式為通過(guò)彈性盒子布局方式的內(nèi)容布局屬性，將三個(gè)書(shū)籍盒子和作者盒子平均分布在改行，并為其分別綁定跳轉(zhuǎn)路由，實(shí)現(xiàn)跳轉(zhuǎn)功能。布局則使用相對(duì)定位和浮動(dòng)布局兩種方式實(shí)現(xiàn)。背景圖片則是使用一本展開(kāi)的書(shū)籍作為底圖，然后以透明度自上而下，由低到高的灰色作為遮罩，將底圖的書(shū)籍亮度和對(duì)比度壓低從而突出網(wǎng)頁(yè)內(nèi)容的層次變化，如圖3所示。

3.4熱門(mén)書(shū)籍板塊制作

熱門(mén)書(shū)籍頁(yè)面分上下兩個(gè)部分，上半部分展示本網(wǎng)站最熱門(mén)的四本圖書(shū)，下半部分則以輪播圖的形式展示四本書(shū)籍的詳細(xì)信息。布局方式上半部分使用彈性盒子完成布局，下半部分單獨(dú)封裝為組件，布局方式與Banner模塊類(lèi)似，熱門(mén)書(shū)籍輪播圖部分代碼如圖4所示。

3.5導(dǎo)航欄相關(guān)子頁(yè)

購(gòu)物指南模塊下設(shè)置購(gòu)買(mǎi)流程和支付方式兩個(gè)子頁(yè)，閱讀兩個(gè)子頁(yè)內(nèi)容可以使新用戶(hù)快速了解本網(wǎng)站的使用方式。其中購(gòu)物流程頁(yè)面詳細(xì)地介紹了用戶(hù)從登錄到提交訂單過(guò)程中的五個(gè)操作流程，頁(yè)面整體布局以流程圖的樣式展示給用戶(hù)，以五個(gè)圖標(biāo)分別代表五個(gè)步驟，簡(jiǎn)單易懂。支付方式頁(yè)面則簡(jiǎn)單介紹了本網(wǎng)站的三個(gè)支付流程和兩種交易方式，如圖5所示。登錄注冊(cè)模塊只有登錄注冊(cè)頁(yè)面一個(gè)子頁(yè)，用戶(hù)點(diǎn)擊input框后若未填寫(xiě)則會(huì)在下方以紅色字體提示用戶(hù)填寫(xiě)，在填寫(xiě)并提交表單后向后臺(tái)發(fā)送請(qǐng)求，由后端判斷用戶(hù)名和密碼是否正確，然后將信息返回前端，若成功跳轉(zhuǎn)至主頁(yè)若失敗則彈出失敗彈窗，提示重新填寫(xiě)。個(gè)人中心頁(yè)面由左側(cè)導(dǎo)航按鈕以及右側(cè)的信息展示頁(yè)面構(gòu)成，使用導(dǎo)航欄可分別跳轉(zhuǎn)至購(gòu)物車(chē)頁(yè)面，訂單頁(yè)面，賣(mài)家相關(guān)頁(yè)面等。購(gòu)物車(chē)及訂單頁(yè)用于展示購(gòu)買(mǎi)的圖書(shū)信息及訂單信息。購(gòu)物車(chē)頁(yè)面功能實(shí)現(xiàn)方式為將用戶(hù)加入購(gòu)物車(chē)的書(shū)籍信息傳入對(duì)應(yīng)數(shù)組，然后根據(jù)數(shù)組內(nèi)的數(shù)據(jù)遍歷展示圖書(shū)信息的組件，從而實(shí)時(shí)向用戶(hù)展示購(gòu)物車(chē)，實(shí)現(xiàn)訂單功能與此類(lèi)似，如圖6所示。

4平臺(tái)的內(nèi)部測(cè)試

4.1用戶(hù)登錄測(cè)試

用戶(hù)登錄模塊為一切的開(kāi)始，測(cè)試時(shí)使用注冊(cè)好的用戶(hù)和密碼以及未注冊(cè)的用戶(hù)名和密碼進(jìn)行登錄測(cè)試。用戶(hù)輸入已經(jīng)設(shè)置好的用戶(hù)名和密碼進(jìn)行登錄，驗(yàn)證通過(guò)后便可直接跳轉(zhuǎn)到書(shū)有余年網(wǎng)站的首頁(yè)。之后便可以進(jìn)行其他的操作。當(dāng)用戶(hù)輸入錯(cuò)誤的用戶(hù)名或密碼后會(huì)自動(dòng)彈出頁(yè)面提示用戶(hù)重新輸入。

4.2圖書(shū)發(fā)布模塊測(cè)試

圖書(shū)發(fā)布時(shí)用戶(hù)要根據(jù)表單信息填寫(xiě)書(shū)籍信息，點(diǎn)擊提交后便將書(shū)籍成功發(fā)布到網(wǎng)站上。測(cè)試時(shí)使用不同的用戶(hù)，向數(shù)據(jù)庫(kù)中添加準(zhǔn)備好的圖書(shū)信息，然后查數(shù)據(jù)庫(kù)表，看是否添加成功，然后前往網(wǎng)站看是否正確顯示，測(cè)試共使用五個(gè)測(cè)試樣本，全部上傳成功。

4.3圖書(shū)查詢(xún)模塊測(cè)試

圖書(shū)查詢(xún)功能方便用戶(hù)快速查找圖書(shū)的一種方法，本網(wǎng)站提供關(guān)鍵字查詢(xún)的方式供用戶(hù)進(jìn)行查詢(xún)。在搜索欄輸入要查詢(xún)的關(guān)鍵詞，點(diǎn)擊搜索按鈕，若成功則會(huì)成功顯示關(guān)鍵詞相關(guān)圖書(shū)，失敗則顯示空頁(yè)面。

4.4路由跳轉(zhuǎn)功能測(cè)試

路由主要測(cè)試需要攜帶參數(shù)的路由，看跳轉(zhuǎn)時(shí)是否正確攜帶參數(shù)，回退時(shí)頁(yè)面時(shí)是否正常顯示。測(cè)試結(jié)果為在其他頁(yè)面跳轉(zhuǎn)與回退皆正常，在書(shū)籍詳情頁(yè)跳轉(zhuǎn)至購(gòu)物車(chē)頁(yè)面時(shí)正常，但回退時(shí)出現(xiàn)數(shù)據(jù)丟失現(xiàn)象。解決方式為不再攜帶書(shū)籍的全部信息進(jìn)入組件，改為通過(guò)query參數(shù)攜帶書(shū)籍ID進(jìn)入組件，通過(guò)書(shū)籍ID請(qǐng)求書(shū)籍信息。

5結(jié)論

本文主要內(nèi)容為介紹搭建二手書(shū)交易平臺(tái)的設(shè)計(jì)制作，完成了網(wǎng)站整體內(nèi)容的制作，包括網(wǎng)站首頁(yè)及各類(lèi)相關(guān)子頁(yè)；完成了書(shū)籍的瀏覽、分類(lèi)、查詢(xún)、購(gòu)買(mǎi)等功能、數(shù)據(jù)庫(kù)的建設(shè)與內(nèi)部測(cè)試。二手書(shū)交易平臺(tái)還有很多功能沒(méi)有完善，因?yàn)橐粋€(gè)完整的電商網(wǎng)站的功能和業(yè)務(wù)邏輯是相當(dāng)復(fù)雜的，并且工作量也比較大，所以在制作的過(guò)程中只實(shí)現(xiàn)了二手書(shū)網(wǎng)站的基本功能，同時(shí)網(wǎng)站的整體布局也相對(duì)簡(jiǎn)單，因此在后續(xù)的研究中將繼續(xù)進(jìn)行完善。

作者：張威威 郗文豪 單位：山東華宇工學(xué)院