第13章農(nóng)產(chǎn)品后臺管理系統(tǒng)13.1項目分析13.2環(huán)境搭建13.3設(shè)計與實現(xiàn)13.4項目總結(jié)如何使用Vue3框架和Element-Plus組件庫等技術(shù)，構(gòu)建一個高效、易用的農(nóng)產(chǎn)品后臺管理系統(tǒng)。引言本項目是一個農(nóng)產(chǎn)品后臺管理系統(tǒng)，包括首頁、賬戶信息頁面、用戶管理頁面、商品管理頁、訂單管理頁面、物流公司管理頁面、登錄頁面以及404頁面，其中除登錄頁面與404頁面以外的其他頁面均為首頁菜單欄對應(yīng)的路由頁面。13.1項目分析項目概述能力訓(xùn)練圖項目組織結(jié)構(gòu)農(nóng)產(chǎn)品后臺管理系統(tǒng)功能頁面分析（1）首頁，主要由頭部信息欄、左側(cè)的菜單欄以及右側(cè)的歡迎模塊構(gòu)成。當用戶進入系統(tǒng)首頁時，歡迎語與歡迎圖片將會自頁面左右兩側(cè)向中間移動顯現(xiàn)。（2）賬戶信息頁面，主要由頁面頭部組件、登錄者基本信息展示區(qū)、詳細信息展示區(qū)以及登錄者信息修改按鈕組成。當單擊“修改”按鈕時，將彈出一個可修改用戶信息的模態(tài)框。（3）用戶管理頁面，主要由頁面頭部組件、批量刪除按鈕、添加按鈕以及用戶信息渲染表格構(gòu)成。在用戶信息渲染表格中，可以單擊多個用戶列表項，實現(xiàn)批量刪除用戶；也可以在每個用戶列表項的操作列中查看、編輯并刪除當前用戶列表項。（4）商品管理頁面，主要由頁面頭部組件、商品名稱搜索框、批量刪除按鈕、添加按鈕以及商品信息渲染表格構(gòu)成。當用戶在商品名稱搜索輸入框中輸入商品名稱時，商品信息渲染表格僅展示與搜索條件一致的商品。13.1.1項目概述13.1項目分析農(nóng)產(chǎn)品后臺管理系統(tǒng)功能頁面分析（5）訂單管理頁面，主要由頁面頭部組件、全部訂單、待付款訂單、待收貨訂單和待評價訂單4個嵌套路由頁面構(gòu)成。單擊訂單列表項的刪除圖標即可刪除此項訂單信息。（6）物流公司管理頁面，主要由頁面頭部組件、添加公司按鈕和物流公司信息渲染表格構(gòu)成。在每個物流公司列表項的操作列中可單擊“查看”或“編輯”按鈕，查看或編輯該物流公司的詳細信息。（7）登錄頁面，主要由頁面背景圖片、系統(tǒng)名稱和登錄信息表單構(gòu)成。輸入正確的用戶名與密碼后，單擊“登錄”按鈕即可進入農(nóng)產(chǎn)品后臺管理系統(tǒng)的首頁。（8）404頁面，主要由一張gif格式的圖片構(gòu)成，用于在路由地址錯誤時告知用戶地址錯誤或頁面不存在。13.1.1項目概述13.1項目分析本案例主要有頂部導(dǎo)航、輪播圖、立體產(chǎn)業(yè)生態(tài)服務(wù)、鋒企專欄、鋒企直播、我們服務(wù)的客戶、頁腳和客服8個模塊，每個模塊分別應(yīng)用了不同的功能來實現(xiàn)相應(yīng)的效果。鋒企優(yōu)聯(lián)首頁的能力訓(xùn)練圖如圖13.1.2能力訓(xùn)練圖13.1項目分析本項目的項目根目錄是project文件夾，agricultural文件夾下的項目結(jié)構(gòu)如圖項目代碼詳見agricultural文件包13.1.3項目組織結(jié)構(gòu)13.1項目分析13.2環(huán)境搭建VueCLI搭建項目配置Mock數(shù)據(jù)Vuex模塊化配置在計算機磁盤中選擇合適的目錄存放項目，使用VueCLI創(chuàng)建一個名為agricultural的項目，具體步驟如下所示。（1）打開DOS系統(tǒng)窗口，輸入以下命令創(chuàng)建項目。vuecreateagricultural（2）選擇Manuallyselectfeatures模式，手動選擇項目所需功能，如圖13.2.1VueCLI搭建項目13.2環(huán)境搭建（3）在步驟(2)，選中Router、Vuex并按下回車鍵后，即可選擇合適的Vue.js版本，如圖13.2.1VueCLI搭建項目13.2環(huán)境搭建（4）在步驟(3)，選中3.x版本并按下回車鍵后，即可選擇合適的路由器模式，如圖13.2.1VueCLI搭建項目13.2環(huán)境搭建（5）在步驟(4)，選擇使用history作為路由器運行模式，之后連續(xù)按Enter鍵即可生成項目，如圖13.2.1VueCLI搭建項目13.2環(huán)境搭建（6）進入agricultural目錄，執(zhí)行npminstallelement-plus--save命令，安裝ElementPlus，如圖13.2.1VueCLI搭建項目13.2環(huán)境搭建（7）在VSCode中打開agricultural項目，并在main.js文件中掛載ElementPlus。main.js的代碼13.2.1VueCLI搭建項目13.2環(huán)境搭建import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'createApp(App).use(store).use(router).use(ElementPlus).mount('#app')（1）在agricultural項目目錄下輸入npminstallmockjs--save-dev命令，安裝mockjs依賴13.2.2配置Mock數(shù)據(jù)13.2環(huán)境搭建（2）安裝完mockjs后，需要新建一個mock文件夾，并在該文件夾下新建index.js文件。在該文件中，需要引入mockjs模塊，并模擬請求接口和真實數(shù)據(jù)。mock/index.js的代碼如13.2.2配置Mock數(shù)據(jù)13.2環(huán)境搭建//引入mockjsimportMockfrom'mockjs'importaccountDatefrom'./accountDate.json'importloginMessagefrom'./loginMessage.json'//模擬請求接口//第一個參數(shù)是axios的請求地址，第二個參數(shù)是axios請求返回的真實數(shù)據(jù)Mock.mock('/account/accountDate',{data:accountDate,code:200,})Mock.mock('/login/loginMessage',{data:loginMessage,code:200,})（3）引入mockjs后，需要配置請求返回的JSON數(shù)據(jù)，以賬戶信息的Mock數(shù)據(jù)為例，演示如何配置JSON數(shù)據(jù)。mock/accountDate.json的代碼13.2.2配置Mock數(shù)據(jù)13.2環(huán)境搭建[{"circleUrl":"/3/7c/3ea6beec64369c2642b92c6726f1epng.png"}]Vuex的模塊化管理的具體步驟如下所示。（1）在store/index.js文件中，使用createStore方法創(chuàng)建一個倉庫，然后將5個模塊添加到當前模塊化結(jié)構(gòu)中，且每個模塊從各自的文件中導(dǎo)入進來的。store/index.js的代碼13.2.3Vuex模塊化配置13.2環(huán)境搭建import{createStore}from'vuex';import{accountModule}from'./modules/accountModule'import{userModule}from'./modules/userModule'import{goodsModule}from'./modules/goodsModule.js'import{orderModule}from'./modules/orderModule.js'import{logisticsModule}from'./modules/logisticsModule'exportdefaultcreateStore({state:{},getters:{},mutations:{},actions:{},modules:{//模塊化

accountModule,userModule,goodsModule,orderModule,logisticsModule}})（2）以accountModule模塊為例，展示已拆分模塊的代碼結(jié)構(gòu)。accountModule.js的代碼如13.2.3Vuex模塊化配置13.2環(huán)境搭建//accountModule.jsortconstaccountModule={namespaced:true,state:{},mutations:{},actions:{},getters:{}}13.3設(shè)計與實現(xiàn)首頁賬戶信息頁面用戶管理頁面商品管理頁面訂單管理頁面物流公司管理頁面登錄頁面404頁面路由配置1.首頁效果圖系統(tǒng)首頁由頭部信息欄、菜單欄、歡迎語和歡迎圖片構(gòu)成，其頁面效果如圖13.3.1首頁13.3設(shè)計與實現(xiàn)2.代碼實現(xiàn)農(nóng)產(chǎn)品后臺管理系統(tǒng)的首頁主要由兩個組件構(gòu)成，即HomeView組件和Welecome組件。（1）HomeView組件在HomeView組件中可以實現(xiàn)系統(tǒng)首頁的頭部信息欄模塊和菜單欄模塊。其中，頭部信息欄模塊由農(nóng)產(chǎn)品后臺管理系統(tǒng)名稱、登錄者頭像、登錄者名稱以及退出系統(tǒng)下拉菜單構(gòu)成。菜單欄模塊由菜單欄收起按鈕、首頁菜單項、賬戶信息菜單項、用戶管理菜單項、商品管理菜單項、訂單管理菜單項和物流公司管理菜單項組成。具體代碼見源碼包agricultural中/views目錄下HomeView.vue13.3.1首頁13.3設(shè)計與實現(xiàn)2.代碼實現(xiàn)（2）Welecome組件在Welcome組件中可以實現(xiàn)系統(tǒng)首頁的歡迎模塊。歡迎模塊由歡迎語與歡迎圖片構(gòu)成，當用戶進入系統(tǒng)首頁時，通過CSS過渡與動畫使歡迎語從頁面左側(cè)位移至頁面中央，使歡迎圖片從頁面右側(cè)位移至頁面中央。具體代碼見源碼包agricultural中/views目錄下Welcome.vue13.3.1首頁13.3設(shè)計與實現(xiàn)1.賬戶信息頁面效果圖賬戶信息頁面由頁面頭部組件、登錄者基本信息展示區(qū)、詳細信息展示區(qū)以及登錄者信息修改按鈕組成，其頁面效果13.3.2賬戶信息頁面13.3設(shè)計與實現(xiàn)2.代碼實現(xiàn)（1）Bread組件在Bread組件中可以實現(xiàn)顯示當前頁面名稱的頁面頭部組件，考慮到頁面頭部組件會在多個頁面中進行復(fù)用，因此決定將此部分剝離出來設(shè)計成一個可復(fù)用的組件。具體代碼見源碼包agricultural中/components目錄下Bread.vue13.3設(shè)計與實現(xiàn)13.3.2賬戶信息頁面2.代碼實現(xiàn)（2）Account組件在賬戶信息頁面的Account組件中，將向Vuex請求相關(guān)賬戶信息并將其渲染于當前頁面中。當用戶單擊Account組件中的信息修改按鈕時，使可供用戶修改當前賬戶信息的模態(tài)框自動彈出。具體代碼見源碼包agricultural中/views目錄下Account.vue13.3設(shè)計與實現(xiàn)13.3.2賬戶信息頁面1.用戶管理頁面效果圖用戶管理頁面由批量刪除按鈕、添加按鈕、用戶信息渲染表格組成。其中，用戶信息渲染表格的表頭由用戶名稱、性別、居住地、出生日期、狀態(tài)、備注和操作項構(gòu)成，其頁面效果如圖13.3.3用戶管理頁面13.3設(shè)計與實現(xiàn)2.代碼實現(xiàn)用戶管理頁面由單一的User組件構(gòu)成。在User組件中，使用ElementPlus組件庫的Table組件渲染全部用戶的對應(yīng)信息，且可以為任意表格的任意列中添加sortable屬性，實現(xiàn)以該列為基準的排序功能。具體代碼見源碼包agricultural中/views目錄下User.vue13.3設(shè)計與實現(xiàn)13.3.3用戶管理頁面1.商品管理頁面效果圖商品管理頁面由商品名稱搜索框、批量刪除按鈕、添加按鈕、商品信息渲染表格組成。其中，商品信息渲染表格的表頭由商品名稱、分類、回購率、價格、庫存、產(chǎn)地、入庫時間和操作項構(gòu)成，其頁面效果如圖13.3.4商品管理頁面13.3設(shè)計與實現(xiàn)2.代碼實現(xiàn)商品管理頁面頁面由單一的Goods組件構(gòu)成。在Goods組件中，僅使用ElementPlus組件庫的Table組件渲染了商品的部分參數(shù)信息。當用戶單擊“”按鈕時，即可查看對應(yīng)商品的全部參數(shù)信息，當用戶單擊“”按鈕時，即可編輯對應(yīng)商品的全部參數(shù)信息具體代碼見源碼包agricultural中/views目錄下Goods.vue13.3設(shè)計與實現(xiàn)13.3.4商品管理頁面1.訂單管理頁面效果圖訂單管理頁面由全部訂單、待付款訂單、代發(fā)貨訂單及待評價訂單組成，其頁面效果13.3.5訂單管理頁面13.3設(shè)計與實現(xiàn)2.代碼實現(xiàn)為實現(xiàn)訂單管理頁面內(nèi)的訂單切換功能，首先需要創(chuàng)建4個名為AllOrders、toPayOrder、toReceipt、toEvaluated的路由組件，分別用于渲染全部訂單信息、待支付的訂單信息、待發(fā)貨的訂單信息、待評價的訂單信息。其中，AllOrders路由組件需要引用并注冊其他3個路由組件，通過代碼復(fù)用實現(xiàn)全部訂單信息的渲染。最后，需要創(chuàng)建一個名為Order的父組件用于承載上述4個路由組件。具體代碼見源碼包agricultural中/views/Order目錄下AllOrders.vue、toPayOrder.vue、toReceipt.vue、toEvaluated.vue、Order.vue13.3設(shè)計與實現(xiàn)13.3.5訂單管理頁面1.物流公司管理頁面效果圖物流公司管理頁面由添加公司按鈕和物流公司信息渲染表格構(gòu)成構(gòu)成，其頁面效果13.3.6物流公司管理頁面13.3設(shè)計與實現(xiàn)2.代碼實現(xiàn)物流公司管理頁面的頁面布局可分為兩部分，即頭部功能區(qū)與列表渲染區(qū)。為實現(xiàn)該頁面，需要創(chuàng)建一個Logistics組件承載頭部功能，一個LogisticsList組件承載列表渲染功能以及一個名為Logistics的父組件用于引用上述兩個組件。具體代碼見源碼包agricultural中/views/Logistics目錄下ListHeader.vue、LogisticsList.vue、Logistics.vue13.3設(shè)計與實現(xiàn)13.3.6物流公司管理頁面1.登錄頁面效果圖登錄頁面包括背景圖片、系統(tǒng)名稱、用戶名單行文本輸入框、密碼單行文本輸入框、登錄按鈕以及信息重置按鈕等元素，其頁面效果13.3.7登錄頁面13.3設(shè)計與實現(xiàn)2.代碼實現(xiàn)在LoginView組件中，當用戶輸入合法的賬戶信息時，單擊“登錄”按鈕即可進入農(nóng)產(chǎn)品后臺管理系統(tǒng)首頁。若輸入錯誤的賬戶信息則提示用戶“賬戶名或登錄密碼不正確”，