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

向后臺服務端發(fā)起API請求靈活使用Vue-element-admin框架的工具類任務情景權限管理系統(tǒng)里，增、刪、改、查操作是頁面的基礎功能，如何圍繞界面結構、操作流程來設計實現(xiàn)任務情景網(wǎng)站快速成型工具ElementUI可以快速搭建邏輯清晰、結構合理且高效易用的整體頁面。本工作單元的具體任務實現(xiàn)顯示用戶列表頁面。實現(xiàn)用戶列表分頁。實現(xiàn)用戶查詢功能。實現(xiàn)用戶新增功能。實現(xiàn)用戶修改功能。實現(xiàn)用戶批量刪除功能。前置知識CHAPTERFIVE任務1實現(xiàn)顯示用戶列表頁面任務分析該任務先配置顯示用戶列表頁面的菜單路由，然后使用ElementUI的Table組件構建用戶列表頁面，再使用封裝Axios框架的request.js調用后端接口請求。任務實施步驟1.確定路由映射文件步驟2.編寫頁面代碼步驟3.編寫請求后端接口代碼步驟4.請求服務端數(shù)據(jù)填充用戶列表頁面步驟5.運行調試步驟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組件實現(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請求服務端數(shù)據(jù)，填充用戶列表頁面在“/views/system/user/index.vue”文件中調用步驟3中的listUser()請求服務端數(shù)據(jù)，填充用戶列表頁面，代碼細節(jié)分析如下：在el-table組件上綁定：data=″userList″，用于渲染后端接口返回的用戶列表數(shù)據(jù)，綁定v-loading=″listLoading″用于后端返回到數(shù)據(jù)之前，顯示加載中的效果，優(yōu)化用戶體驗。在created()函數(shù)中調用getList()進行數(shù)據(jù)初始化，用于在模板渲染成html前，調用后端接口，返回用戶列表數(shù)據(jù)。步驟5運行調試分別啟動運行前、后端服務；使用瀏覽器訪問URL地址：http://localhost:9527/。登錄成功后單擊“系統(tǒng)管理”下的“用戶管理”，顯示用戶列表。任務評價感謝觀看~實項操目JavaEE框架應用開發(fā)（SpringBoot+VueJS）工作單元九實現(xiàn)用戶和角色管理的前端功能CHAPTERFIVE任務2實現(xiàn)用戶列表分頁任務分析分頁功能是網(wǎng)頁中的一個常見功能，其作用就是將數(shù)據(jù)分割成多個頁面來顯示。當獲取數(shù)據(jù)量達到一定規(guī)模的時候，使用分頁來進行數(shù)據(jù)分割，可使數(shù)據(jù)展示形式更為齊整任務實施步驟1.全局掛載分頁組件步驟2.使用分頁組件步驟3.運行調試步驟1全局掛載分頁組件使用Vue-Element-Admin框架的/components/Pagination組件實現(xiàn)分頁，修改main.js文件掛載Pagination組件。importPaginationfrom'@/components/Pagination'//全局組件掛載Vponent('Pagination',Pagination)步驟2使用分頁組件1）修改“/views/system/user/index.vue”文件，在<template>標簽里的“el-table”組件下增加Pagination組件。2）Pagination組件使用了total、queryParams

兩個變量，在script標簽下的data中初始化該變量，同時把queryParams

變量傳入到listUser(this.queryParams)中，將返回的數(shù)據(jù)賦值給total變量，獲取總數(shù)據(jù)數(shù)。步驟3運行調試分別啟動運行前、后端服務；使用瀏覽器訪問URL地址：http://localhost:9527/。登錄成功后單擊“系統(tǒng)管理”下的“用戶管理”，顯示用戶列表。知識小結任務評價感謝觀看~實項操目JavaEE框架應用開發(fā)（SpringBoot+VueJS）工作單元九實現(xiàn)用戶和角色管理的前端功能CHAPTERFIVE任務3實現(xiàn)用戶查詢功能任務分析在顯示用戶列表界面增加“新增”“修改”“刪除”“搜索”“重置”按鈕，實現(xiàn)按鈕的事件綁定方法，通過輸入用戶名稱、手機號碼和狀態(tài)來查詢用戶數(shù)據(jù)的功能。實現(xiàn)模糊查詢功能的用戶列表。任務實施步驟1.實現(xiàn)查詢參數(shù)的展示步驟2.變量初始化步驟3.實現(xiàn)按鈕綁定事件的方法步驟4.運行調試步驟1實現(xiàn)查詢參數(shù)的展示修改“/views/system/user/index.vue”文件，在<template>標簽里使用el-form組件實現(xiàn)查詢參數(shù)的展示功能，使用el-button組件實現(xiàn)按鈕功能。步驟2變量初始化本任務使用了queryParams.userName、queryParams.phonenumber、queryParams.status、statusOptions、single以及multiple變量，在<script>標簽下的data中初始化變量。步驟3實現(xiàn)按鈕綁定事件的方法//搜索按鈕操作handleQuery(){

this.queryParams.page=1

this.getList()},//重置Form表單resetQuery(){

this.resetForm('queryForm')

this.handleQuery()},//新增用戶handleAdd(){}步驟4運行調試分別啟動運行前、后端服務；使用瀏覽器訪問URL地址：http://localhost:9527/。登錄成功后單擊“系統(tǒng)管理”下的“用戶管理”，在用戶名稱處輸入“barbara”。知識小結el-form組件el-form組件由輸入框、選擇器、單選框和多選框等控件組成，用以收集、校驗和提交數(shù)據(jù)。一個典型表單包括各種表單項，如輸入框、選擇器、開關、單選框和多選框等。在Form組件中，每一個表單域由一個Form-Item組件構成，表單域中可以放置各種類型的表單控件，包括Input、Select、Checkbox、Radio、Switch、DatePicker

和TimePicker知識小結任務評價感謝觀看~實項操目JavaEE框架應用開發(fā)（SpringBoot+VueJS）工作單元九實現(xiàn)用戶和角色管理的前端功能CHAPTERFIVE任務4實現(xiàn)用戶新增功能任務分析在用戶管理界面，單擊“新增”按鈕彈出“添加用戶”窗口，在窗口中錄入數(shù)據(jù)，單擊“確定”按鈕，實現(xiàn)用戶新增功能。任務實施步驟1.編寫新增頁面代碼步驟2.變量初始化步驟3.編寫表單校驗規(guī)則步驟4.編寫表單處理方法步驟5.編寫請求后端接口代碼步驟6.掛載全局消息的處理方法步驟7.運行調試步驟1編寫新增頁面代碼在“/views/system/user/index.vue”文件的<template>標簽中的<el-row>下面增加ElementDialog組件，實現(xiàn)新增頁面功能。步驟2變量初始化本任務使用了title、sexOptions、roleOptions、initPassword、open、form變量，在“/views/system/user/index.vue”文件的<script>標簽下的data中初始化變量步驟3編寫表單校驗規(guī)則本任務使用rules校驗，在“/views/system/user/index.vue”文件的<script>標簽下的data中定義校驗規(guī)則。步驟4

編寫表單處理方法1）在“/views/system/user/index.vue”文件的<script>標簽下的methods中實現(xiàn)對form表單的初始化reset方法。2）在“/views/system/user/index.vue”的<script>標簽下的methods中實現(xiàn)handleAdd

方法用于初始化用戶表單信息，其中getUser()方法可調用請求后端API接口數(shù)據(jù)。3）在“/views/system/user/index.vue”的<script>標簽下的methods中實現(xiàn)新增用戶對話框的“確定”按鈕綁定的submitForm()方法和“取消”按鈕綁定的cancel()方法。步驟5編寫請求后端接口代碼在“api/system/user.js”文件實現(xiàn)getUser

函數(shù)和addUser

函數(shù)，代碼如下。getUser

函數(shù)使用get請求方法，請求后端接口“/system/user/”，傳遞userId

參數(shù)，以便于獲取用戶數(shù)據(jù)和角色列表數(shù)據(jù)。addUser

函數(shù)使用post請求方法，請求后端接口“/system/user/”，傳遞頁面輸入的用戶信息作為data參數(shù)，用于新增用戶數(shù)據(jù)到數(shù)據(jù)庫步驟6掛載全局消息的處理方法在“main.js”文件中掛載整個項目中使用的msgSuccess、msgError

以及msgInfo

全局消息的處理方法。步驟7運行調試1）分別測試表單驗證功能，所有字段全部為空，單擊“確定”按鈕提交空數(shù)據(jù)測試新增用戶頁面。2）測試表單提交功能，提交正常數(shù)據(jù)，新增用戶成功界面彈出提示。知識小結el-dialog組件el-dialog組件在保留當前頁面狀態(tài)的情況下，彈出一個對話框，通知用戶并承載相關操作。對話框分為兩個部分：body和footer。footer需要具名為footer的slot。title屬性用于定義標題，是可選的，默認值為空。對話框的內(nèi)容可以是任意的，甚至可以是表格或表單。知識小結rules表單驗證功能rules表單驗證文件遵循Json

文件格式，里面添加每一個需要驗證的客戶端組件名稱，定義其需要驗證的規(guī)范。使用type參數(shù)定義通用的校驗類型，required參數(shù)定義其是否是必要字段，message參數(shù)定義其驗證返回信息，trigger參數(shù)定義驗證的觸發(fā)器，pattern參數(shù)定義校驗正則表達式。任務評價感謝觀看~實項操目JavaEE框架應用開發(fā)（SpringBoot+VueJS）工作單元九實現(xiàn)用戶和角色管理的前端功能CHAPTERNINE任務5實現(xiàn)用戶修改功能任務分析在用戶管理界面，用戶可以通過單擊當前行的“修改”按鈕或者選中多選框，然后單擊頭部的“修改”按鈕來修改用戶數(shù)據(jù)。任務實施步驟1.編寫多選框實現(xiàn)代碼步驟2.編寫表單綁定用戶的方法步驟3.

編寫更新用戶表單的方法步驟4.編寫請求后端接口的代碼步驟5.運行調試步驟1編寫多選框實現(xiàn)代碼根據(jù)多選框選中數(shù)據(jù)項來控制頂部“修改”和“刪除”按鈕的啟用和禁用。在el-table組件上使用@selection-change=″handleSelectionChange″綁定handleSelectionChange方法。handleSelectionChange

方法實現(xiàn)的邏輯是當選中一條記錄時，“修改”按鈕啟用，當選中多條記錄時“刪除”按鈕啟用。步驟2編寫表單綁定用戶的方法實現(xiàn)事件綁定的handleUpdate

方法，調用后端API接口獲取待修改的用戶數(shù)據(jù)，彈出“修改用戶”窗口。步驟3

編寫更新用戶表單的方法實現(xiàn)修改用戶對話框的“確定”按鈕綁定的submitForm()方法，調用updateUser

函數(shù)，請求后端接口更新用戶數(shù)據(jù)。步驟4

編寫請求后端接口的代碼在“api/system/user.js”文件中增加updateUser

函數(shù)，updateUser

函數(shù)使用put請求方法，請求后端接口“/system/user/”，傳遞頁面輸入的用戶信息作為data參數(shù)，以便于更新用戶數(shù)據(jù)到數(shù)據(jù)庫。步驟5運行調試單擊“修改”按鈕，錄入修改的用戶數(shù)據(jù)，運行測試，修改用戶數(shù)據(jù)成功，彈出相應提示。任務評價感謝觀看~實項操目JavaEE框架應用開發(fā)（SpringBoot+VueJS）工作單元九實現(xiàn)用戶和角色管理的前端功能CHAPTERNINE任務6實現(xiàn)用戶批量刪除功能任務分析本任務實現(xiàn)刪除單行用戶數(shù)據(jù)和批量刪除多個用戶數(shù)據(jù)功能，單擊“刪除”按鈕彈出警告窗口。任務實施步驟1.編寫刪除用戶數(shù)據(jù)代碼步驟2.編寫請求后端接口的代碼步驟3.運行調試步驟1編寫刪除用戶數(shù)據(jù)代碼實現(xiàn)事件綁定的handleDelete

方法，彈出警告窗口，如果用戶單擊“確定”按鈕，則調用后端API接口刪除該用戶數(shù)據(jù)。步驟2

編寫請求后端接口的代碼在“api/system/user.js”文件中增加delUser

函數(shù)，delUser

函數(shù)使用delete請求方法，請求后端接口“/system/user/{userId}”，傳遞userId

參數(shù)，以便于刪除用戶數(shù)據(jù)。步驟3運行調試單擊“刪除”按鈕后，測試運行結果，彈出相應提示。任務評價單元小結步驟本工作單元實現(xiàn)了項目的用戶和角色管理的前端功能，使用ElementUI組件庫實現(xiàn)增、刪、改、查功能的頁面效果，使用Axios向后臺服務端發(fā)起API請求后臺數(shù)據(jù)填充頁面。通過學習并完成本工作單元的任務、拓展練習和實戰(zhàn)強化，學員能夠熟練掌握使用ElementUI組件庫實現(xiàn)常見的項目頁面，以及使用Axios請求后端服務的職業(yè)技能。拓展練習按照工作單元9的任務1～6中的步驟，完成角色管理功能的增、刪、改、查功能頁面。實戰(zhàn)強化按照工作單元9的任務1～6中的步驟，實現(xiàn)實訓項目“誠品書城”的商品管理頁面。感謝觀看~實項操目JavaEE框架應用開發(fā)（SpringBoot+VueJS）工作單元十

實現(xiàn)菜單前端管理功能職業(yè)能力本工作單元實現(xiàn)項目菜單管理的前端功能，具體實現(xiàn)了菜單的增、刪、改、搜索以及樹形顯示功能，最終希望學生達成的職業(yè)能力目標是：熟練掌握基于ElementUI組件庫實現(xiàn)菜單樹形結構表格的頁面效果靈活使用Vue-element-admin框架的工具類任務情景在權限管理系統(tǒng)里，菜單用于定義和分配角色所擁有的菜單及其按鈕的權限。本工作單元完成菜單管理的前端頁面并與后端接口聯(lián)調，實現(xiàn)完整的菜單管理功能。任務情景前置知識本工作單元的具體任務實現(xiàn)菜單列表與查詢頁面。實現(xiàn)菜單新增功能。實現(xiàn)菜單修改功能。實現(xiàn)菜單刪除功能。CHAPTERTEN任務1實現(xiàn)菜單列表與查詢頁面任務分析本任務需要完成菜單的列表功能，通過調用后端接口獲取菜單數(shù)據(jù)，并按照樹形表格展示。任務實施步驟1.編寫菜單頁面代碼步驟2.編寫請求后端接口代碼步驟3.運行調試步驟1

編寫菜單頁面代碼在“views”目錄下創(chuàng)建“system/menu/index.vue”組件，整體代碼結構和用戶管理前端代碼高度相似，唯一不同就是使用ElementUI的樹形結構表格來展示菜單列表。1）index.vue

頁面的布局代碼。2）編寫初始化組件數(shù)據(jù)與頁面組件綁定事件的代碼。步驟2編寫請求后端接口代碼在“api/system/menu.js”組件中增加listMenu

函數(shù)，listMenu

函數(shù)使用get請求方法，請求后端接口“/system/menu/list”，傳遞頁面輸入的查詢值作為query參數(shù)，以便于獲取菜單列表數(shù)據(jù)。步驟3運行調試分別啟動運行前、后端服務；使用瀏覽器訪問URL地址：http://localhost:9527/。登錄成功后單擊“系統(tǒng)管理”下的“菜單管理”，顯示菜單列表。知識小結ElementUI的樹形結構表格在ElementUI的el-table組件中，通過在<el-table>標簽中增加row-key="id"和:treeprops="{children:'children',hasChildren:'hasChildren'}，來支持樹類型的數(shù)據(jù)顯示。其中渲染樹形數(shù)據(jù)時，必須要指定“row-key”參數(shù)，同時“tree-props”參數(shù)用于渲染嵌套數(shù)據(jù)，通過指定數(shù)據(jù)行中的hasChildren

字段來指定哪些行包含子節(jié)點，通過指定數(shù)據(jù)行中的Children字段來添加子節(jié)點的數(shù)據(jù)。任務評價感謝觀看~實項操目JavaEE框架應用開發(fā)（SpringBoot+VueJS）工作單元十

實現(xiàn)菜單前端管理功能CHAPTERTEN任務2

實現(xiàn)菜單新增功能任務分析本任務來實現(xiàn)新增菜單功能，在菜單管理界面，單擊“新增”按鈕彈出“添加菜單”窗口，在窗口中錄入數(shù)據(jù)，單擊“確定”按鈕實現(xiàn)菜單的新增功能。任務實施步驟1.

編寫新增按鈕實現(xiàn)邏輯步驟2.增加添加對話框頁面步驟3.實現(xiàn)菜單圖標選擇功能步驟4.引入自定義組件步驟5.實現(xiàn)表單處理方法步驟6.編寫請求后端接口代碼步驟7.運行調試步驟1

編寫新增按鈕實現(xiàn)邏輯修改system/menu/index.vue

組件，實現(xiàn)“新增”按鈕綁定的handleAdd(row)方法以及該方法內(nèi)表單重置的reset()方法和獲取菜單下拉樹結構的getTreeselect()方法。步驟2增加添加對話框頁面修改system/menu/index.vue

組件，使用el-dialog實現(xiàn)增加“添加或修改菜單對話框”效果，將Treeselect

組件和IconSelect

組件分別用于實現(xiàn)樹形菜單選擇和圖標選擇的效果。步驟3實現(xiàn)菜單圖標選擇功能1）創(chuàng)建“src\components\IconSelect\index.vue”文件，構建步驟2中使用的IconSelect組件的模板內(nèi)容，用于實現(xiàn)菜單圖標的選擇功能。2）創(chuàng)建“src\components\IconSelect\requireIcons.js”文件，引入步驟2中使用的IconSelect組件的圖標文件，用于實現(xiàn)菜單圖標的選擇功能。步驟4引入自定義組件1）在“package.json”文件的dependencies下增加Treeselect

依賴。2）引入步驟3創(chuàng)建的IconSelect

組件和Treeselect

組件。步驟5實現(xiàn)表單處理方法1）實現(xiàn)步驟2中彈出框的cancel和submitForm

方法。2）實現(xiàn)步驟2中彈出框的cancel和submitForm

方法。步驟6

編寫請求后端接口的代碼在“api/system/menu.js”中增加addMenu

函數(shù)，addMenu

函數(shù)使用post請求方法，請求后端接口“/system/menu/”，傳遞頁面輸入的菜單信息作為data參數(shù)，用于新增菜單數(shù)據(jù)到數(shù)據(jù)庫。步驟7運行調試測試新增表單成功功能，提交正常數(shù)據(jù)，新增菜單成功彈出相應提示。任務評價感謝觀看~實項操目JavaEE框架應用開發(fā)（SpringBoot+VueJS）工作單元十

實現(xiàn)菜單前端管理功能CHAPTERTEN任務3

實現(xiàn)菜單修改功能任務分析在菜單管理界面，用戶可以通過單擊當前行的“修改”按鈕來修改菜單數(shù)據(jù)。任務實施步驟1.實現(xiàn)修改菜單的事件步驟2.編寫請求后端接口代碼步驟3.運行調試步驟1實現(xiàn)修改菜單的事件1）修改“system/menu/index.vue”組件，實現(xiàn)“修改”按鈕綁定的handleUpdate(row)方法。2）在“system/menu/index.vue”中導入getMenu

方法和用來更新數(shù)據(jù)的updateMenu