《Vue.js前端開(kāi)發(fā)實(shí)戰(zhàn)（第2版）》第8章項(xiàng)目實(shí)戰(zhàn)——“微商城”前后臺(tái)開(kāi)發(fā)學(xué)習(xí)目標(biāo)/Target

熟悉項(xiàng)目的前臺(tái)頁(yè)面效果，能夠說(shuō)出前臺(tái)項(xiàng)目包含的頁(yè)面和主要功能熟悉項(xiàng)目的后臺(tái)頁(yè)面效果，能夠說(shuō)出后臺(tái)項(xiàng)目包含的頁(yè)面和主要功能掌握項(xiàng)目的具體實(shí)現(xiàn)，能夠獨(dú)立完成項(xiàng)目各個(gè)頁(yè)面的編寫(xiě)章節(jié)概述/Summary隨著移動(dòng)通信技術(shù)和互聯(lián)網(wǎng)行業(yè)技術(shù)的發(fā)展，移動(dòng)電子商務(wù)的應(yīng)用越來(lái)越廣泛，移動(dòng)端訂單數(shù)量占比很大，表明移動(dòng)電子商務(wù)平臺(tái)有巨大的發(fā)展空間和潛力。“微商城”項(xiàng)目分為前臺(tái)和后臺(tái)，前臺(tái)是一個(gè)電子商務(wù)移動(dòng)端網(wǎng)站，用于展示商品，用戶(hù)可以進(jìn)入網(wǎng)站瀏覽商品并將需要購(gòu)買(mǎi)的商品添加到購(gòu)物車(chē)中；后臺(tái)是一個(gè)管理系統(tǒng)，商家可以通過(guò)該系統(tǒng)實(shí)現(xiàn)對(duì)商品的分類(lèi)、查詢(xún)、添加、編輯、刪除以及對(duì)個(gè)人信息的修改。本章將對(duì)“微商城”前后臺(tái)開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)進(jìn)行講解。目錄/Contents8.18.2項(xiàng)目分析項(xiàng)目開(kāi)發(fā)說(shuō)明項(xiàng)目分析8.1

先定一個(gè)小目標(biāo)！熟悉項(xiàng)目的前臺(tái)頁(yè)面效果，能夠說(shuō)出前臺(tái)項(xiàng)目包含的頁(yè)面和主要功能8.1.1項(xiàng)目前臺(tái)分析“微商城”前臺(tái)網(wǎng)站主要以適配移動(dòng)設(shè)備的頁(yè)面效果為主，可使用Chrome瀏覽器的開(kāi)發(fā)者工具，測(cè)試頁(yè)面在移動(dòng)端模擬環(huán)境下的頁(yè)面效果。“微商城”網(wǎng)站采用Vant組件庫(kù)結(jié)合Vue3實(shí)現(xiàn)，主要包括“首頁(yè)”“分類(lèi)”“商品詳情”“消息”“購(gòu)物車(chē)”“我的”等頁(yè)面。下面將對(duì)這些頁(yè)面分別進(jìn)行展示。8.1.1項(xiàng)目前臺(tái)分析1.首頁(yè)8.1.1項(xiàng)目前臺(tái)分析首頁(yè)上半部分首頁(yè)中間部分首頁(yè)下半部分8.1.1項(xiàng)目前臺(tái)分析當(dāng)用戶(hù)未在搜索框中輸入內(nèi)容時(shí)，會(huì)默認(rèn)顯示“請(qǐng)輸入搜索關(guān)鍵字”；當(dāng)用戶(hù)在搜索框中輸入內(nèi)容并獲得焦點(diǎn)后，此時(shí)搜索框中會(huì)顯示一個(gè)按鈕，如果用戶(hù)想要搜索內(nèi)容，則可以單擊按鈕；如果用戶(hù)想要清空輸入的內(nèi)容，則可以單擊按鈕。未輸入內(nèi)容時(shí)的搜索框狀態(tài)輸入內(nèi)容時(shí)的搜索框狀態(tài)“微商城”首頁(yè)分析首頁(yè)從上到下分別是搜索框、輪播圖、功能按鈕區(qū)、商品信息展示區(qū)、底部導(dǎo)航欄。搜索框：展示用戶(hù)搜索的信息。輪播圖：展示一組推廣的商品圖片。按鈕功能區(qū)：展示功能內(nèi)容。商品信息展示區(qū)：展示各種商品信息，例如每周上新的商品、熱銷(xiāo)商品等。底部導(dǎo)航欄：展示當(dāng)前選中標(biāo)簽的名稱(chēng)。8.1.1項(xiàng)目前臺(tái)分析2.分類(lèi)8.1.1項(xiàng)目前臺(tái)分析“微商城”分類(lèi)分析分類(lèi)頁(yè)面分為左側(cè)菜單欄和右側(cè)商品列表。單擊左側(cè)菜單欄，右側(cè)商品列表會(huì)滾動(dòng)到相應(yīng)的分類(lèi)；滑動(dòng)右側(cè)商品列表，左側(cè)菜單欄的樣式會(huì)相應(yīng)改變。8.1.1項(xiàng)目前臺(tái)分析滾動(dòng)效果在這里使用better-scroll插件實(shí)現(xiàn)，核心借鑒了iscroll的實(shí)現(xiàn)原理，相應(yīng)的API設(shè)計(jì)基本兼容iscroll，但是在iscroll基礎(chǔ)上又做了擴(kuò)展和性能優(yōu)化。3.商品詳情8.1.1項(xiàng)目前臺(tái)分析商品詳情上半部分商品詳情下半部分“微商城”商品詳情頁(yè)分析單擊分類(lèi)頁(yè)面中的商品，會(huì)跳轉(zhuǎn)到相應(yīng)商品的詳情，商品詳情頁(yè)介紹如下。頂部通過(guò)輪播圖的形式顯示商品的圖片；輪播圖下面顯示商品的標(biāo)題、價(jià)格、運(yùn)費(fèi)和剩余庫(kù)存等；單擊頂部的返回按鈕

會(huì)跳轉(zhuǎn)到分類(lèi)頁(yè)面；底部顯示了“客服”按鈕、“購(gòu)物車(chē)”按鈕、“加入購(gòu)物車(chē)”按鈕和“立即購(gòu)買(mǎi)”按鈕；通過(guò)單擊“加入購(gòu)物車(chē)”按鈕可以完成商品加入購(gòu)物車(chē)的操作。單擊“購(gòu)物車(chē)”可以跳轉(zhuǎn)到購(gòu)物車(chē)頁(yè)面。8.1.1項(xiàng)目前臺(tái)分析4.消息8.1.1項(xiàng)目前臺(tái)分析“微商城”消息分析消息頁(yè)面用于展示已設(shè)置接收消息的群組列表，例如店鋪消息、消息號(hào)內(nèi)容、訂閱號(hào)消息等，可以方便查找用戶(hù)與客服的聊天記錄。8.1.1項(xiàng)目前臺(tái)分析5.購(gòu)物車(chē)8.1.1項(xiàng)目前臺(tái)分析“微商城”購(gòu)物車(chē)分析購(gòu)物車(chē)頁(yè)面介紹如下。購(gòu)物車(chē)頁(yè)面單擊“刪除”按鈕，可以把商品從購(gòu)物車(chē)中刪除；單擊“+”按鈕可以將當(dāng)前商品的數(shù)量加1；單擊“-”按鈕可以將當(dāng)前商品的數(shù)量減1；勾選商品前面的復(fù)選框，可以選中當(dāng)前商品，并會(huì)自動(dòng)合計(jì)已勾選商品的金額，顯示在“合計(jì)”處，將已勾選商品的數(shù)量顯示在“結(jié)算”處。8.1.1項(xiàng)目前臺(tái)分析6.我的8.1.1項(xiàng)目前臺(tái)分析已登錄狀態(tài)未登錄狀態(tài)“微商城”我的分析我的頁(yè)面中已登錄頁(yè)面介紹如下。顯示當(dāng)前登錄的用戶(hù)名和“退出”按鈕；單擊“退出”按鈕，就會(huì)退出登錄；顯示“待付款”“待收貨”“待評(píng)價(jià)”“退貨/售后”鏈接，單擊鏈接會(huì)查看相應(yīng)的信息；單擊“全部訂單”會(huì)跳轉(zhuǎn)到訂單頁(yè)，查看全部的訂單；單擊“我的積分”會(huì)跳轉(zhuǎn)到積分頁(yè)，查看賬號(hào)中的積分列表；單擊“我的優(yōu)惠券”會(huì)跳轉(zhuǎn)到優(yōu)惠券頁(yè)，查看所有的優(yōu)惠券；單擊“我的紅包”會(huì)跳轉(zhuǎn)到紅包頁(yè)，查看所有的紅包。8.1.1項(xiàng)目前臺(tái)分析

先定一個(gè)小目標(biāo)！熟悉項(xiàng)目的后臺(tái)頁(yè)面效果，能夠說(shuō)出后臺(tái)項(xiàng)目包含的頁(yè)面和主要功能8.1.2項(xiàng)目后臺(tái)分析“微商城”后臺(tái)管理系統(tǒng)中主要包含登錄頁(yè)、首頁(yè)、分類(lèi)管理頁(yè)、商品管理頁(yè)、個(gè)人中心頁(yè)，接下來(lái)分別對(duì)這些頁(yè)面進(jìn)行展示。8.1.2項(xiàng)目后臺(tái)分析1.登錄頁(yè)8.1.2項(xiàng)目后臺(tái)分析“微商城”登錄頁(yè)分析登錄頁(yè)介紹如下。在用戶(hù)登錄表單中，輸入正確的用戶(hù)名和密碼；輸入完成后，單擊“登錄”按鈕即可登錄；單擊“重置”按鈕，會(huì)清空用戶(hù)名和密碼輸入框中輸入的信息。8.1.2項(xiàng)目后臺(tái)分析2.首頁(yè)8.1.2項(xiàng)目后臺(tái)分析8.1.2項(xiàng)目后臺(tái)分析首頁(yè)分為頭部和主體區(qū)域。頭部區(qū)域從左到右分別是導(dǎo)航欄標(biāo)題和用戶(hù)信息。當(dāng)鼠標(biāo)指針移動(dòng)到頭像區(qū)域時(shí)，會(huì)展示下拉選項(xiàng)如下圖所示。3.分類(lèi)管理頁(yè)8.1.2項(xiàng)目后臺(tái)分析“微商城”分類(lèi)管理頁(yè)分析分類(lèi)管理頁(yè)使用表格展示關(guān)于分類(lèi)的相關(guān)信息，包含分類(lèi)名稱(chēng)、分類(lèi)級(jí)別、分類(lèi)編號(hào)和分類(lèi)圖片，介紹如下。單擊頁(yè)面中的“編輯”按鈕可以對(duì)該行分類(lèi)信息進(jìn)行編輯操作；單擊頁(yè)面中的“刪除”按鈕可以對(duì)該行分類(lèi)信息進(jìn)行刪除操作；單擊頁(yè)面上方“新增分類(lèi)”按鈕，可以新增分類(lèi)信息。8.1.2項(xiàng)目后臺(tái)分析8.1.2項(xiàng)目后臺(tái)分析單擊頁(yè)面上方“新增分類(lèi)”按鈕，可以新增分類(lèi)信息，新增分類(lèi)頁(yè)如下圖所示。4.商品管理頁(yè)8.1.2項(xiàng)目后臺(tái)分析“微商城”商品管理頁(yè)分析商品管理頁(yè)使用表格展示關(guān)于商品的相關(guān)信息，包含商品編號(hào)、商品名稱(chēng)、商品價(jià)格、商品分類(lèi)、商品庫(kù)存、商品簡(jiǎn)介、商品圖片等，介紹如下。單擊頁(yè)面中的“編輯”按鈕可以對(duì)該行商品信息進(jìn)行編輯操作；單擊頁(yè)面中的“刪除”按鈕可以對(duì)該行商品信息進(jìn)行刪除操作；單擊頁(yè)面上方的“新增商品”按鈕，可以新增商品信息。8.1.2項(xiàng)目后臺(tái)分析8.1.2項(xiàng)目后臺(tái)分析單擊頁(yè)面上方“新增商品”按鈕，可以新增商品信息，新增商品頁(yè)如下圖所示。“微商城”新增商品頁(yè)分析新增商品頁(yè)介紹如下。用戶(hù)在新增商品時(shí)可以添加商品名稱(chēng)、分類(lèi)名稱(chēng)、商品價(jià)格、商品圖片、商品相冊(cè)、商品庫(kù)存、商品規(guī)格、商品簡(jiǎn)介等信息。單擊“選擇圖片”按鈕，可以進(jìn)行商品圖片的上傳操作。填寫(xiě)完商品信息后，單擊“新增”按鈕，可以進(jìn)行商品信息的添加操作。8.1.2項(xiàng)目后臺(tái)分析5.個(gè)人中心頁(yè)8.1.2項(xiàng)目后臺(tái)分析“微商城”個(gè)人中心頁(yè)分析個(gè)人中心頁(yè)包含左側(cè)和右側(cè)兩個(gè)模板，介紹如下。左側(cè)模塊：用于對(duì)用戶(hù)頭像信息進(jìn)行修改。單擊“選擇頭像”按鈕可以對(duì)頭像進(jìn)行更改；單擊“上傳頭像”可以將頭像上傳到服務(wù)器。右側(cè)模塊：用于對(duì)個(gè)人賬戶(hù)信息進(jìn)行修改，可對(duì)用戶(hù)名和密碼進(jìn)行修改。單擊“提交”按鈕可以完成對(duì)用戶(hù)名和密碼的修改；單擊“重置”按鈕，可以對(duì)頁(yè)面中輸入的要修改的用戶(hù)名和密碼進(jìn)行重置。8.1.2項(xiàng)目后臺(tái)分析項(xiàng)目開(kāi)發(fā)說(shuō)明8.2

先定一個(gè)小目標(biāo)！掌握項(xiàng)目的具體實(shí)現(xiàn)，能夠獨(dú)立完成項(xiàng)目各個(gè)頁(yè)面的編寫(xiě)項(xiàng)目開(kāi)發(fā)說(shuō)明為了方便讀者練習(xí)本項(xiàng)目，在本書(shū)的配套源代碼中提供了完整的項(xiàng)目代碼和開(kāi)發(fā)文檔，開(kāi)發(fā)文檔中有詳細(xì)的操作步驟，讀者可通過(guò)開(kāi)發(fā)文檔進(jìn)行學(xué)習(xí)。為了方便讀者學(xué)習(xí)，下面對(duì)配套源代碼的目錄結(jié)構(gòu)進(jìn)行介紹。chapter08：項(xiàng)目文件夾，用于存放項(xiàng)目前臺(tái)文件、后臺(tái)文件。chapter08\my-shop：項(xiàng)目前臺(tái)根目錄，用于存放項(xiàng)目前臺(tái)源代碼。chapter08\shop-system：項(xiàng)目后臺(tái)根目錄，用于存放項(xiàng)目后臺(tái)源代碼。項(xiàng)目開(kāi)發(fā)說(shuō)明項(xiàng)目開(kāi)發(fā)說(shuō)明在命令提示符中切換到chapter08\my-shop目錄，執(zhí)行如下命令，安裝項(xiàng)目的全部依賴(lài)。1.運(yùn)行前臺(tái)項(xiàng)目啟動(dòng)項(xiàng)目的命令如下。項(xiàng)目啟動(dòng)后，會(huì)默認(rèn)開(kāi)啟一個(gè)本地服務(wù)。根據(jù)命令提示符中顯示的URL地址，在瀏覽器中訪問(wèn)，即可查看項(xiàng)目頁(yè)面效果。yarnyarndev項(xiàng)目開(kāi)發(fā)說(shuō)明在命令提示符中切換到chapter08\shop-system目錄，執(zhí)行如下命令，安裝項(xiàng)目的全部依賴(lài)。2.運(yùn)行后臺(tái)項(xiàng)目啟