咱们的电商后盾管理系统最初还有商品治理、订单治理、数据统计三个模块没有实现，然而前面的内容和后面的基本相同，包含：显示数据、增加数据、编辑信息以及删除等操作

1.商品治理

商品治理菜单中次要是用来显示商品数据并且蕴含一些基本操作：减少商品、编辑信息、删除等，以及商品参数和分类的治理

商品治理菜单中蕴含三个子菜单项：商品列表、分类参数、商品分类。

1.1 商品列表

商品列表次要由Breadcrum面包屑、Card面板、Table表格、Button按钮组成

这部分和用户治理局部很相似，次要是前端向服务器发送数据申请，服务器收到申请，响应数据，返回给前端,前端把响应的数据存储在定义好的数组中，而后在Table表格中交给数据源model，而后每一个Table-item承受数组中的对应的字段信息。这样商品数据就展现进去了。

至于增加商品、编辑商品以及删除商品局部，和之前的都相似，次要是申请接口的变动，思路是统一的，不再赘述

1.2 分类参数

分类参数中次要是对商品各个分类中的参数进行具体操作。

比拟重要的是级联选择器以及扩大按钮（expand）

咱们通过级联选择器抉择出指定的商品，而后就能够在下方的Table表格中批改它的参数。

Cascader级联选择器是咱们我的项目中常常应用的局部，个人感觉和Tree树形控件思维上很类似。

上面介绍一下Cascader的几个重要属性

  • value:选中项绑定值
  • options:可选项数据源，也就是咱们级联选择器中显示数据的局部
  • props:配置选项，也就是级联的选择器中的制订options数数据源中的数据，那个字段是显示数据，那个字段是children子选项等
  • expand-trigger :次级菜单的开展形式，默认是click,我这里设置的hover

还有一个重要的事件

  • change:当绑定值变动时触发事件，也就是咱们抉择好具体的三级目录时，会立即触发此事件，申请该分类的具体参数

整体思路是这样的：

首先咱们在页面创立结束时，前端向服务器发送数据申请，咱们把返回的数据存储在提前定义的数组中，而后把数组传给Cascader级联选择器的options属性（留神须要v-bind动静绑定），而后须要设置setpros，把它传给props，也就是配置选项，这样咱们的级联选择器的根本架构实现。
而后须要增加change事件，当咱们抉择好三级分类后，change事件会默认存储咱们选择项中的绑定值，也就是id,咱们在申请数据时，须要携带该id.这样就大略实现了级联选择器。

setPorps:{   value:'id',   label:'name',   children:'children'}

其余的增加参数和编辑参数，不再赘述

1.3 商品分类

次要就是展现商品的各级分类以及增加分类操作，比拟重要的是Table表格中的树形构造，这个须要用到插件，个人感觉用到的中央不多，就没有记录了！

2.订单治理

订单治理中只有一个子选项：订单列表

只须要申请订单列表数据后，展现在Table表格中即可。其余的不再赘述

3.数据统计

数据统计中只有一个子选项：数据报表

这里用到了echarts图表，这部分还是比拟重要的，我这里具体介绍一些，vue我的项目中如何应用echarts

  • 首先须要在vue我的项目中装置并引入echarts

装置echarts很简略，只须要执行以下命令：

npm install echarts --save

引入的形式由两种：全局引入或者部分引入

全局引入的话，须要在main.js文件中

import echarts from 'echarts'Vue.prototype.$echarts=echarts

部分引入的话，就只须要在对应的.vue文件中引入即可

  • 定义一个固定宽高的容器来存储图表
<div id="main" style="width: 600px;height:400px;"></div>
  • 在script标签内绘制咱们的图表(初始化实例、编辑配置项、执行配置项)
 <script type="text/javascript">      // 基于筹备好的dom，初始化echarts实例      var myChart = echarts.init(document.getElementById('main'));      // 指定图表的配置项和数据      var option = {        title: {          text: 'ECharts 入门示例'        },        tooltip: {},        legend: {          data: ['销量']        },        xAxis: {          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']        },        yAxis: {},        series: [          {            name: '销量',            type: 'bar',            data: [5, 20, 36, 10, 10, 20]          }        ]      };      // 应用刚指定的配置项和数据显示图表。      myChart.setOption(option);    </script>

这样咱们的图表就实现了。

Echarts官网为咱们提供了丰盛的图表款式，咱们能够间接把相干的配置项复制过去，间接用在咱们的我的项目中

至此，咱们的电商后盾管理系统我的项目曾经实现了。总共耗时六天。在理论的操作中，还是学到了很多货色的，我感觉编程思路还是很重要的，你只有晓得他是怎么实现的，至于代码的话就举足轻重了。