實(shí)項(xiàng)操目JavaEE框架應(yīng)用開發(fā)（SpringBoot+VueJS）工作單元九實(shí)現(xiàn)用戶和角色管理的前端功能職業(yè)能力本工作單元實(shí)現(xiàn)項(xiàng)目的用戶和角色管理的前端功能，具體實(shí)現(xiàn)用戶的增、刪、改、查頁面，將角色的增、刪、改、查頁面設(shè)計(jì)成拓展練習(xí)，幫助學(xué)生鞏固技能。最終希望學(xué)生達(dá)成的職業(yè)能力目標(biāo)如下：掌握基于ElementUI組件庫實(shí)現(xiàn)增、刪、改、查功能的頁面效果掌握基于Axios

向后臺服務(wù)端發(fā)起API請求靈活使用Vue-element-admin框架的工具類任務(wù)情景權(quán)限管理系統(tǒng)里，增、刪、改、查操作是頁面的基礎(chǔ)功能，如何圍繞界面結(jié)構(gòu)、操作流程來設(shè)計(jì)實(shí)現(xiàn)任務(wù)情景網(wǎng)站快速成型工具ElementUI可以快速搭建邏輯清晰、結(jié)構(gòu)合理且高效易用的整體頁面。本工作單元的具體任務(wù)實(shí)現(xiàn)顯示用戶列表頁面。實(shí)現(xiàn)用戶列表分頁。實(shí)現(xiàn)用戶查詢功能。實(shí)現(xiàn)用戶新增功能。實(shí)現(xiàn)用戶修改功能。實(shí)現(xiàn)用戶批量刪除功能。前置知識CHAPTERFIVE任務(wù)1實(shí)現(xiàn)顯示用戶列表頁面任務(wù)分析該任務(wù)先配置顯示用戶列表頁面的菜單路由，然后使用ElementUI的Table組件構(gòu)建用戶列表頁面，再使用封裝Axios框架的request.js調(diào)用后端接口請求。任務(wù)實(shí)施步驟1.確定路由映射文件步驟2.編寫頁面代碼步驟3.編寫請求后端接口代碼步驟4.請求服務(wù)端數(shù)據(jù)填充用戶列表頁面步驟5.運(yùn)行調(diào)試步驟1確定路由映射文件添加用戶管理菜單路由，訪問路徑path為‘/system/user’，映射的組件component為'src/views/system/user/index‘文件。{path:'/system',component:Layout,meta:{title:'系統(tǒng)管理',icon:'guide',affix:true},children:[{path:'user',component:()=>import('@/views/system/user/index'),name:'user',meta:{title:'用戶管理',icon:'user',affix:true}}]}步驟2編寫頁面代碼在'views'目錄下創(chuàng)建'system/user/index.vue'組件使用Elementtable組件實(shí)現(xiàn)用戶列表展示。Elementtable組件案例代碼:

https://element.faas.ele.me/#/zh-CN/component/table步驟3編寫請求后端接口代碼在“src/api”目錄下創(chuàng)建“system/user.js”文件，新增listUser

函數(shù)，該函數(shù)使用get請求方法，請求后端接口“/system/user/list”，傳遞query參數(shù)，以便于獲取用戶列表數(shù)據(jù)。步驟4請求服務(wù)端數(shù)據(jù)，填充用戶列表頁面在“/views/system/user/index.vue”文件中調(diào)用步驟3中的listUser()請求服務(wù)端數(shù)據(jù)，填充用戶列表頁面，代碼細(xì)節(jié)分析如下：在el-table組件上綁定：data=″userList″，用于渲染后端接口返回的用戶列表數(shù)據(jù)，綁定v-loading=″listLoading″用于后端返回到數(shù)據(jù)之前，顯示加載中的效果，優(yōu)化用戶體驗(yàn)。在created()函數(shù)中調(diào)用getList()進(jìn)行數(shù)據(jù)初始化，用于在模板渲染成html前，調(diào)用后端接口，返回用戶列表數(shù)據(jù)。步驟5運(yùn)行調(diào)試分別啟動(dòng)運(yùn)行前、后端服務(wù)；