day09_电商项目_项目实战day3

Vue day09 Contents 目 录 修改用户 删除用户推送代码到码云权限列表角色列表分配权限 角色 Contents 目 录 修改用户 删除用户推送代码到码云权限列表角色列表分配权限 角色 了解如何弹出对话框 要点提示 修改用户 展示修改用户的对话框 掌握程度 了解 1 1展示修改用户的对话框 了解如何获取点击的那个用户的信息 要点提示 修改用户 根据Id查询对应的用户信息 掌握程度 了解 1 2根据Id查询对应的用户信息 了解如何将获取到的用户信息数据渲染到表单中 要点提示 修改用户 渲染修改用户的表单 掌握程度 了解 1 3渲染修改用户的表单 了解在用户关闭对话框需要重置表单中的内容 要点提示 修改用户 实现修改用户表单的重置操作 掌握程度 了解 1 4实现修改用户表单的重置操作 了解在用户点击对话框中的确定时需要验证表单中的数据是否正常 要点提示 修改用户 完成提交修改之前的表单预验证 掌握程度 了解 1 5完成提交修改之前的表单预验证 了解表单验证完毕时如何发送请求更改用户的信息 要点提示 修改用户 提交表单完成用户信息的修改 掌握程度 了解 1 6提交表单完成用户信息的修改 练习 完成修改用户信息的功能 提示 按照步骤完成修改用户信息的功能A 添加修改用户信息的对话框B 发送请求获取需要修改的用户的信息C 将用户的信息以表单的形式展现在对话框中D 对表单中的数据添加验证E 当用户关闭对话框时 对表单进行重置F 当用户点击对话框中的确定时 发送请求更新用户信息 10分钟 1 6提交表单完成用户信息的修改 案例 完成修改用户信息的功能 了解如何使用弹窗组件进行弹窗提示了解如何获取用户选择的弹窗结果 要点提示 删除用户 弹框询问用户是否确认删除数据 掌握程度 了解 1 7弹框询问用户是否确认删除数据 了解如何发送请求完成删除用户 要点提示 删除用户 调用API完成删除用户的操作 掌握程度 了解 1 8调用API完成删除用户的操作 练习 完成删除用户 提示 按照步骤完成删除用户A 导入MessageBox组件 挂载MessageBox组件Vue prototype confirm MessageBox confirmB 在用户点击删除按钮时使用MessageBox组件弹窗询问用户是否删除 并获得用户选择的结果C 当用户点击 确定 时 发送请求删除用户 5分钟 1 8调用API完成删除用户的操作 案例 完成删除用户 Contents 目 录 修改用户 删除用户推送代码到码云权限列表角色列表分配权限 角色 了解如何创建Users分支并推送代码 要点提示 提交代码 创建user子分支并把代码推送到码云仓库中 掌握程度 了解 2 1创建user子分支并把代码推送到码云仓库中 了解创建rights子分支以及推送码云的过程 要点提示 新建分支 创建rights子分支并推送到码云 掌握程度 了解 2 2创建rights子分支并推送到码云 练习 完成代码推送 提示 按照步骤完善侧边栏菜单A 创建user子分支 并将代码推送到码云B 创建rights子分支 并将代码推送到码云 10分钟 2 2创建rights子分支并推送到码云 案例 完成代码推送 Contents 目 录 修改用户 删除用户推送代码到码云权限列表角色列表分配权限 角色 了解如何添加权限列表子组件以及规则 要点提示 权限列表 通过路由展示权限列表组件 掌握程度 了解 3 1通过路由展示权限列表组件 了解如何绘制面包屑导航和卡片视图 要点提示 权限列表 绘制面包屑导航和卡片视图 掌握程度 了解 3 2绘制面包屑导航和卡片视图 了解如何发送请求获取权限列表数据 要点提示 权限列表 调用API获取权限列表的数据 掌握程度 掌握 3 3调用API获取权限列表的数据 了解如何渲染权限列表UI结构 要点提示 权限列表 渲染权限列表UI结构 掌握程度 掌握 3 4渲染权限列表UI结构 了解用户 角色 权限三者之间的关系 要点提示 介绍用户 角色 权限三者之间的关系 掌握程度 了解 3 5介绍用户 角色 权限三者之间的关系 练习 完成权限列表 提示 按照步骤完成权限列表A 添加权限列表子组件以及路由规则的设置B 制作页面基本布局 面包屑导航 卡片视图等 C 发送请求获取权限列表数据D 根据数据渲染权限列表表格 8分钟 3 5介绍用户 角色 权限三者之间的关系 案例 完成权限列表 Contents 目 录 修改用户 删除用户推送代码到码云权限列表角色列表分配权限 角色 了解如何添加角色列表组件以及规则 要点提示 角色列表 通过路由展示角色列表组件 掌握程度 掌握 4 1通过路由展示角色列表组件 了解如何发送请求获取角色列表数据 要点提示 角色列表 绘制基本布局结构并获取列表数据 掌握程度 掌握 4 2绘制基本布局结构并获取列表数据 了解如何以表格的形式渲染角色列表数据 要点提示 角色列表 渲染角色列表数据 掌握程度 了解 4 3渲染角色列表数据 练习 完成角色列表基本数据展示 提示 按照步骤完成练习A 添加角色列表组件以及路由规则B 发送请求获取角色列表数据C 根据角色列表数据渲染表格数据 5分钟 4 3渲染角色列表数据 案例 完成角色列表基本数据展示 了解角色列表需要完成的功能有哪些 要点提示 角色列表 说明角色列表需要完成的功能模块 掌握程度 掌握 4 4说明角色列表需要完成的功能模块 了解嵌套渲染角色的权限的思路 要点提示 角色列表 分析角色下权限渲染的实现思路 掌握程度 掌握 4 5分析角色下权限渲染的实现思路 上午复习 Vue第九天 上午复习 当我们将MessageBox组件的confirm挂载到Vue实例之后 我们可以通过constresult 硬前端this confirm 硬前端进行弹窗在我们显示权限列表数据的时候 使用了作用域插槽来处理权限等级的显示 上午复习 Vue第九天 上午复习 当我们将MessageBox组件的confirm挂载到Vue实例之后 我们可以通过constresult awaitthis confirm catch err err 进行弹窗在我们显示权限列表数据的时候 使用了作用域插槽来处理权限等级的显示 了解如何通过循环生成第一层角色权限 要点提示 角色列表 通过第一层for循环渲染一级权限 掌握程度 掌握 4 6通过第一层for循环渲染一级权限 了解如何通过添加样式的方式添加一级权限的边框 要点提示 角色列表 美化一级权限的UI结构 掌握程度 掌握 4 7美化一级权限的UI结构 了解如何通过嵌套第二层for循环生成二级权限 要点提示 角色列表 通过第二层for循环渲染二级权限 掌握程度 掌握 4 8通过第二层for循环渲染二级权限 了解如何通过嵌套第三层for循环生成三级权限 要点提示 角色列表 通过第三层for循环渲染三级权限 掌握程度 掌握 4 9通过第三层for循环渲染三级权限 了解如何设置权限内容垂直居中 要点提示 角色列表 美化角色下权限的UI结构 掌握程度 了解 4 10美化角色下权限的UI结构 练习 实现循环生成角色下权限 提示 按照步骤完成练习A 编写for循环生成一级权限B 编写嵌套for循环生成二级 三级权限C 美化所有权限内容结构 8分钟 4 10美化角色下权限的UI结构 案例 实现循环生成角色下权限 了解如何弹出确定取消窗口 要点提示 角色列表 点击删除权限按钮弹出确认提示框 掌握程度 掌握 4 11点击删除权限按钮弹出确认提示框 了解如何发送请求删除角色下权限 要点提示 角色列表 完成删除角色下指定权限的功能 掌握程度 掌握 4 12完成删除角色下指定权限的功能 练习 实现删除角色下权限 提示 按照步骤完成练习A 当用户点击权限右侧的 X 时 弹出提示窗询问用户是否删除权限B 当用户点击确定时 发送请求完成权限删除 5分钟 4 12完成删除角色下指定权限的功能 案例 实现删除角色下权限 Contents 目 录 修改用户 删除用户推送代码到码云权限列表角色列表分配权限 角色 了解如何弹出分配权限对话框 要点提示 分配权限 弹出分配权限对话框并请求权限数据 掌握程度 了解 5 1弹出分配权限对话框并请求权限数据 导入并注册el tree组件 要点提示 分配权限 初步配置并使用el tree树形控件 掌握程度 了解 5 2初步配置并使用el tree树形控件 了解如何为树形控件添加复选框了解如何设置选中树形控件的值 要点提示 分配权限 优化树形控件的展示效果 掌握程度 了解 5 3优化树形控件的展示效果 了解默认勾选如何实现 要点提示 分配权限 分析已有权限默认勾选的实现思路 掌握程度 掌握 5 4分析已有权限默认勾选的实现思路 练习 编写代码请求权限数据并将之展现在树形控件中 提示 按照步骤完成练习A 请求权限数据B 将数据绑定在树形控件中展示C 给树形控件的节点添加复选框和节点值 5分钟 5 4分析已有权限默认勾选的实现思路 案例 展示树形控件 了解如何根据defKeys数组设置树形组件中的默认选中效果 要点提示 分配权限 加载当前角色已有的权限 掌握程度 掌握 5 5加载当前角色已有的权限 了解在关闭对话框时重置defKeys数组以及userInfo 要点提示 分配权限 在关闭对话框时重置defKeys数组 掌握程度 掌握 5 6在关闭对话框时重置defKeys数组 了解如何发送请求将用户选择的树形控件权限更新到用户角色权限中 要点提示 分配权限 调用API完成分配权限的功能 掌握程度 了解 5 7调用API完成分配权限的功能 练习 完成默认勾选显示用户角色权限完成点击确定按钮时保存用户权限 提示 按照步骤完成练习A 使用default checked keys绑定默认选中树节点的数组B 使用递归函数获取当前角色拥有的权限C 当用户点击确定时 发送请求保存最新的权限信息 8分钟 5 7调用API完成分配权限的功能 案例 完成权限分配功能 在Users vue中编写代码实现对话框 要点提示 分配角色 渲染分配角色的对话框并请求角色列表数据 掌握程度 掌握 5 8渲染分配角色的对话框并请求角色列表数据 了解如何使用select下拉菜单 要点提示 分配角色 渲染角色列表的select下拉菜单 掌握程度 掌握 5 9渲染角色列表的select下拉菜单 了解如何发送请求完成分配角色的操作 要点提示 分配角色 完成分配角色的功能 掌握程度 掌握 5 10完成分配角色的功能 了解如何将代码推送到码云 要点提示 分支操作 提交本地代码到Git仓库并推送到码云 掌握程度 了解 5 11提交本地代码到Git仓库并推送到码云 练习 完成分配角色的功能 提示 按照步骤完成练习A 打开Users vue组件 为分配角色按钮添加点击事件B 添加弹出框代码C 在弹窗口中添加下拉菜单D 请求角色数据 并将数据渲染在下拉菜单E 当用户点击弹出框的确定时 发送请求更新用户角色 5分钟 5 11提交本地代码到Git仓库并推送到码云 案例 完成分配角色 今日复习 当我们将MessageBox组件的confirm挂载到Vue实例之后 我们可以通过constresult awaitthis confirm catch err err 进行弹窗在我们显示权限列表数据的时候 使用了作用域插槽来处理权限等级的显示 当我们为el tag添加slot sco属性时 将会在组件的右侧出现 X 号当我们为el tree添加slot sco属性时 将会在树节点的前面出现复选框 当我们添加slot sco属性时 将会默认展开所有树节点 我们还可以通过slot sco属性设置默认选中的树节点 vue第九天 今日复习 今日复习 当我们将MessageBox组件的confirm挂载到Vue实例之后 我们可以通过constresult awaitthis confirm catch err err 进行弹窗在我们显示权