day12_电商项目_项目实战day6

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分钟 2 9将本地order分支的代码合并且推送到码云 案例 完成订单列表 Contents 目 录 添加商品订单列表数据统计 了解如何创建分支 要点提示 分支操作 创建report子分支 掌握程度 了解 3 1创建report子分支 了解如何添加数据统计组件 要点提示 数据统计 通过路由加载数据报表组件 掌握程度 了解 3 2通过路由加载数据报表组件 了解如何安装echarts 使用echarts 要点提示 数据统计 安装Echarts并渲染Demo图表 掌握程度 了解 3 3安装Echarts并渲染Demo图表 了解如何使用lodash合并两个对象 要点提示 数据统计 获取折线图数据并渲染图表 掌握程度 了解 3 4获取折线图数据并渲染图表 了解如何推送代码 要点提示 分支操作 将本地的report分支合并且推送到码云 掌握程度 了解 3 5将本地的report分支合并且推送到码云 练习 完成数据统计功能 提示 按照步骤完成功能A 创建Report vue组件并布局基本结构B 安装并引入echartsC 发送请求 获取数据D 合并请求到的数据和options数据E 完成数据统计功能 8分钟 3 5将本地的report分支合并且推送到码云 案例 完成数据统计功能 今日复习 在el upload组件中 我们可以通过 headers属性设置请求头 通过 on success设置请求成功之后的处理函数 通过 on remove设置点击删除之后的处理函数 通过 on preview设置点击预览之后的处理函数 当我们在依赖中安装富文本插件之后 需要在main js中编写代码导入富文本插件 还需要编写代码导入富文本插件的样式 最后通过Vue use VueQuillEditor 全局注册组件当我们安装并导入lodash之后 可以调用lodash的cloneDeep 实现深拷贝 调用lodash的cmerge 实现两个对象的合并 vue第十二天 今日复习 今日复习 在el upload组件中 我们可以通过 headers属性设置请求头 通过 on success设置请求成功之后的处理函数 通过 on remove设置点击删除之后的处理函数 通过 on preview设置点击预览之后的处理函数 当我们在依赖中安装富文本插件之后 需要在main js中编写