實項操目JavaEE框架應(yīng)用開發(fā)（SpringBoot+VueJS）工作單元八實現(xiàn)登錄的前端功能職業(yè)能力本工作單元主要是基于Vue-Element-Admin框架的登錄頁面和公共工具類，實現(xiàn)完整的登錄認證功能，最終希望學(xué)生達成如下職業(yè)能力目標：1．掌握基于Vue-Element-Admin框架實現(xiàn)登錄功能2．掌握配置Vue-Element-Admin框架訪問后端接口服務(wù)3．掌握前端與服務(wù)端進行交互的代碼實現(xiàn)4．掌握根據(jù)登錄用戶權(quán)限生成動態(tài)菜單功能任務(wù)情景如何使用Vue-element-admin框架調(diào)用后臺接口服務(wù)完成用戶登錄？如何根據(jù)用戶的權(quán)限數(shù)據(jù)生成動態(tài)菜單？基于上述兩個問題，本工作單元的具體任務(wù)如下：1.實現(xiàn)登錄功能，基于Vue-element-admin框架編寫調(diào)用后臺接口函數(shù)完成用戶登錄功能；2.實現(xiàn)菜單動態(tài)生成功能，改寫Vue-element-admin框架的permission.js工具類完成生成動態(tài)菜單功能。前置知識本工作單元的具體任務(wù)實現(xiàn)登錄功能。實現(xiàn)菜單動態(tài)生成功能。CHAPTEREIGHT任務(wù)1實現(xiàn)登錄功能任務(wù)分析在前后端分離架構(gòu)下，一個完整的前端UI交互到服務(wù)端處理流程如下：1）UI組件交互操作；2）調(diào)用統(tǒng)一管理的API服務(wù)請求函數(shù)；3）使用封裝的request.js發(fā)送請求；4）獲取服務(wù)端返回的data；5）更新data到UI組件。任務(wù)實施步驟1.編寫API服務(wù)請求函數(shù)步驟2.編寫VueX的actions操作步驟3.編寫接口調(diào)用方法步驟4.移除Mock本地數(shù)據(jù)并配置后端服務(wù)端地址步驟5.改寫封裝的request工具類步驟6.運行調(diào)試步驟1編寫API服務(wù)請求函數(shù)在“\src\views\login\index.vue”中實現(xiàn)登錄功能的UI組件，分別改寫用于實現(xiàn)發(fā)送登錄請求的handleLogin()方法以及l(fā)oginForm的初始化值。步驟2編寫VueX的actions操作編寫handleLogin()中調(diào)用的名為“user/login”的actions，用于更新用戶登錄后token值的變化，修改對應(yīng)文件“\src\store\modules\user.js”中的login({commit},userInfo)方法。步驟3編寫接口調(diào)用方法實現(xiàn)調(diào)用的login(data)方法，該方法用于發(fā)送請求到后端接口完成登錄認證功能，編寫文件“\src\api\user.js”，增加login(data)方法。步驟4移除Mock本地數(shù)據(jù)并配置后端服務(wù)端地址1）修改“vue.config.js”文件，配置devServer并移除Mock服務(wù)，使前端不訪問本地Mock數(shù)據(jù)，而是通過網(wǎng)絡(luò)與后端服務(wù)端進行交互。2）修改“main.js”文件，移除Mock服務(wù)，將下面代碼直接刪除。步驟5改寫封裝的request工具類修改文件“src\utils\request.js”，實現(xiàn)Axios框架的請求攔截器和響應(yīng)攔截器功能。請求攔截器用于前端向后端發(fā)送請求的時候，在headers里添加token值來驗證該請求是否授權(quán)。響應(yīng)攔截器用于處理返回的數(shù)據(jù)，根據(jù)返回的code做相應(yīng)的處理。步驟6運行調(diào)試啟動運行前端和后端服務(wù)，使用瀏覽器訪問URL地址：http://localhost:9527/，按<F12>打開控制臺，選擇“Network”，然后在登錄頁面單擊“Login”按鈕，登錄請求的返