導語：校園二手書交易網(wǎng)站設計研究一文來源于網(wǎng)友上傳，不代表本站觀點，若需要原創(chuàng)文章可咨詢客服老師，歡迎參考。

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

關鍵詞：校園二手書；交易平臺；網(wǎng)站設計

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

1二手書交易平臺的使用價值

1.1為交易雙方提供便利

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

1.2良好的購書體驗

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

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

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

1.4圖書復用實現(xiàn)價值提升

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

2校園二手書交易平臺設計

2.1選擇制作工具

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

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

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

3平臺各個部分設計

3.1首頁制作

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

3.2書籍分類制作

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

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

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

3.4熱門書籍板塊制作

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

3.5導航欄相關子頁

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

4平臺的內部測試

4.1用戶登錄測試

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

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

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

4.3圖書查詢模塊測試

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

4.4路由跳轉功能測試

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

5結論

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

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