day09_電商項(xiàng)目_項(xiàng)目實(shí)戰(zhàn)day3

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