day09_電商項目_項目實戰(zhàn)day3

Vue day09 Contents 目 錄 修改用戶 刪除用戶推送代碼到碼云權限列表角色列表分配權限 角色 Contents 目 錄 修改用戶 刪除用戶推送代碼到碼云權限列表角色列表分配權限 角色 了解如何彈出對話框 要點提示 修改用戶 展示修改用戶的對話框 掌握程度 了解 1 1展示修改用戶的對話框 了解如何獲取點擊的那個用戶的信息 要點提示 修改用戶 根據(jù)Id查詢對應的用戶信息 掌握程度 了解 1 2根據(jù)Id查詢對應的用戶信息 了解如何將獲取到的用戶信息數(shù)據(jù)渲染到表單中 要點提示 修改用戶 渲染修改用戶的表單 掌握程度 了解 1 3渲染修改用戶的表單 了解在用戶關閉對話框需要重置表單中的內(nèi)容 要點提示 修改用戶 實現(xiàn)修改用戶表單的重置操作 掌握程度 了解 1 4實現(xiàn)修改用戶表單的重置操作 了解在用戶點擊對話框中的確定時需要驗證表單中的數(shù)據(jù)是否正常 要點提示 修改用戶 完成提交修改之前的表單預驗證 掌握程度 了解 1 5完成提交修改之前的表單預驗證 了解表單驗證完畢時如何發(fā)送請求更改用戶的信息 要點提示 修改用戶 提交表單完成用戶信息的修改 掌握程度 了解 1 6提交表單完成用戶信息的修改 練習 完成修改用戶信息的功能 提示 按照步驟完成修改用戶信息的功能A 添加修改用戶信息的對話框B 發(fā)送請求獲取需要修改的用戶的信息C 將用戶的信息以表單的形式展現(xiàn)在對話框中D 對表單中的數(shù)據(jù)添加驗證E 當用戶關閉對話框時 對表單進行重置F 當用戶點擊對話框中的確定時 發(fā)送請求更新用戶信息 10分鐘 1 6提交表單完成用戶信息的修改 案例 完成修改用戶信息的功能 了解如何使用彈窗組件進行彈窗提示了解如何獲取用戶選擇的彈窗結果 要點提示 刪除用戶 彈框詢問用戶是否確認刪除數(shù)據(jù) 掌握程度 了解 1 7彈框詢問用戶是否確認刪除數(shù)據(jù) 了解如何發(fā)送請求完成刪除用戶 要點提示 刪除用戶 調(diào)用API完成刪除用戶的操作 掌握程度 了解 1 8調(diào)用API完成刪除用戶的操作 練習 完成刪除用戶 提示 按照步驟完成刪除用戶A 導入MessageBox組件 掛載MessageBox組件Vue prototype confirm MessageBox confirmB 在用戶點擊刪除按鈕時使用MessageBox組件彈窗詢問用戶是否刪除 并獲得用戶選擇的結果C 當用戶點擊 確定 時 發(fā)送請求刪除用戶 5分鐘 1 8調(diào)用API完成刪除用戶的操作 案例 完成刪除用戶 Contents 目 錄 修改用戶 刪除用戶推送代碼到碼云權限列表角色列表分配權限 角色 了解如何創(chuàng)建Users分支并推送代碼 要點提示 提交代碼 創(chuàng)建user子分支并把代碼推送到碼云倉庫中 掌握程度 了解 2 1創(chuàng)建user子分支并把代碼推送到碼云倉庫中 了解創(chuàng)建rights子分支以及推送碼云的過程 要點提示 新建分支 創(chuàng)建rights子分支并推送到碼云 掌握程度 了解 2 2創(chuàng)建rights子分支并推送到碼云 練習 完成代碼推送 提示 按照步驟完善側邊欄菜單A 創(chuàng)建user子分支 并將代碼推送到碼云B 創(chuàng)建rights子分支 并將代碼推送到碼云 10分鐘 2 2創(chuàng)建rights子分支并推送到碼云 案例 完成代碼推送 Contents 目 錄 修改用戶 刪除用戶推送代碼到碼云權限列表角色列表分配權限 角色 了解如何添加權限列表子組件以及規(guī)則 要點提示 權限列表 通過路由展示權限列表組件 掌握程度 了解 3 1通過路由展示權限列表組件 了解如何繪制面包屑導航和卡片視圖 要點提示 權限列表 繪制面包屑導航和卡片視圖 掌握程度 了解 3 2繪制面包屑導航和卡片視圖 了解如何發(fā)送請求獲取權限列表數(shù)據(jù) 要點提示 權限列表 調(diào)用API獲取權限列表的數(shù)據(jù) 掌握程度 掌握 3 3調(diào)用API獲取權限列表的數(shù)據(jù) 了解如何渲染權限列表UI結構 要點提示 權限列表 渲染權限列表UI結構 掌握程度 掌握 3 4渲染權限列表UI結構 了解用戶 角色 權限三者之間的關系 要點提示 介紹用戶 角色 權限三者之間的關系 掌握程度 了解 3 5介紹用戶 角色 權限三者之間的關系 練習 完成權限列表 提示 按照步驟完成權限列表A 添加權限列表子組件以及路由規(guī)則的設置B 制作頁面基本布局 面包屑導航 卡片視圖等 C 發(fā)送請求獲取權限列表數(shù)據(jù)D 根據(jù)數(shù)據(jù)渲染權限列表表格 8分鐘 3 5介紹用戶 角色 權限三者之間的關系 案例 完成權限列表 Contents 目 錄 修改用戶 刪除用戶推送代碼到碼云權限列表角色列表分配權限 角色 了解如何添加角色列表組件以及規(guī)則 要點提示 角色列表 通過路由展示角色列表組件 掌握程度 掌握 4 1通過路由展示角色列表組件 了解如何發(fā)送請求獲取角色列表數(shù)據(jù) 要點提示 角色列表 繪制基本布局結構并獲取列表數(shù)據(jù) 掌握程度 掌握 4 2繪制基本布局結構并獲取列表數(shù)據(jù) 了解如何以表格的形式渲染角色列表數(shù)據(jù) 要點提示 角色列表 渲染角色列表數(shù)據(jù) 掌握程度 了解 4 3渲染角色列表數(shù)據(jù) 練習 完成角色列表基本數(shù)據(jù)展示 提示 按照步驟完成練習A 添加角色列表組件以及路由規(guī)則B 發(fā)送請求獲取角色列表數(shù)據(jù)C 根據(jù)角色列表數(shù)據(jù)渲染表格數(shù)據(jù) 5分鐘 4 3渲染角色列表數(shù)據(jù) 案例 完成角色列表基本數(shù)據(jù)展示 了解角色列表需要完成的功能有哪些 要點提示 角色列表 說明角色列表需要完成的功能模塊 掌握程度 掌握 4 4說明角色列表需要完成的功能模塊 了解嵌套渲染角色的權限的思路 要點提示 角色列表 分析角色下權限渲染的實現(xiàn)思路 掌握程度 掌握 4 5分析角色下權限渲染的實現(xiàn)思路 上午復習 Vue第九天 上午復習 當我們將MessageBox組件的confirm掛載到Vue實例之后 我們可以通過constresult 硬前端this confirm 硬前端進行彈窗在我們顯示權限列表數(shù)據(jù)的時候 使用了作用域插槽來處理權限等級的顯示 上午復習 Vue第九天 上午復習 當我們將MessageBox組件的confirm掛載到Vue實例之后 我們可以通過constresult awaitthis confirm catch err err 進行彈窗在我們顯示權限列表數(shù)據(jù)的時候 使用了作用域插槽來處理權限等級的顯示 了解如何通過循環(huán)生成第一層角色權限 要點提示 角色列表 通過第一層for循環(huán)渲染一級權限 掌握程度 掌握 4 6通過第一層for循環(huán)渲染一級權限 了解如何通過添加樣式的方式添加一級權限的邊框 要點提示 角色列表 美化一級權限的UI結構 掌握程度 掌握 4 7美化一級權限的UI結構 了解如何通過嵌套第二層for循環(huán)生成二級權限 要點提示 角色列表 通過第二層for循環(huán)渲染二級權限 掌握程度 掌握 4 8通過第二層for循環(huán)渲染二級權限 了解如何通過嵌套第三層for循環(huán)生成三級權限 要點提示 角色列表 通過第三層for循環(huán)渲染三級權限 掌握程度 掌握 4 9通過第三層for循環(huán)渲染三級權限 了解如何設置權限內(nèi)容垂直居中 要點提示 角色列表 美化角色下權限的UI結構 掌握程度 了解 4 10美化角色下權限的UI結構 練習 實現(xiàn)循環(huán)生成角色下權限 提示 按照步驟完成練習A 編寫for循環(huán)生成一級權限B 編寫嵌套for循環(huán)生成二級 三級權限C 美化所有權限內(nèi)容結構 8分鐘 4 10美化角色下權限的UI結構 案例 實現(xiàn)循環(huán)生成角色下權限 了解如何彈出確定取消窗口 要點提示 角色列表 點擊刪除權限按鈕彈出確認提示框 掌握程度 掌握 4 11點擊刪除權限按鈕彈出確認提示框 了解如何發(fā)送請求刪除角色下權限 要點提示 角色列表 完成刪除角色下指定權限的功能 掌握程度 掌握 4 12完成刪除角色下指定權限的功能 練習 實現(xiàn)刪除角色下權限 提示 按照步驟完成練習A 當用戶點擊權限右側的 X 時 彈出提示窗詢問用戶是否刪除權限B 當用戶點擊確定時 發(fā)送請求完成權限刪除 5分鐘 4 12完成刪除角色下指定權限的功能 案例 實現(xiàn)刪除角色下權限 Contents 目 錄 修改用戶 刪除用戶推送代碼到碼云權限列表角色列表分配權限 角色 了解如何彈出分配權限對話框 要點提示 分配權限 彈出分配權限對話框并請求權限數(shù)據(jù) 掌握程度 了解 5 1彈出分配權限對話框并請求權限數(shù)據(jù) 導入并注冊el tree組件 要點提示 分配權限 初步配置并使用el tree樹形控件 掌握程度 了解 5 2初步配置并使用el tree樹形控件 了解如何為樹形控件添加復選框了解如何設置選中樹形控件的值 要點提示 分配權限 優(yōu)化樹形控件的展示效果 掌握程度 了解 5 3優(yōu)化樹形控件的展示效果 了解默認勾選如何實現(xiàn) 要點提示 分配權限 分析已有權限默認勾選的實現(xiàn)思路 掌握程度 掌握 5 4分析已有權限默認勾選的實現(xiàn)思路 練習 編寫代碼請求權限數(shù)據(jù)并將之展現(xiàn)在樹形控件中 提示 按照步驟完成練習A 請求權限數(shù)據(jù)B 將數(shù)據(jù)綁定在樹形控件中展示C 給樹形控件的節(jié)點添加復選框和節(jié)點值 5分鐘 5 4分析已有權限默認勾選的實現(xiàn)思路 案例 展示樹形控件 了解如何根據(jù)defKeys數(shù)組設置樹形組件中的默認選中效果 要點提示 分配權限 加載當前角色已有的權限 掌握程度 掌握 5 5加載當前角色已有的權限 了解在關閉對話框時重置defKeys數(shù)組以及userInfo 要點提示 分配權限 在關閉對話框時重置defKeys數(shù)組 掌握程度 掌握 5 6在關閉對話框時重置defKeys數(shù)組 了解如何發(fā)送請求將用戶選擇的樹形控件權限更新到用戶角色權限中 要點提示 分配權限 調(diào)用API完成分配權限的功能 掌握程度 了解 5 7調(diào)用API完成分配權限的功能 練習 完成默認勾選顯示用戶角色權限完成點擊確定按鈕時保存用戶權限 提示 按照步驟完成練習A 使用default checked keys綁定默認選中樹節(jié)點的數(shù)組B 使用遞歸函數(shù)獲取當前角色擁有的權限C 當用戶點擊確定時 發(fā)送請求保存最新的權限信息 8分鐘 5 7調(diào)用API完成分配權限的功能 案例 完成權限分配功能 在Users vue中編寫代碼實現(xiàn)對話框 要點提示 分配角色 渲染分配角色的對話框并請求角色列表數(shù)據(jù) 掌握程度 掌握 5 8渲染分配角色的對話框并請求角色列表數(shù)據(jù) 了解如何使用select下拉菜單 要點提示 分配角色 渲染角色列表的select下拉菜單 掌握程度 掌握 5 9渲染角色列表的select下拉菜單 了解如何發(fā)送請求完成分配角色的操作 要點提示 分配角色 完成分配角色的功能 掌握程度 掌握 5 10完成分配角色的功能 了解如何將代碼推送到碼云 要點提示 分支操作 提交本地代碼到Git倉庫并推送到碼云 掌握程度 了解 5 11提交本地代碼到Git倉庫并推送到碼云 練習 完成分配角色的功能 提示 按照步驟完成練習A 打開Users vue組件 為分配角色按鈕添加點擊事件B 添加彈出框代碼C 在彈窗口中添加下拉菜單D 請求角色數(shù)據(jù) 并將數(shù)據(jù)渲染在下拉菜單E 當用戶點擊彈出框的確定時 發(fā)送請求更新用戶角色 5分鐘 5 11提交本地代碼到Git倉庫并推送到碼云 案例 完成分配角色 今日復習 當我們將MessageBox組件的confirm掛載到Vue實例之后 我們可以通過constresult awaitthis confirm catch err err 進行彈窗在我們顯示權限列表數(shù)據(jù)的時候 使用了作用域插槽來處理權限等級的顯示 當我們?yōu)閑l tag添加slot sco屬性時 將會在組件的右側出現(xiàn) X 號當我們?yōu)閑l tree添加slot sco屬性時 將會在樹節(jié)點的前面出現(xiàn)復選框 當我們添加slot sco屬性時 將會默認展開所有樹節(jié)點 我們還可以通過slot sco屬性設置默認選中的樹節(jié)點 vue第九天 今日復習 今日復習 當我們將MessageBox組件的confirm掛載到Vue實例之后 我們可以通過constresult awaitthis confirm catch err err 進行彈窗在我們顯示權