校園二手書交易網(wǎng)站設(shè)計(jì)與制作

張威威，郗文豪

（山東華宇工學(xué)院，山東 德州 253034）

0 引 言

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

1 二手書交易平臺的使用價(jià)值

1.1 為交易雙方提供便利

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

1.2 良好的購書體驗(yàn)

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

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

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

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

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

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

2.1 選擇制作工具

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

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

網(wǎng)站以校園的學(xué)生為主要用戶，每個(gè)用戶都可以有兩種身份：既可以是賣家，也可以是買家，買家可以瀏覽然后購買自己想要的圖書。本網(wǎng)站應(yīng)當(dāng)實(shí)現(xiàn)在線瀏覽、條件檢索、個(gè)人信息管理、購買圖書、加入購物車及訂單信息等相應(yīng)功能，網(wǎng)站功能架構(gòu)圖如圖1所示。

圖1 網(wǎng)站功能架構(gòu)圖

網(wǎng)站由五個(gè)部分組成：首頁主要有書攤區(qū)、考試專區(qū)兩大板塊，用于展示推薦的書籍信息；書籍分類頁面主要用于完成按書籍分類信息的定向檢索和展示；推薦頁面子頁主要展示推薦的書籍及熱門作者信息；搜索頁面主要用于完成按書籍名稱、作者等信息的定向檢索和展示；個(gè)人信息頁面主要包含個(gè)人信息、買家信息、賣家信息等內(nèi)容的展示。

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

3.1 首頁制作

網(wǎng)站首頁整體自上而下分為“導(dǎo)航欄”“Banner”“書籍分區(qū)”“圖書推薦”“熱門書籍”“熱門作家”以及“底部”七個(gè)板塊構(gòu)成。導(dǎo)航欄上放置了“購物指南”“書籍分類”“登錄/注冊”“個(gè)人中心”四個(gè)功能模塊，其中“購物指南”和“書籍分類”按鈕還添加數(shù)個(gè)子頁，通過下拉欄內(nèi)的按鈕實(shí)現(xiàn)相應(yīng)跳轉(zhuǎn)功能，導(dǎo)航欄右側(cè)是搜索欄和搜索按鈕。

Banner 以四張與讀書有關(guān)的圖片為背景，每張上面有四個(gè)書籍圖標(biāo)，圖標(biāo)下方有讀書相關(guān)的勵(lì)志名言。布局方式為引入背景圖片，在背景上層添加一個(gè)背景為70%透明度的黑色盒子，壓暗整體色調(diào)，將圖標(biāo)盒子和文字盒子使用相對定位固定在相應(yīng)位置，根據(jù)四張背景圖片制作四個(gè)對應(yīng)的Banner 盒子，通過v-show 控制它們是否渲染，引用組件后借助element-ui 封裝組件實(shí)現(xiàn)Banner 輪播效果。底部板塊左半部分展示網(wǎng)站Logo，右半部分展示聯(lián)系我們的基本信息。布局通過調(diào)整對齊方式和內(nèi)外邊距實(shí)現(xiàn)整體效果。

3.2 書籍分類制作

書籍分類通過對大學(xué)生常用書籍進(jìn)行調(diào)查，分為六類，每個(gè)分類一個(gè)板塊，實(shí)現(xiàn)方式為先完成單個(gè)板塊組件的編寫，使用v-for 指令通過傳入不同的分類信息，遍歷出六個(gè)不同的板塊，通過遍歷的key 值的奇偶值實(shí)現(xiàn)顏色的交替顯示。鼠標(biāo)點(diǎn)擊時(shí)調(diào)用跳轉(zhuǎn)方法并傳入query 參數(shù)，用于得到用戶點(diǎn)擊的分類名。

書籍分類頁面用于展示每個(gè)分區(qū)下的幾個(gè)小分類，每個(gè)分類展示四到八本圖書，點(diǎn)擊圖書后會進(jìn)入書籍詳情頁。實(shí)現(xiàn)方式為用戶點(diǎn)擊某個(gè)分區(qū)后，會在跳轉(zhuǎn)時(shí)傳入Props 參數(shù)的Title值來區(qū)分用戶點(diǎn)擊的分區(qū)，并渲染出對應(yīng)的分類組件。同時(shí)在組件渲染前向服務(wù)器發(fā)送請求，將返回的書籍信息根據(jù)Title 值拆分為對應(yīng)的對象，然后根據(jù)對象中的值遍歷每一本書的展示組件，同時(shí)將書籍的詳細(xì)信息傳入以展示每一本書的圖片及作者信息，如圖2所示。

圖2 分類布局圖

3.3 圖書推薦及熱門作家推薦

圖書推薦頁面展示三本熱門圖書，熱門作家模塊則展示本網(wǎng)站推薦的三位作家，點(diǎn)擊后可分別跳轉(zhuǎn)到相應(yīng)的圖書推薦頁面和作家詳情頁面。布局方式為通過彈性盒子布局方式的內(nèi)容布局屬性，將三個(gè)書籍盒子和作者盒子平均分布在改行，并為其分別綁定跳轉(zhuǎn)路由，實(shí)現(xiàn)跳轉(zhuǎn)功能。

布局則使用相對定位和浮動布局兩種方式實(shí)現(xiàn)。背景圖片則是使用一本展開的書籍作為底圖，然后以透明度自上而下，由低到高的灰色作為遮罩，將底圖的書籍亮度和對比度壓低從而突出網(wǎng)頁內(nèi)容的層次變化，如圖3所示。

圖3 圖書推薦頁面

3.4 熱門書籍板塊制作

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

圖4 熱門書籍輪播圖部分代碼

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

購物指南模塊下設(shè)置購買流程和支付方式兩個(gè)子頁，閱讀兩個(gè)子頁內(nèi)容可以使新用戶快速了解本網(wǎng)站的使用方式。其中購物流程頁面詳細(xì)地介紹了用戶從登錄到提交訂單過程中的五個(gè)操作流程，頁面整體布局以流程圖的樣式展示給用戶，以五個(gè)圖標(biāo)分別代表五個(gè)步驟，簡單易懂。支付方式頁面則簡單介紹了本網(wǎng)站的三個(gè)支付流程和兩種交易方式，如圖5所示。

圖5 購物指南下拉欄

登錄注冊模塊只有登錄注冊頁面一個(gè)子頁，用戶點(diǎn)擊input 框后若未填寫則會在下方以紅色字體提示用戶填寫，在填寫并提交表單后向后臺發(fā)送請求，由后端判斷用戶名和密碼是否正確，然后將信息返回前端，若成功跳轉(zhuǎn)至主頁若失敗則彈出失敗彈窗，提示重新填寫。

個(gè)人中心頁面由左側(cè)導(dǎo)航按鈕以及右側(cè)的信息展示頁面構(gòu)成，使用導(dǎo)航欄可分別跳轉(zhuǎn)至購物車頁面，訂單頁面，賣家相關(guān)頁面等。購物車及訂單頁用于展示購買的圖書信息及訂單信息。購物車頁面功能實(shí)現(xiàn)方式為將用戶加入購物車的書籍信息傳入對應(yīng)數(shù)組，然后根據(jù)數(shù)組內(nèi)的數(shù)據(jù)遍歷展示圖書信息的組件，從而實(shí)時(shí)向用戶展示購物車，實(shí)現(xiàn)訂單功能與此類似，如圖6所示。

圖6 訂單功能實(shí)現(xiàn)流程圖

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

4.1 用戶登錄測試

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

4.2 圖書發(fā)布模塊測試

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

4.3 圖書查詢模塊測試

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

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

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

5 結(jié) 論

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