今日目标

1.完成商品添加
2.完成订单列表
3.完成数据统计展示

1.添加商品

A.完成图片上传

使用upload组件完成图片上传
在element.js中引入upload组件，并注册
因为upload组件进行图片上传的时候并不是使用axios发送请求
所以，我们需要手动为上传图片的请求添加token，即为upload组件添加headers属性

  1. //在页面中添加upload组件，并设置对应的事件和属性
  2. <el-tab-pane label="商品图片" name="3">
  3.   <!-- 商品图片上传
  4.   action:指定图片上传api接口
  5.   :on-preview ： 当点击图片时会触发该事件进行预览操作,处理图片预览
  6.   :on-remove : 当用户点击图片右上角的X号时触发执行
  7.   :on-success：当用户点击上传图片并成功上传时触发
  8.   list-type ：设置预览图片的方式
  9.   :headers ：设置上传图片的请求头 -->
  10.   <el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" list-type="picture" :headers="headerObj">
  11.     <el-button size="small" type="primary">点击上传</el-button>
  12.   </el-upload>
  13. </el-tab-pane>
  14. //在el-card卡片视图下面添加对话框用来预览图片
  15. <!-- 预览图片对话框 -->
  16. <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
  17.   <img :src="previewPath" class="previewImg" />
  18. </el-dialog>
  20. //在data中添加数据
  21. data(){
  22.   return {
  23.     ......
  24.     //添加商品的表单数据对象
  25.     addForm: {
  26.       goods_name: '',
  27.       goods_price: 0,
  28.       goods_weight: 0,
  29.       goods_number: 0,
  30.       goods_cat: [],
  31.       //上传图片数组
  32.       pics: []
  33.     },
  34.     //上传图片的url地址
  35.     uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
  36.     //图片上传组件的headers请求头对象
  37.     headerObj: { Authorization: window.sessionStorage.getItem('token') },
  38.     //保存预览图片的url地址
  39.     previewPath: '',
  40.     //控制预览图片对话框的显示和隐藏
  41.     previewVisible:false
  42.   }
  43. },
  44. //在methods中添加事件处理函数
  45. methods:{
  46.   .......
  47.   handlePreview(file) {
  48.     //当用户点击图片进行预览时执行，处理图片预览
  49.     //形参file就是用户预览的那个文件
  50.     this.previewPath = file.response.data.url
  51.     //显示预览图片对话框
  52.     this.previewVisible = true
  53.   },
  54.   handleRemove(file) {
  55.     //当用户点击X号删除时执行
  56.     //形参file就是用户点击删除的文件
  57.     //获取用户点击删除的那个图片的临时路径
  58.     const filePath = file.response.data.tmp_path
  59.     //使用findIndex来查找符合条件的索引
  60.     const index = this.addForm.pics.findIndex(item => item.pic === filePath)
  61.     //移除索引对应的图片
  62.     this.addForm.pics.splice(index, 1)
  63.   },
  64.   handleSuccess(response) {
  65.     //当上传成功时触发执行
  66.     //形参response就是上传成功之后服务器返回的结果
  67.     //将服务器返回的临时路径保存到addForm表单的pics数组中
  68.     this.addForm.pics.push({ pic: response.data.tmp_path })
  69.   }
  70. }

B.使用富文本插件

想要使用富文本插件vue-quill-editor，就必须先从依赖安装该插件
引入并注册vue-quill-editor，打开main.js，编写如下代码

  1. //导入vue-quill-editor（富文本编辑器）
  2. import VueQuillEditor from 'vue-quill-editor'
  3. //导入vue-quill-editor的样式
  4. import 'quill/dist/quill.core.css'
  5. import 'quill/dist/quill.snow.css'
  6. import 'quill/dist/quill.bubble.css'
  7. ......
  8. //全局注册组件
  9. Vue.component('tree-table', TreeTable)
  10. //全局注册富文本组件
  11. Vue.use(VueQuillEditor)

使用富文本插件vue-quill-editor

  1. <!-- 富文本编辑器组件 -->
  2. <el-tab-pane label="商品内容" name="4">
  3.   <!-- 富文本编辑器组件 -->
  4.   <quill-editor v-model="addForm.goods_introduce"></quill-editor>
  5.   <!-- 添加商品按钮 -->
  6.   <el-button type="primary" class="btnAdd">添加商品</el-button>
  7. </el-tab-pane>
  9. //在数据中添加goods_introduce
  10. //添加商品的表单数据对象
  11. addForm: {
  12.   goods_name: '',
  13.   goods_price: 0,
  14.   goods_weight: 0,
  15.   goods_number: 0,
  16.   goods_cat: [],
  17.   //上传图片数组
  18.   pics: [],
  19.   //商品的详情介绍
  20.   goods_introduce:''
  21. }
  22. //在global.css样式中添加富文本编辑器的最小高度
  23. .ql-editor{
  24.     min-height: 300px;
  25. }
  26. //给添加商品按钮添加间距
  27. .btnAdd{
  28.   margin-top:15px;
  29. }

C.添加商品

完成添加商品的操作
在添加商品之前，为了避免goods_cat数组转换字符串之后导致级联选择器报错
我们需要打开vue控制条，点击依赖，安装lodash，把addForm进行深拷贝

  1. //打开Add.vue，导入lodash
  2. <script>
  3. //官方推荐将lodash导入为_
  4. import _ from 'lodash'
  6. //给添加商品按钮绑定点击事件
  7. <!-- 添加商品按钮 -->
  8. <el-button type="primary" class="btnAdd" @click="add">添加商品</el-button>
  9. //编写点击事件完成商品添加
  10. add(){
  11.   this.$refs.addFormRef.validate(async valid=>{
  12.     if(!valid) return this.$message.error("请填写必要的表单项!")
  14.     //将addForm进行深拷贝，避免goods_cat数组转换字符串之后导致级联选择器报错
  15.     const form = _.cloneDeep(this.addForm)
  16.     //将goods_cat从数组转换为"1,2,3"字符串形式
  17.     form.goods_cat = form.goods_cat.join(",")
  18.     //处理attrs数组，数组中需要包含商品的动态参数和静态属性
  19.     //将manyTableData（动态参数）处理添加到attrs
  20.     this.manyTableData.forEach(item=>{
  21.       form.attrs.push({ attr_id:item.attr_id, attr_value:item.attr_vals.join(" ") }) 
  22.     })
  23.     //将onlyTableData（静态属性）处理添加到attrs
  24.     this.onlyTableData.forEach(item=>{
  25.       form.attrs.push({ attr_id:item.attr_id, attr_value:item.attr_vals }) 
  26.     })
  28.     //发送请求完成商品的添加,商品名称必须是唯一的
  29.     const {data:res} = await this.$http.post('goods',form)
  30.     if(res.meta.status !== 201){
  31.       return this.$message.error('添加商品失败')
  32.     }
  33.     this.$message.success('添加商品成功')
  34.     //编程式导航跳转到商品列表
  35.     this.$router.push('/goods')
  36.   })
  37. }
  38. </script>

D.推送代码

推送goods_list分支到码云
将代码添加到暂存区： git add .
将代码提交到本地仓库： git commit -m “完成商品功能开发”
将代码推送到码云： git push
切换到master主分支： git checkout master
将goods_list分支代码合并到master: git merge goods_list
将master推送到码云： git push

2.订单列表

A.创建分支

创建order子分支并推送到码云
创建order子分支: git checkout -b order
将order分支推送到码云： git push -u origin order

B.创建路由

创建订单列表路由组件并添加路由规则

  1. //在components中新建order文件夹，新建Order.vue组件，组件中添加代码如下
  2. <template>
  3.     <div>
  4.         <h3>订单列表</h3>
  5.         <!-- 面包屑导航 -->
  6.         <el-breadcrumb separator="/">
  7.             <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  8.             <el-breadcrumb-item>订单管理</el-breadcrumb-item>
  9.             <el-breadcrumb-item>订单列表</el-breadcrumb-item>
  10.         </el-breadcrumb>
  11.         <!-- 卡片视图区域 -->
  12.         <el-card>
  13.             <!-- 搜索栏 -->
  14.             <el-row :gutter="20">
  15.                 <el-col :span="8">
  16.                     <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable>
  17.                         <el-button slot="append" icon="el-icon-search" ></el-button>
  18.                     </el-input>
  19.                 </el-col>
  20.             </el-row>
  21.         </el-card>
  22.     </div>
  23. </template>
  25. <script>
  26. export default {
  27.   data() {
  28.     return {
  29.         //查询条件
  30.         queryInfo:{
  31.             query:'',
  32.             pagenum:1,
  33.             pagesize:10
  34.         }
  35.     }
  36.   },
  37.   created() {
  39.   },
  40.   methods: {
  42.   }
  43. }
  44. </script>
  46. <style lang="less" scoped>
  48. </style>
  50. //打开router.js导入Order.vue并添加规则
  51. import Order from './components/order/Order.vue'
  53. path: '/home', component: Home, redirect: '/welcome', children: [
  54.   { path: "/welcome", component: Welcome },
  55.   { path: "/users", component: Users },
  56.   { path: "/rights", component: Rights },
  57.   { path: "/roles", component: Roles  },
  58.   { path: "/categories", component: Cate  },
  59.   { path: "/params", component: Params  },
  60.   { path: "/goods", component: GoodList  },
  61.   { path: "/goods/add", component: GoodAdd  },
  62.   { path: "/orders", component: Order  }
  63. ]

C.实现数据展示及分页

  1. <!-- 卡片视图区域 -->
  2. <el-card>
  3.     <!-- 搜索栏 -->
  4.     <el-row :gutter="20">
  5.         <el-col :span="8">
  6.             <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable>
  7.                 <el-button slot="append" icon="el-icon-search"></el-button>
  8.             </el-input>
  9.         </el-col>
  10.     </el-row>
  12.     <!-- 订单表格 -->
  13.     <el-table :data="orderList" border stripe>
  14.         <el-table-column type="index"></el-table-column>
  15.         <el-table-column label="订单编号" prop="order_number"></el-table-column>
  16.         <el-table-column label="订单价格" prop="order_price"></el-table-column>
  17.         <el-table-column label="是否付款" prop="pay_status">
  18.             <template slot-scope="scope">
  19.                 <el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
  20.                 <el-tag type="danger" v-else>未付款</el-tag>
  21.             </template>
  22.         </el-table-column>
  23.         <el-table-column label="是否发货" prop="is_send"></el-table-column>
  24.         <el-table-column label="下单时间" prop="create_time">
  25.             <template slot-scope="scope">
  26.                 {{scope.row.create_time | dateFormat}}
  27.             </template>
  28.         </el-table-column>
  29.         <el-table-column label="操作" width="125px">
  30.             <template slot-scope="scope">
  31.                 <el-button size="mini" type="primary" icon="el-icon-edit"></el-button>
  32.                 <el-button size="mini" type="success" icon="el-icon-location"></el-button>
  33.             </template>
  34.         </el-table-column>
  35.     </el-table>
  37.     <!-- 分页 -->
  38.     <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[3, 5, 10, 15]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
  39.     </el-pagination>
  40. </el-card>
  42. <script>
  43. export default {
  44.   data() {
  45.     return {
  46.       //查询条件
  47.       queryInfo: {
  48.         query: '',
  49.         pagenum: 1,
  50.         pagesize: 10
  51.       },
  52.       //订单列表数据
  53.       orderList: [],
  54.       //数据总条数
  55.       total: 0
  56.     }
  57.   },
  58.   created() {
  59.     this.getOrderList()
  60.   },
  61.   methods: {
  62.     async getOrderList() {
  63.       const { data: res } = await this.$http.get('orders', {
  64.         params: this.queryInfo
  65.       })
  67.       if (res.meta.status !== 200) {
  68.         return this.$message.error('获取订单列表数据失败!')
  69.       }
  71.       this.total = res.data.total
  72.       this.orderList = res.data.goods
  73.     },
  74.     handleSizeChange(newSize){
  75.         this.queryInfo.pagesize = newSize
  76.         this.getOrderList()
  77.     },
  78.     handleCurrentChange(newPage){
  79.         this.queryInfo.pagenum = newPage
  80.         this.getOrderList()
  81.     }
  82.   }
  83. }
  84. </script>

D.制作省市区县联动

打开今天的资料，找到素材文件夹，复制citydata.js文件到components/order文件夹中
然后导入citydata.js文件

  1. <script>
  2.   import cityData from "./citydata.js"
  3. </script>

具体代码如下：

  1. //给修改地址按钮添加点击事件
  2. <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditAddress"></el-button>
  3. //添加修改地址对话框,在卡片视图下方添加
  4. <!-- 修改地址对话框 -->
  5. <el-dialog title="修改收货地址" :visible.sync="addressVisible" width="50%" @close="addressDialogClosed">
  6.     <!-- 添加表单 -->
  7.     <el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
  8.         <el-form-item label="省市区县" prop="address1">
  9.             <el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
  10.         </el-form-item>
  11.         <el-form-item label="详细地址" prop="address2">
  12.             <el-input v-model="addressForm.address2"></el-input>
  13.         </el-form-item>
  14.     </el-form>
  15.     <span slot="footer" class="dialog-footer">
  16.         <el-button @click="addressVisible = false">取 消</el-button>
  17.         <el-button type="primary" @click="addressVisible = false">确 定</el-button>
  18.     </span>
  19. </el-dialog>
  21. //js部分的代码
  22. <script>
  23. import cityData from "./citydata.js"
  24. export default {
  25.   data() {
  26.     return {
  27.       ......
  28.       //控制修改地址对话框的显示和隐藏
  29.       addressVisible:false,
  30.       //修改收货地址的表单
  31.       addressForm:{
  32.           address1:[],
  33.           address2:''
  34.       },
  35.       addressFormRules:{
  36.           address1:[{ required: true, message: '请选择省市区县', trigger: 'blur' }],
  37.           address2:[{ required: true, message: '请输入详细地址', trigger: 'blur' }],
  38.       },
  39.       //将导入的cityData数据保存起来
  40.       cityData:cityData
  41.       }
  42.   },methods: {
  43.     ......
  44.     showEditAddress() {
  45.       //当用户点击修改收货地址按钮时触发
  46.       this.addressVisible = true;
  47.     },
  48.     addressDialogClosed(){
  49.         this.$refs.addressFormRef.resetFields()
  50.     }
  51.   }
  52. }
  53. </script>
  54. <style lang="less" scoped>
  55. .el-cascader{
  56.     width: 100%;
  57. }
  58. </style>

E.制作物流进度对话框

因为我们使用的是element-ui中提供的Timeline组件，所以需要导入并注册组件
打开element.js,编写代码会进行导入和注册

  1. import {
  2.     Timeline,TimelineItem
  3. } from 'element-ui'
  5. Vue.use(Timeline)
  6. Vue.use(TimelineItem)

打开Order.vue文件，添加代码实现物流进度对话框

  1. <!-- 物流信息进度对话框 -->
  2. <el-dialog title="物流进度" :visible.sync="progressVisible" width="50%">
  3.     <!-- 时间线组件  -->
  4.     <el-timeline>
  5.         <el-timeline-item v-for="(activity, index) in progressInfo" 
  6.         :key="index" :timestamp="activity.time">
  7.             {{activity.context}}
  8.         </el-timeline-item>
  9.     </el-timeline>
  10. </el-dialog>
  12. <script>
  13. import cityData from './citydata.js'
  14. export default {
  15.   data() {
  16.     return {
  17.       ......
  18.       //控制物流进度对话框的显示和隐藏
  19.       progressVisible: false,
  20.       //保存物流信息
  21.       progressInfo: []
  22.       }
  23.   },methods: {
  24.     ......
  25.     async showProgress() {
  26.       //发送请求获取物流数据
  27.       const { data: res } = await this.$http.get('/kuaidi/804909574412544580')
  29.       if (res.meta.status !== 200) {
  30.         return this.$message.error('获取物流进度失败!')
  31.       }
  32.       this.progressInfo = res.data
  33.       //显示对话框
  34.       this.progressVisible = true
  35.     }
  36.   }
  37. }
  38. </script>

F.推送代码

将order分支代码推送至码云
将代码添加到暂存区： git add .
将代码提交到本地仓库： git commit -m “完成订单列表功能开发”
将代码推送到码云： git push
切换到master主分支： git checkout master
将goods_list分支代码合并到master: git merge order
将master推送到码云： git push

3.数据统计

A.创建子分支

创建report子分支并推送到码云
创建report子分支: git checkout -b report
将report分支推送到码云： git push -u origin report

B.创建路由

创建数据统计路由组件并添加路由规则

  1. //在components中新建report文件夹，新建Report.vue组件，组件中添加代码如下
  2. <template>
  3.     <div>
  4.         <h3>数据报表</h3>
  5.         <!-- 面包屑导航 -->
  6.         <el-breadcrumb separator="/">
  7.             <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  8.             <el-breadcrumb-item>数据统计</el-breadcrumb-item>
  9.             <el-breadcrumb-item>数据报表</el-breadcrumb-item>
  10.         </el-breadcrumb>
  11.         <!-- 卡片视图区域 -->
  12.         <el-card></el-card>
  13.     </div>
  14. </template>
  16. <script>
  17. export default {
  18.   data() {
  19.     return {
  21.     }
  22.   },created(){
  24.   },methods:{
  26.   }
  27. }
  28. </script>
  30. <style lang="less" scoped>
  32. </style>

打开router.js，导入Report.vue并设置路由规则

  1. import Report from './components/report/Report.vue'
  2. path: '/home', component: Home, redirect: '/welcome', children: [
  3.   { path: "/welcome", component: Welcome },
  4.   { path: "/users", component: Users },
  5.   { path: "/rights", component: Rights },
  6.   { path: "/roles", component: Roles  },
  7.   { path: "/categories", component: Cate  },
  8.   { path: "/params", component: Params  },
  9.   { path: "/goods", component: GoodList  },
  10.   { path: "/goods/add", component: GoodAdd  },
  11.   { path: "/orders", component: Order  },
  12.   { path: "/reports", component: Report  }
  13. ]

C.导入ECharts并使用

  1. <template>
  2.     <div>
  3.         <h3>数据报表</h3>
  4.         <!-- 面包屑导航 -->
  5.         <el-breadcrumb separator="/">
  6.             <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  7.             <el-breadcrumb-item>数据统计</el-breadcrumb-item>
  8.             <el-breadcrumb-item>数据报表</el-breadcrumb-item>
  9.         </el-breadcrumb>
  10.         <!-- 卡片视图区域 -->
  11.         <el-card>
  12.             <div id="main" style="width:750px;height:400px;"></div>
  13.         </el-card>
  14.     </div>
  15. </template>
  17. <script>
  18. //导入echarts
  19. import echarts from 'echarts'
  20. //导入lodash
  21. import _ from 'lodash'
  22. export default {
  23.   data() {
  24.     return {
  25.       //需要跟请求的折线图数据合并的options
  26.       options: {
  27.         title: {
  28.           text: '用户来源'
  29.         },
  30.         tooltip: {
  31.           trigger: 'axis',
  32.           axisPointer: {
  33.             type: 'cross',
  34.             label: {
  35.               backgroundColor: '#E9EEF3'
  36.             }
  37.           }
  38.         },
  39.         grid: {
  40.           left: '3%',
  41.           right: '4%',
  42.           bottom: '3%',
  43.           containLabel: true
  44.         },
  45.         xAxis: [
  46.           {
  47.             boundaryGap: false
  48.           }
  49.         ],
  50.         yAxis: [
  51.           {
  52.             type: 'value'
  53.           }
  54.         ]
  55.       }
  56.     }
  57.   },
  58.   created() {},
  59.   async mounted() {
  60.     //在页面dom元素加载完毕之后执行的钩子函数mounted
  61.     // 基于准备好的dom，初始化echarts实例
  62.     var myChart = echarts.init(document.getElementById('main'))
  63.     //准备数据和配置项
  64.     //发送请求获取折线图数据
  65.     const { data: res } = await this.$http.get('reports/type/1')
  67.     if (res.meta.status !== 200) {
  68.       return this.$message.error('获取折线图数据失败')
  69.     }
  71.     //合并res.data和this.options
  72.     const result = _.merge(res.data,this.options)
  74.     // 使用获取的数据展示图表
  75.     myChart.setOption(result)
  76.   },
  77.   methods: {}
  78. }
  79. </script>
  81. <style lang="less" scoped>
  82. </style>

D.推送代码

推送report分支到码云
将代码添加到暂存区： git add .
将代码提交到本地仓库： git commit -m “完成数据报表功能开发”
将代码推送到码云： git push
切换到master主分支： git checkout master
将report分支代码合并到master: git merge report
将master推送到码云： git push