共计 2132 个字符,预计需要花费 6 分钟才能阅读完成。
咱们的电商后盾管理系统最初还有商品治理、订单治理、数据统计三个模块没有实现,然而前面的内容和后面的基本相同,包含:显示数据、增加数据、编辑信息以及删除等操作
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 官网为咱们提供了丰盛的图表款式,咱们能够间接把相干的配置项复制过去,间接用在咱们的我的项目中
至此,咱们的电商后盾管理系统我的项目曾经实现了。总共耗时六天。在理论的操作中,还是学到了很多货色的,我感觉编程思路还是很重要的,你只有晓得他是怎么实现的,至于代码的话就举足轻重了。