day10_电商项目_项目实战day4

1、Vue_day10,Contents,目,录,商品分类 参数管理,Contents,目,录,商品分类 参数管理,了解商品分类功能是做什么的,要点提示,商品分类-介绍商品分类功能的作用,掌握程度：了解,1.1 介绍商品分类功能的作用,了解如何创建子分支并上传到码云,要点提示,创建goods_cate子分支并push到码云中,掌握程度：了解,1.2 创建goods_cate子分支并push到码云中,了解如何添加商品分类子组件以及规则,要点提示,商品分类-通过路由加载商品分类组件,掌握程度：了解,1.3 通过路由加载商品分类组件,了解商品分类组件的基本布局结构,要点提示,商品分类-绘制商品分类组件的

2、基本页面布局,掌握程度：了解,1.4 绘制商品分类组件的基本页面布局,了解如何发送请求获取商品分类数据,要点提示,商品分类-调用API获取商品分类列表数据,掌握程度：了解,1.5 调用API获取商品分类列表数据,了解vue-table-with-tree-grid树形表格组件该如何进行使用,要点提示,商品分类-初步使用vue-table-with-tree-grid树形表格组件,掌握程度：了解,1.6 学会使用第三方插件,练习,完成商品分类页面基本布局 请求商品分类数据并使用vue-table-with-tree-grid插件展示,提示,按照步骤完成商品分类页面 A.新建goods_cate分

3、支并推送到码云 B.创建categories子级路由并设置规则 C.修改Cate.vue组件完成基本布局 D.参考接口文档发送请求获取商品分类数据 E.安装第三方插件vue-table-with-tree-grid F.注册第三方插件vue-table-with-tree-grid G.使用vue-table-with-tree-grid展示数据,10分钟,1.6 学会使用第三方插件,案例：完成商品分类页面基本布局,了解如何使用columns数组设置自定义列,要点提示,商品分类-使用自定义模板列渲染表格数据,掌握程度：了解,1.7 使用自定义模板列渲染表格数据,了解使用v-if判断并渲染对应的

4、结构,要点提示,商品分类-渲染排序和操作对应的UI结构,掌握程度：了解,1.8 渲染排序和操作对应的UI结构,了解如何实现分页功能,要点提示,商品分类-实现分页功能,掌握程度：了解,1.9 实现分页功能,了解添加分类对话框的结构,要点提示,商品分类-渲染添加分类的对话框和表单,掌握程度：了解,1.10 渲染添加分类的对话框和表单,练习,完成使用vue-table-with-tree-grid展示分类数据表格 实现分页功能 完成添加分类对话框的基本结构,提示,按照步骤完善商品分类页面 A.使用columns定义表格中的自定义列 B.使用slot属性将插件和columns中的template绑定

5、C.使用el-pagination完成分页功能 D.完成添加分类对话框。,8分钟,1.10 渲染添加分类的对话框和表单,案例：完善商品分类页面功能,了解如何获取父级分类数据,要点提示,商品分类-获取父级分类数据列表,掌握程度：了解,1.11 获取父级分类数据列表,了解如何将数据绑定到级联选择器中展示,要点提示,商品分类-渲染级联选择器,掌握程度：了解,1.12 渲染级联选择器,了解如何获取父级分类数据,要点提示,商品分类-根据父分类的变化处理表单中的数据,掌握程度：了解,1.13 根据父分类的变化处理表单中的数据,练习,完成使用vue-table-with-tree-grid展示分类数据表格

6、实现分页功能 完成添加分类对话框的基本结构,提示,按照步骤完成级联选择器 A.使用columns定义表格中的自定义列 B.使用slot属性将插件和columns中的template绑定 C.使用el-pagination完成分页功能 D.完成添加分类对话框。,8分钟,1.13 根据父分类的变化处理表单中的数据,案例：完善级联选择器,了解重置表单数据,要点提示,商品分类-在对话框的close事件中重置表单数据,掌握程度：了解,1.14 在对话框的close事件中重置表单数据,了解如何发送请求添加分类,要点提示,商品分类-完成添加分类的操作,掌握程度：了解,1.15 完成添加分类的操作,掌握git

7、提交代码的操作,要点提示,分支操作-将goods_cate分支上的代码提交到Git仓库中,掌握程度：了解,1.16 将goods_cate分支上的代码提交到Git仓库中,掌握创建分支的方式,要点提示,分支操作-创建goods_params分支,掌握程度：了解,1.17 创建goods_params分支,练习,完成添加分类的功能 将代码上传到码云,提示,按照步骤完成商品分类 A.在关闭对话框时重置表单 B.在点击对话框中的确定时发送请求完成添加分类的操作 C.上传代码到码云,8分钟,1.17 创建goods_params分支,案例：完成商品分类,上午复习,Vue第十天-上午复习,在安装完了vue

8、-table-with-tree-grid之后，我们可以在main.js中使用import导入该组件并使用Vue.硬compent(tree-table,TreeTable)注册该组件 在vue-table-with-tree-grid组件中，我们必须使用 硬columns属性添加绑定自定义列，并在插槽中使用硬slot绑定columns中设置的template 在级联选择框组件中，我们必须使用 硬expandTrigger=hover设置鼠标悬停触发选择,使用change-on-select设置用户可以选择任一级别的级联菜单,上午复习,Vue第十天-上午复习,在安装完了vue-table-wi

9、th-tree-grid之后，我们可以在main.js中使用import导入该组件并使用Vpent(tree-table,TreeTable)注册该组件 在vue-table-with-tree-grid组件中，我们必须使用 columns属性添加绑定自定义列，并在插槽中使用slot绑定columns中设置的template 在级联选择框组件中，我们必须使用 expandTrigger=hover设置鼠标悬停触发选择,使用change-on-select设置用户可以选择任一级别的级联菜单,Contents,目,录,商品分类 参数管理,掌握创建分支的方式,要点提示,分类参数-介绍分类参数功能的作

10、用,掌握程度：了解,2.1 介绍分类参数功能的作用,了解如何添加Params.vue组件,要点提示,分类参数-通过路由加载分类参数组件页面,掌握程度：了解,2.2 通过路由加载分类参数组件页面,了解分类参数Params.vue组件的基本机构,要点提示,分类参数-渲染分类参数页面的基本UI结构,掌握程度：了解,2.3 渲染分类参数页面的基本UI结构,了解如何请求商品分类列表数据,要点提示,分类参数-调用API获取商品分类列表数据,掌握程度：了解,2.4 调用API获取商品分类列表数据,了解商品分类数据渲染到级联选择框中显示,要点提示,分类参数-渲染商品分类的级联选择框,掌握程度：了解,2.5 渲

11、染商品分类的级联选择框,了解通过判断selectKeys数组的长度来设置级联选择框只能选择三级分类,要点提示,分类参数-控制级联选择框的选中范围,掌握程度：了解,2.6 控制级联选择框的选中范围,练习,完成分类参数页面基本布局 获取商品分类列表数据并展示在级联菜单,提示,按照步骤完成操作 A.创建Params.vue子组件，并添加规则 B.使用el-alert组件展示警告区域 C.请求商品分类列表数据并将数据渲染在级联选择框中显示,8分钟,2.6 控制级联选择框的选中范围,案例：完成分类参数基本结构,了解如何使用el-tabs/el-tab-pane设置页签,要点提示,分类参数-渲染分类参数的

12、Tabs页签,掌握程度：了解,2.7 渲染分类参数的Tabs页签,了解如何添加权限列表子组件以及规则 了解使用computed来添加计算属性,要点提示,分类参数-渲染添加参数按钮并控制按钮的禁用状态,掌握程度：了解,2.8 渲染添加参数按钮并控制按钮的禁用状态,了解如何发送请求获取参数列表数据,要点提示,分类参数-获取参数列表数据,掌握程度：了解,2.9 获取参数列表数据,练习,完成tabs页签的基本设置 在用户选择三级分类时使添加参数/属性按钮启用，反之禁用 在用户切换页签时根据切换的页签发送请求获取数据,提示,按照步骤tabs页签 A.引入并注册页签组件el-tabs,el-pane B.

13、设置页签组件并添加页签中的按钮 C.在用户选择三级分类时使添加参数/属性按钮启用 D.根据级联选择器选择的三级分类发送请求获取相应的参数列表数据,8分钟,2.9 获取参数列表数据,案例：设置tabs页签,了解如何通过给页签添加事件来重新请求参数列表数据,要点提示,分类参数-切换Tabs面板后重新获取参数列表数据,掌握程度：掌握,2.10 调用API获取权限列表的数据,使用不同的data保存请求到的动态参数，静态属性,要点提示,分类参数-将获取到的参数数据挂载到不同的数据源上,掌握程度：掌握,2.11 将获取到的参数数据挂载到不同的数据源上,使用不同的表格将动态参数和静态属性进行渲染展示,要点提

14、示,分类参数-渲染动态参数和静态属性的Table表格,掌握程度：了解,2.12 渲染动态参数和静态属性的Table表格,练习,完成动态参数和静态属性的展示,提示,按照步骤完成数据展示 A.给el-tabs添加tab-click事件，并在事件中请求用户点击的动态参数/静态属性 B.将请求到的数据保存到不同的data中 C.将不同的数据使用不同的table进行展示,8分钟,2.12 渲染动态参数和静态属性的Table表格,案例：完成动态参数和静态属性的展示,了解如何制作添加参数对话框,要点提示,添加参数-渲染添加参数的对话框,掌握程度：掌握,2.13 渲染添加参数的对话框,了解如何发送请求添加动态

15、参数/静态属性,要点提示,添加参数-完成动态参数和静态属性的添加操作,掌握程度：掌握,2.14 完成动态参数和静态属性的添加操作,练习,完成添加动态参数和静态属性,提示,按照步骤完成添加操作 A.制作弹出框并在弹出框中添加表单让用户可以输入动态参数或者静态属性 B.发送请求完成动态参数或者静态属性的添加,8分钟,2.14 完成动态参数和静态属性的添加操作,案例：完成添加动态参数和静态属性,参考添加参数对话框可以制作修改参数对话框,要点提示,修改参数-渲染修改参数的对话框,掌握程度：掌握,2.15 渲染修改参数的对话框,了解如何发送请求完成修改参数的操作,要点提示,修改参数-完成修改参数的操作,

16、掌握程度：掌握,2.16 完成修改参数的操作,渲染修改参数的对话框,了解如何发送请求完成删除参数的操作,要点提示,删除参数-完成删除参数的业务逻辑,掌握程度：了解,2.17 完成删除参数的业务逻辑,今日复习,在安装完了vue-table-with-tree-grid之后，我们可以在main.js中使用import导入该组件并使用Vue.硬compent(tree-table,TreeTable)注册该组件 在vue-table-with-tree-grid组件中，我们必须使用 硬columns属性添加绑定自定义列，并在插槽中使用硬slot绑定columns中设置的template 在级联选择框组件中，我们必须使用 硬expandTrigger=hover设置鼠标悬停触发选择,使用change-on-select设置用户可以选择任一级别的级联菜单 在Vue中，我们可以通过ccomputed添加计算属性,vue第十天-今日复习,今日复习,在安装完了vue-table-with-tree-grid之后，我们可以在main.js中使用import导入该组件并使用Vpent(tree-table,TreeTable)注册该