4天內(nèi)用Vue+Antd 東拼西湊實(shí)現(xiàn)的仿Bilibili/Pixivic手辦百科與交易平臺(tái)

時(shí)間：2023-04-23 18:18:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-04-23 18:18:01 來源：網(wǎng)站運(yùn)營(yíng)

4天內(nèi)用Vue+Antd 東拼西湊實(shí)現(xiàn)的仿Bilibili/Pixivic手辦百科與交易平臺(tái)：

學(xué)習(xí)數(shù)據(jù)庫為什么要卷前端呢？
一個(gè)從周四早上開始東抄抄西湊湊的人如是問
項(xiàng)目地址：

---

網(wǎng)站主頁

網(wǎng)站名為“Figure Hub”，通過npm run serve指令，將前端部署到本地服務(wù)器后，即可進(jìn)入數(shù)據(jù)庫網(wǎng)站。網(wǎng)站整體采用新擬態(tài)風(fēng)格，效果介于扁平化與投影風(fēng)之間。

對(duì)于訪客用戶，可以瀏覽首頁的推薦以及商城卡片，需要注冊(cè)登錄才能瀏覽百科、商品詳情，進(jìn)行購買、發(fā)布商品等操作。

用戶注冊(cè)與登錄

通過頂部欄的“登錄”按鈕可以進(jìn)入登錄以及注冊(cè)頁面。前端實(shí)現(xiàn)了簡(jiǎn)單的數(shù)據(jù)校驗(yàn)，密碼支持英文、數(shù)字、下劃線，當(dāng)檢驗(yàn)到用戶名和密碼不為空時(shí)，才發(fā)送登錄請(qǐng)求。

點(diǎn)擊注冊(cè)按鈕進(jìn)入注冊(cè)頁面，輸入用戶名、密碼，上傳頭像和登記昵稱后，在注冊(cè)頁面可以進(jìn)行用戶類型的選擇。

可以注冊(cè)的用戶類型包括管理員、廠商用戶、普通用戶。通過前端的業(yè)務(wù)邏輯以及后端的token校驗(yàn)，為不同類型的訪問者提供對(duì)應(yīng)的功能。

商品與交易

登陸后，頂部導(dǎo)航欄顯示用戶頭像，并在最右側(cè)顯示“發(fā)布”按鈕，普通用戶可以在這里發(fā)布自己的二手或全新手辦模型，在一次交易發(fā)起后從商城下架，廠商用戶則可以發(fā)布余量充足的產(chǎn)品。

在上傳商品時(shí)，最多可以上傳9張?jiān)斍閳D片。

發(fā)布成功后將彈出成功提示，并在“購物”欄目下顯示發(fā)布的手辦櫥窗。與詳情頁相比，櫥窗卡片顯示了價(jià)格、發(fā)布者等簡(jiǎn)要信息。

櫥窗整體采用三欄布局，每次對(duì)商品表進(jìn)行計(jì)算后排列。

源地址：

首頁同樣可以點(diǎn)擊卡片引流，進(jìn)入詳情頁面。

首頁參考的是

點(diǎn)擊櫥窗卡片（或從首頁進(jìn)入）后，會(huì)顯示動(dòng)畫效果并跳轉(zhuǎn)到詳情頁面，集成了瀏覽詳情圖片（多張，滾動(dòng)播放）、收藏、購買、百科、發(fā)布者主頁、相關(guān)推薦、評(píng)論、點(diǎn)贊、刪除評(píng)論等功能。用戶可在個(gè)人中心下架自己發(fā)布的商品。

點(diǎn)擊詳情頁面的“收藏”按鈕，可以將商品加入收藏。

點(diǎn)擊“購買”按鈕，可以確認(rèn)當(dāng)前商品信息，執(zhí)行假支付后將提交交易訂單，交易狀態(tài)為待確認(rèn)。

通過頂部欄的“訂單”可以進(jìn)入訂單頁面，顯示用戶發(fā)布、賣出、買入信息，管理員賬戶則增加“交易管理”頁面，可以刪除訂單。

在訂單頁面，可以確認(rèn)收貨：

收貨后交易狀態(tài)變更為待評(píng)價(jià)，按鈕變?yōu)椤拔乙u(píng)價(jià)”：

評(píng)價(jià)完成后，可以查看自己發(fā)布的評(píng)論：

用戶也可以刪除自己買入和賣出的訂單：

百科信息

在管理界面，管理員以及廠商用戶可以對(duì)廠商信息、角色信息、手辦模型信息、作品信息以及手辦與角色對(duì)應(yīng)關(guān)系進(jìn)行增刪查改等操作。對(duì)普通用戶，“百科管理”并不顯示（如上圖演示的管理界面中就沒有此頁面）。

通過左側(cè)的側(cè)邊欄選擇不同的列表。同時(shí)頁面支持響應(yīng)式布局，可以針對(duì)不同頁面寬度，自行適配合適的頁面布局。

下面進(jìn)行表格的增加、刪除、查找、修改操作的演示。

4.1 頁面初始化

開啟頁面時(shí)，前端通過axios向后端發(fā)送請(qǐng)求，如果不能正常加載數(shù)據(jù)，則顯示加載動(dòng)畫和錯(cuò)誤提示。

初始化成功，頁面以每頁4條的格式渲染數(shù)據(jù)，并顯示當(dāng)前的總數(shù)據(jù)量。

4.2 添加項(xiàng)目

單擊左上角的“添加”按鈕，即可彈出添加新項(xiàng)目的表單。

在表單中會(huì)對(duì)項(xiàng)目?jī)?nèi)容做初步驗(yàn)證（如模型名稱不能為空、價(jià)格須為數(shù)字等）。

添加成功后，前端向后端發(fā)送添加請(qǐng)求，重新獲取數(shù)據(jù)后渲染到頁面，同時(shí)在數(shù)據(jù)庫可查詢到添加的項(xiàng)目。

4.3 刪除數(shù)據(jù)

需要?jiǎng)h除某一條數(shù)據(jù)時(shí)，單擊操作中的“刪除”按鈕，彈出氣泡確認(rèn)框。

確定后，前端向后端發(fā)送刪除請(qǐng)求，并在重新獲取數(shù)據(jù)后將其渲染到頁面，自動(dòng)進(jìn)行刷新，原本的條目已被刪除。

4.4 查找數(shù)據(jù)

在右上角的輸入框選擇篩選的類型（如：名字、性別等），可以進(jìn)行關(guān)鍵詞搜索。

4.5 修改數(shù)據(jù)

對(duì)需要修改的數(shù)據(jù)進(jìn)行修改操作，會(huì)彈出修改項(xiàng)目的表單，該行數(shù)據(jù)的內(nèi)容已預(yù)填入表單中：

在這里我們將模型類型修改成“粘土人”，在通過字典轉(zhuǎn)換成int型數(shù)據(jù)后，向后端發(fā)送修改請(qǐng)求并拉取新數(shù)據(jù)。

4.6 上傳圖片

角色和手辦模型都對(duì)應(yīng)多張圖片，每次最多可以上傳9張?jiān)斍閳D片。

為了方便管理，圖片在管理頁面中不顯示，可以在百科中顯示。

評(píng)論管理

用戶除了發(fā)布評(píng)價(jià)，還可以對(duì)手辦進(jìn)行評(píng)論。在商品頁面，將該商品對(duì)應(yīng)的廠商以及關(guān)鍵詞以標(biāo)簽形式展示，點(diǎn)擊標(biāo)簽即可跳轉(zhuǎn)到對(duì)應(yīng)的百科頁面。

評(píng)論有兩個(gè)入口，一是商品頁面直接鏈接到該商品對(duì)應(yīng)手辦的評(píng)論區(qū)；一是手辦的百科詳情頁。

輸入評(píng)論后即可發(fā)布，將顯示時(shí)間戳、點(diǎn)贊、刪除（管理員或者自己可以刪除）按鈕。自己無法給自己的評(píng)論點(diǎn)贊，通過前端實(shí)現(xiàn)此邏輯。

時(shí)間戳將轉(zhuǎn)換為時(shí)間范圍，鼠標(biāo)浮動(dòng)時(shí)顯示具體的時(shí)間，提升用戶體驗(yàn)。