Vue.js3.0從入門到實踐教學設計課程名稱：Vue.js3.0從入門到實踐授課年級：授課學期：教師姓名：年月日課程名稱第13章 農(nóng)產(chǎn)品后臺管理系統(tǒng)計劃學時6內(nèi)容分析在數(shù)字化風潮席卷之下，計算機科技已經(jīng)深深地滲透到社會的各個行業(yè)和領域，農(nóng)業(yè)領域也不例外。從農(nóng)產(chǎn)品的生產(chǎn)到流通，再到管理，計算機技術的運用越來越廣泛。為了幫助廣大的讀者更好地理解和應用Vue3技術，我們特別策劃了這一章節(jié)，我們將通過一個以農(nóng)產(chǎn)品為主題的綜合項目，詳細解讀如何使用Vue3框架和Element-Plus組件庫等科技，構建一個高效易用的農(nóng)產(chǎn)品后臺管理系統(tǒng)。教學目標與教學要求【知識目標】掌握農(nóng)產(chǎn)品后臺管理系統(tǒng)的環(huán)境搭建掌握農(nóng)產(chǎn)品后臺管理系統(tǒng)中各個頁面的設計與實現(xiàn)【技能目標】能夠正確搭建農(nóng)產(chǎn)品后臺管理系統(tǒng)的環(huán)境能夠正確設計與實現(xiàn)農(nóng)產(chǎn)品后臺管理系統(tǒng)【育人目標】培養(yǎng)學員在遇到問題時能夠獨立思考和查找解決方案的能力。強調(diào)代碼審查的重要性，促進團隊成員之間的知識分享和互相學習。教學重點環(huán)境搭建首頁賬戶信息頁面用戶管理頁面商品管理頁面訂單管理頁面物流公司管理頁面登錄頁面404頁面路由配置教學難點訂單管理頁面物流公司管理頁面教學方式課堂講解配合PPT演示教學過程第一、二課時（項目分析、環(huán)境搭建、首頁、賬戶信息頁面、用戶管理頁面）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學生上節(jié)練習中的問題，學生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的項目分析、環(huán)境搭建、首頁、賬戶信息頁面、用戶管理頁面等內(nèi)容。明確學習目標了解項目分析內(nèi)容掌握項目環(huán)境的搭建方式掌握首頁的實現(xiàn)方式掌握賬戶信息頁面的實現(xiàn)方式掌握用戶管理頁面的實現(xiàn)方式知識講解知識點1-項目分析項目概述本項目是一個農(nóng)產(chǎn)品后臺管理系統(tǒng)，包括首頁、賬戶信息頁面、用戶管理頁面、商品管理頁、訂單管理頁面、物流公司管理頁面、登錄頁面以及404頁面，其中除登錄頁面與404頁面以外的其他頁面均為首頁菜單欄對應的路由頁面。能力訓練圖鋒企優(yōu)聯(lián)首頁的能力訓練圖如下圖所示。項目組織結構項目組織結構如下圖所示。知識點2-環(huán)境搭建VueCLI搭建項目（1）打開DOS系統(tǒng)窗口，輸入以下命令創(chuàng)建項目。vuecreateagricultural（2）選擇Manuallyselectfeatures模式，手動選擇項目所需功能。（3）選擇合適的Vue.js版本。（4）選擇合適的路由器模式。（5）選擇使用history作為路由器運行模式。（6）執(zhí)行npminstallelement-plus--save命令，安裝ElementPlus。（7）在main.js文件中掛載ElementPlus。配置Mock數(shù)據(jù)輸入npminstallmockjs--save-dev命令，安裝mockjs依賴。引入mockjs模塊，并模擬請求接口和真實數(shù)據(jù)。配置請求返回的JSON數(shù)據(jù)。Vuex模塊化配置Vuex的模塊化管理的具體步驟如下所示。在store/index.js文件中，使用createStore方法創(chuàng)建一個倉庫，然后將5個模塊添加到當前模塊化結構中，且每個模塊從各自的文件中導入進來的。展示已拆分模塊的代碼結構。知識點3-首頁首頁效果圖如下圖所示。農(nóng)產(chǎn)品后臺管理系統(tǒng)的首頁主要由兩個組件構成，即HomeView組件和Welcome組件。（1）HomeView組件在HomeView組件中可以實現(xiàn)系統(tǒng)首頁的頭部信息欄模塊和菜單欄模塊。（2）Welcome組件在Welcome組件中可以實現(xiàn)系統(tǒng)首頁的歡迎模塊。實現(xiàn)首頁的代碼可參考教學PPT或教材。知識點4-賬戶信息頁面在農(nóng)產(chǎn)后臺管理系統(tǒng)中，賬戶信息頁面獲取當前登錄者信息的主要窗口。本節(jié)將圍繞賬戶信息頁面的效果圖與代碼實現(xiàn)進行介紹。賬戶信息頁面效果圖如下圖所示。賬戶信息頁面主要由兩個組件構成，即Bread組件和Account組件。Bread組件Account組件實現(xiàn)賬戶信息頁面的代碼可參考教學PPT或教材。知識點5-用戶管理頁面用戶管理頁面效果圖如下圖所示。用戶管理頁面由單一的User組件構成。在User組件中，使用ElementPlus組件庫的Table組件渲染全部用戶的對應信息，且可以為任意表格的任意列中添加sortable屬性，實現(xiàn)以該列為基準的排序功能。在views目錄下新建User.vue，具體代碼可參考教學PPT或教材。知識鞏固與作業(yè)（1）回顧上課前的學習目標，對本節(jié)課知識點進行總結。（2）老師布置相關作業(yè)進行練習。第三、四課時（商品管理頁面、訂單管理頁面、物流公司管理頁面、登錄頁面、404頁面、路由配置）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學生上節(jié)練習中的問題，學生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的商品管理頁面、訂單管理頁面、物流公司管理頁面、登錄頁面、404頁面、路由配置等內(nèi)容。明確學習目標掌握商品管理頁面的實現(xiàn)方式掌握訂單管理頁面的實現(xiàn)方式掌握物流公司管理頁面的實現(xiàn)方式掌握登錄頁面、404頁面和路由配置的實現(xiàn)方式知識講解知識點1-商品管理頁面商品管理頁面效果圖如下圖所示。商品管理頁面頁面由單一的Goods組件構成。在Goods組件中，僅使用ElementPlus組件庫的Table組件渲染了商品的部分參數(shù)信息。當用戶單擊“”按鈕時，即可查看對應商品的全部參數(shù)信息，當用戶單擊“”按鈕時，即可編輯對應商品的全部參數(shù)信息。實現(xiàn)商品管理頁面的代碼可參考教學PPT或教材。知識點2-訂單管理頁面訂單管理頁面效果圖如下圖所示。為實現(xiàn)訂單管理頁面內(nèi)的訂單切換功能，首先需要創(chuàng)建4個名為AllOrders、toPayOrder、toReceipt、toEvaluated的路由組件，分別用于渲染全部訂單信息、待支付的訂單信息、待發(fā)貨的訂單信息、待評價的訂單信息。實現(xiàn)訂單管理頁面的具體代碼可參考教學PPT或教材。知識點3-物流公司管理頁面物流公司管理頁面效果圖如下圖所示。物流公司管理頁面的頁面布局可分為兩部分，即頭部功能區(qū)與列表渲染區(qū)。為實現(xiàn)該頁面，需要創(chuàng)建一個Logistics組件承載頭部功能，一個LogisticsList組件承載列表渲染功能以及一個名為Logistics的父組件用于引用上述兩個組件。知識點4-登錄頁面登錄頁面效果圖如下圖所示。在LoginView組件中，當用戶輸入合法的賬戶信息時，單擊“登錄”按鈕即可進入農(nóng)產(chǎn)品后臺管理系統(tǒng)首頁。若輸入錯誤的賬戶信息則提示用戶“賬戶名或登錄密碼不正確”，并允許用戶重新輸入賬戶信息。知識點5-404頁面404頁面效果圖如下圖所示。在views目錄下新建404.vue，具體代碼可參考教學PPT或教材。知識點6-路由配置在農(nóng)產(chǎn)品后臺管理系統(tǒng)中，router/index.js文件負責管理整個系統(tǒng)的路由規(guī)則和路由守衛(wèi)，以確保用戶能夠正確地訪問系統(tǒng)中的各個頁面，并保護系統(tǒng)的安全性和穩(wěn)定性。具體代碼可參考教學PPT或教材。知識鞏固與作業(yè)（1）回顧上課前的學習目標，對本節(jié)課知識點進行總結。（2）老師布置相關作業(yè)進行練習。第五、六課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。上機一：（考察知識點為環(huán)境搭建、首頁、賬戶信息頁面、用戶管理頁面、商品管理頁面、訂單管理頁面）形式：單獨完成題目：請按照以下要求完成操作，要求