第13章 電子商務(wù)平臺(tái)的前端設(shè)計(jì)與實(shí)現(xiàn)

Vue.js3從入門到實(shí)戰(zhàn)（微課視頻版）第13章電子商務(wù)平臺(tái)的前端設(shè)計(jì)與實(shí)現(xiàn)學(xué)習(xí)目的與要求本章通過一個(gè)小型電子商務(wù)平臺(tái)的前端界面設(shè)計(jì)，講述如何使用VueCLI、Vite等前端開發(fā)與構(gòu)建工具開發(fā)一個(gè)Vue前端應(yīng)用，其中主要涉及的技術(shù)包括Vue、VueRouter、ElementPlus、webpack、Vite、WebStorage等前端技術(shù)。通過本章的學(xué)習(xí)，掌握基于VueCLI、Vite等前端開發(fā)與構(gòu)建工具的Vue前端應(yīng)用開發(fā)的流程、方法以及技術(shù)棧。《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社目錄13.1系統(tǒng)設(shè)計(jì)13.2實(shí)現(xiàn)技術(shù)13.3系統(tǒng)管理13.4后臺(tái)管理子系統(tǒng)實(shí)現(xiàn)13.5電子商務(wù)子系統(tǒng)實(shí)現(xiàn)《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.1.1系統(tǒng)功能需求《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社1．后臺(tái)管理子系統(tǒng)后臺(tái)管理子系統(tǒng)要求管理員登錄成功后，才能對(duì)商品進(jìn)行管理，包括添加商品、查詢商品、修改商品以及刪除商品。除商品管理外，管理員還包括商品類型管理、用戶訂單管理、銷量統(tǒng)計(jì)、訂單統(tǒng)計(jì)等功能。2．電子商務(wù)子系統(tǒng)1）非注冊(cè)用戶非注冊(cè)用戶或未登錄用戶具有的功能如下：瀏覽首頁、查看商品詳情以及搜索商品的功能。2）用戶成功登錄的用戶除具有未登錄用戶具有的功能外，還具有購買商品、查看購物車、收藏商品、查看訂單、查看收藏以及查看用戶個(gè)人信息的功能。13.1.2系統(tǒng)模塊劃分《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.1.2系統(tǒng)模塊劃分《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社目錄13.1系統(tǒng)設(shè)計(jì)13.2實(shí)現(xiàn)技術(shù)13.3系統(tǒng)管理13.4后臺(tái)管理子系統(tǒng)實(shí)現(xiàn)13.5電子商務(wù)子系統(tǒng)實(shí)現(xiàn)《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.2.1使用Vite構(gòu)建后臺(tái)管理子系統(tǒng)《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社Vite（法語意為“快速的”，發(fā)音/vit/，發(fā)音同“veet”）是一種新型前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗(yàn)。Vite意在提供開箱即用的配置，同時(shí)它的插件API和JavaScriptAPI帶來了高度的可擴(kuò)展性，并有完整的類型支持。Vite主要由兩部分組成： 一個(gè)開發(fā)服務(wù)器：它基于原生ES模塊提供了豐富的內(nèi)建功能，速度快、模塊熱更新。 一套構(gòu)建指令：它使用Rollup

打包代碼，并且它是預(yù)配置的，可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過的靜態(tài)資源。13.2.1使用Vite構(gòu)建后臺(tái)管理子系統(tǒng)《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社Vite通過在一開始將應(yīng)用中的模塊區(qū)分為依賴和源碼兩類，改進(jìn)了開發(fā)服務(wù)器啟動(dòng)時(shí)間。

依賴：大多為在開發(fā)時(shí)不會(huì)變動(dòng)的純JavaScript。一些較大的依賴（例如有上百個(gè)模塊的組件庫）處理的代價(jià)也很高。依賴也通常會(huì)存在多種模塊化格式（例如ESM

或者CommonJS）。Vite將會(huì)使用Esbuild預(yù)構(gòu)建依賴。Esbuild使用Go

編寫，并且比以JavaScript

編寫的打包器預(yù)構(gòu)建依賴快10-100倍。

源碼：通常包含一些并非直接是JavaScript

的文件，需要轉(zhuǎn)換（例如JSX，CSS

或者Vue/Svelte組件），時(shí)常會(huì)被編輯。同時(shí)，并不是所有的源碼都需要同時(shí)被加載（例如基于路由拆分的代碼模塊）。Vite以原生ESM

方式提供源碼。這實(shí)際上是讓瀏覽器接管了打包程序的部分工作，Vite只需要在瀏覽器請(qǐng)求源碼時(shí)進(jìn)行轉(zhuǎn)換并按需提供源碼。根據(jù)情景動(dòng)態(tài)導(dǎo)入代碼，即只在當(dāng)前屏幕上實(shí)際使用時(shí)才會(huì)被處理。1．安裝Vite《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社打開命令行窗口，使用npmivite-g安裝Vite。2．初始化ebusiness-admin《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在命令行窗口，使用npminitviteebusiness-admin命令初始化項(xiàng)目ebusiness-admin。3．安裝項(xiàng)目依賴《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在命令行窗口，首先使用cdebusiness-admin命令進(jìn)入ebusiness-admin目錄，然后使用npminstall命令安裝項(xiàng)目依賴。4．啟動(dòng)服務(wù)器，運(yùn)行項(xiàng)目《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在命令行窗口，首先使用npmrundev命令啟動(dòng)服務(wù)器；然后在瀏覽器地址欄打開:5173運(yùn)行項(xiàng)目。13.2.2使用VueCLI構(gòu)建電子商務(wù)子系統(tǒng)《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社參考10.2.4節(jié)，使用VueCLI構(gòu)建基于VueRouter的Vue.js項(xiàng)目ebusiness-before（電子商務(wù)子系統(tǒng)）。目錄13.1系統(tǒng)設(shè)計(jì)13.2實(shí)現(xiàn)技術(shù)13.3系統(tǒng)管理13.4后臺(tái)管理子系統(tǒng)實(shí)現(xiàn)13.5電子商務(wù)子系統(tǒng)實(shí)現(xiàn)《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.3.1安裝ElementPlus《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社首先使用VSCode分別打開13.2節(jié)構(gòu)建的兩個(gè)Vue.js項(xiàng)目ebusiness-admin和ebusiness-before。然后在Terminal

終端，使用命令npminstallelement-plus–save安裝ElementPlus，并使用npminstall@element-plus/icons-vue命令安裝ElementPlus的Icon

圖標(biāo)。13.3.2安裝ECharts《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫，提供直觀、生動(dòng)、可交互、可個(gè)性化定制的數(shù)據(jù)可視化圖表。ECharts最初由百度團(tuán)隊(duì)開源，并于2018年初捐贈(zèng)給Apache基金會(huì)，成為ASF孵化級(jí)項(xiàng)目。在后臺(tái)管理子系統(tǒng)ebusiness-admin中，使用ECharts對(duì)銷量及訂單進(jìn)行統(tǒng)計(jì)并可視化展示。所以，首先使用VSCode打開Vue.js項(xiàng)目ebusiness-admin，然后在Terminal

終端使用命令npminstallecharts--save安裝ECharts。13.3.3安裝VueRouter《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在本小節(jié)，僅需要使用VSCode打開使用Vite構(gòu)建的Vue.js項(xiàng)目ebusiness-admin，然后在Terminal

終端使用命令npminstallvue-router安裝VueRouter。13.3.4配置文件《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社本小節(jié)將對(duì)13.2節(jié)創(chuàng)建的兩個(gè)Vue.js項(xiàng)目ebusiness-admin

和ebusiness-before

進(jìn)行配置，同時(shí)對(duì)兩個(gè)Vue.js項(xiàng)目的ElementPlus以及VueRouter進(jìn)行相關(guān)配置。1．配置路由《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在項(xiàng)目ebusiness-admin

的src目錄下，創(chuàng)建router/index.js文件，并在該文件中配置路由。在項(xiàng)目ebusiness-before

的src/router/index.js

文件中，配置路由。2．配置入口文件main.js《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在兩個(gè)Vue.js項(xiàng)目ebusiness-admin和ebusiness-before

中，入口文件main.js的配置是一樣的，都是引入ElementPlus、VueRouter以及注冊(cè)圖標(biāo)等相關(guān)配置。3．項(xiàng)目配置《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在項(xiàng)目ebusiness-admin的配置文件vite.config.js

中，配置路徑別名、端口號(hào)等。在項(xiàng)目ebusiness-before的配置文件vue.config.js中，配置路徑別名、端口號(hào)等。目錄13.1系統(tǒng)設(shè)計(jì)13.2實(shí)現(xiàn)技術(shù)13.3系統(tǒng)管理13.4后臺(tái)管理子系統(tǒng)實(shí)現(xiàn)13.5電子商務(wù)子系統(tǒng)實(shí)現(xiàn)《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.4后臺(tái)管理子系統(tǒng)實(shí)現(xiàn)《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社管理員登錄成功后，可以對(duì)商品、商品類型以及訂單進(jìn)行管理，還可以對(duì)商品銷量、訂單進(jìn)行統(tǒng)計(jì)，并可視化顯示。13.4.1管理員登錄界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社管理員登錄界面LoginView.vue

主要通過ElementPlus表單組件el-form中的輸入框組件el-input和按鈕組件el-button進(jìn)行界面設(shè)計(jì)。當(dāng)單擊“登錄”按鈕時(shí)，執(zhí)行l(wèi)ogin(loginForm)完成表單驗(yàn)證。管理員登錄成功后，將用戶名保存到sessionStorage中，以便后續(xù)權(quán)限驗(yàn)證使用。13.4.2導(dǎo)航欄界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在主界面的左側(cè)有導(dǎo)航菜單組件SidebarCom.vue，頂部有頭部組件HeaderCom.vue。在主界面組件HomeView.vue

中引入導(dǎo)航菜單組件SidebarCom.vue和頭部組件HeaderCom.vue。13.4.3類型管理界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社管理員登錄成功后，可以對(duì)商品類型進(jìn)行管理，包括新增類型、編輯類型、刪除類型、查詢類型等功能。13.4.4商品管理界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社管理員登錄成功后，可以對(duì)商品進(jìn)行管理，包括新增商品、編輯商品、刪除商品、查詢商品等功能。13.4.4商品管理界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.4.4商品管理界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.4.4商品管理界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.4.4商品管理界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.4.5訂單管理界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社管理員登錄成功后，可以對(duì)訂單進(jìn)行管理，包括訂單查詢、訂單詳情、刪除訂單等功能。13.4.5訂單管理界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.4.5訂單管理界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.4.6銷量統(tǒng)計(jì)界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.4.6銷量統(tǒng)計(jì)界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.4.7訂單統(tǒng)計(jì)界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社目錄13.1系統(tǒng)設(shè)計(jì)13.2實(shí)現(xiàn)技術(shù)13.3系統(tǒng)管理13.4后臺(tái)管理子系統(tǒng)實(shí)現(xiàn)13.5電子商務(wù)子系統(tǒng)實(shí)現(xiàn)《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社13.5電子商務(wù)子系統(tǒng)實(shí)現(xiàn)《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社游客具有瀏覽首頁、查看商品詳情和搜索商品等功能。成功登錄的用戶除具有游客具有的功能外，還具有購買商品、查看購物車、收藏商品、查看我的訂單以及用戶信息的功能。13.5.1導(dǎo)航欄及搜索界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在導(dǎo)航欄及搜索界面HeaderView.vue中，使用el-carousel

在特定區(qū)域，循環(huán)播放廣告商品圖片；使用defineEmits聲明向父組件拋出的自定義事件，并根據(jù)自定義事件將商品類型ID和搜索框輸入信息傳遞給父組件。13.5.2首頁界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在首頁界面IndexView.vue中，引入導(dǎo)航欄及搜索界面組件HeaderView，并根據(jù)子組件HeaderView傳遞過來的商品類型ID或搜索框輸入信息，顯示相關(guān)商品信息。單擊商品類型（如“水果”），首頁界面將僅顯示該類型下的商品信息；在搜索輸入框中，輸入“XXX”后，單擊“搜索”按鈕，首頁界面將僅顯示商品名稱包含“XXX”的商品信息。13.5.3用戶注冊(cè)界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在首頁界面中，單擊“注冊(cè)”超鏈接，調(diào)用register函數(shù)，在register函數(shù)中通過router.push()方法，打開用戶注冊(cè)界面RegisterView.vue。13.5.4用戶登錄界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在首頁界面中，單擊“登錄”超鏈接，調(diào)用login函數(shù)，在login函數(shù)中通過router.push()方法，打開用戶登錄界面LoginView.vue。登錄成功，將用戶信息保存到sessionStorage對(duì)象中，以便鑒權(quán)使用。13.5.5商品詳情界面《Vue.js3從入門到實(shí)戰(zhàn)》陳恒主編，清華大學(xué)出版社在首頁