day12_电商项目_项目实战day6.ppt

Vue_day12,Contents,目,录,添加商品 订单列表 数据统计,Contents,目,录,添加商品 订单列表 数据统计,了解upload上传组件的基本使用形式,要点提示,商品添加-初步使用upload上传组件,掌握程度：了解,1.1 初步使用upload上传组件,了解如何通过headers属性添加请求头,要点提示,商品添加-手动为upload组件绑定headers请求头,掌握程度：了解,1.2 手动为upload组件绑定headers请求头,了解在图片上传成功之后，将上传结果处理之后添加到pics中,要点提示,商品添加-监听upload组件的on-success事件,掌握程度：了解,1.3 监听upload组件的on-success事件,了解当用户点击X号移除图片时，同时也要删除pics数组中对应的元素,要点提示,商品添加-监听upload组件的on-remove事件,掌握程度：了解,1.4 监听upload组件的on-remove事件,了解如何实现图片预览,要点提示,商品添加-实现图片的预览效果,掌握程度：了解,1.5 商品添加-实现图片的预览效果,练习,完成图片上传和预览,提示,按照步骤完成图片上传和预览A.在element.js中引入并注册el-uploadB.通过:action设置上传地址，通过:headers设置请求头添加Authorization信息(token)C.添加:on-success，:on-remove，:on-preview事件处理函数，完成上传成功之后的处理，移除之后的处理，预览时弹出对话框显示图片的处理。,10分钟,1.5 商品添加-实现图片的预览效果,案例：完成图片上传和预览,了解如何安装，导入，使用vue-quill-editor,要点提示,商品添加-安装并配置vue-quill-editor,掌握程度：了解,1.6 安装并配置vue-quill-editor,了解如何实现表单的预验证,要点提示,商品添加-实现表单数据的预验证,掌握程度：了解,1.7 实现表单数据的预验证,了解如何使用lodash进行深拷贝将转换之后的数据添加到深拷贝的对象中,要点提示,商品添加-把goods_cat从数组转换为字符串,掌握程度：了解,1.8 把goods_cat从数组转换为字符串,了解如何将动态参数和静态属性数据添加到attrs数组中,要点提示,商品添加-处理attrs数组,掌握程度：了解,1.9 处理attrs数组,了解如何发送请求完成商品添加,要点提示,商品添加-完成商品添加操作,掌握程度：了解,1.10 完成商品添加操作,练习,完成配置使用富文本插件vue-quill-editor处理good_cat，处理attrs完成商品添加,提示,按照步骤完成商品添加A.安装和导入vue-quill-editorB.安装和导入lodash，使用lodash进行深拷贝C.将处理过后的good_cat数据添加到深拷贝的对象中D.将动态参数和静态属性的数据处理添加到深拷贝的对象的attrs中E.发送请求完成商品添加,10分钟,1.10 完成商品添加操作,案例：完成商品添加,了解如何推送代码以及合并子分支,要点提示,分支操作-将goods_list分支的代码合并且推送到码云,掌握程度：了解,1.11 将goods_list分支的代码合并且推送到码云,上午复习,Vue第十二天-上午复习,在el-upload组件中，我们可以通过:headers属性设置请求头，通过:on-success设置请求成功之后的处理函数，通过:on-remove设置点击删除之后的处理函数，通过:on-preview设置点击预览之后的处理函数。当我们在依赖中安装富文本插件之后,需要在main.js中编写代码导入富文本插件，还需要编写代码导入富文本插件的样式，最后通过Vue.use(VueQuillEditor)全局注册组件,上午复习,Vue第十二天-上午复习,在el-upload组件中，我们可以通过:headers属性设置请求头，通过:on-success设置请求成功之后的处理函数，通过:on-remove设置点击删除之后的处理函数，通过:on-preview设置点击预览之后的处理函数。当我们在依赖中安装富文本插件之后,需要在main.js中编写代码导入富文本插件，还需要编写代码导入富文本插件的样式，最后通过Vue.use(VueQuillEditor)全局注册组件,Contents,目,录,添加商品 订单列表 数据统计,了解创建子分支order并推送到码云,要点提示,分支操作-创建order子分支,掌握程度：了解,2.1 创建order子分支,了解添加路由，路由规则以及页面基本布局操作,要点提示,订单列表-通过路由渲染订单列表页面,掌握程度：了解,2.2 通过路由渲染订单列表页面,了解如何发送请求获取订单列表数据,要点提示,订单列表-根据分页获取订单数据列表,掌握程度：了解,2.3 根据分页获取订单数据列表,了解如何将数据渲染到表格中展示,要点提示,订单列表-渲染订单table表格,掌握程度：了解,2.4 渲染订单table表格,了解如何实现分页,要点提示,订单列表-实现分页功能,掌握程度：了解,2.5 实现分页功能,练习,完成订单列表展示，分页,提示,按照步骤完成订单列表A.创建order分支B.创建Order.vue组件及规则C.发送请求获取订单列表数据D.将数据绑定到表格中展示E.实现分页,8分钟,2.5 实现分页功能,案例：完成订单列表展示，分页,了解如何引入citydata.js并将数据绑定到级联选择器中显示,要点提示,订单列表-实现省市区县数据联动效果,掌握程度：了解,2.6 实现省市区县数据联动效果,了解如何布局物流进度对话框,要点提示,订单列表-展示物流进度对话框并获取物流信息,掌握程度：了解,2.7 展示物流进度对话框并获取物流信息,了解如何使用timeline组件展示物流信息,要点提示,订单列表-手动导入并使用Timeline组件,掌握程度：了解,2.8 手动导入并使用Timeline组件,了解如何推送代码,要点提示,分支操作-将本地order分支的代码合并且推送到码云,掌握程度：了解,2.9 将本地order分支的代码合并且推送到码云,练习,完成订单列表,提示,按照步骤完成订单列表A.创建order分支B.创建Order.vue组件及规则C.发送请求获取订单列表数据D.将数据绑定到表格中展示E.实现分页,8分钟,