vue后台管理系统——商品管理模块
电商后台管理系统的功能——商品管理模块
商品管理概述
商品管理模块⽤于维护电商平台的商品信息，包括商品的类型、参数、图⽚、详情等信息。通过商品管理模块可以实现商品的添加、修改、展⽰和删除等功能。
1. 商品列表
在goods⽂件夹下创建List.vue组件
1.1 商品列表功能
实现商品列表布局效果
调⽤后台接⼝获取商品列表数据
const { data: res } = await this.$('goods', { params: this.queryInfo })
if (a.status !== 200) {
return this.$('初始化商品列表失败！ ')
}
// 为商品列表赋值
// 为总数量赋值
获取到的数据中包含时间，但是所获取的时间不是我们想要的格式：
因此我们需要实现时间过滤器功能：
在main.js⼊⼝⽂件中创建⼀个全局过滤器：所有的组件都可以使⽤
pane1.2 添加商品
点击添加商品按钮跳转到添加商品的页⾯
①基本布局与分布条效果
需要使⽤step步骤条组件
添加商品基本布局
分布条组件⽤法
<el-steps :active="activeName-0" finish-status="success" align-center>
<el-step title="基本信息"></el-step>
<el-step title="商品参数"></el-step>
<el-step title="商品属性"></el-step>
<el-step title="商品图⽚"></el-step>
<el-step title="商品内容"></el-step>
<el-step title="完成"></el-step>
</el-steps>
②商品信息选项卡Tab布局效果
Tab 组件的基本使⽤
<el-tabs tab-position="left" v-model="activeName" :before-leave="beforeTabLeave"> <el-tab-pane label="基本信息" name="0"><!-- 基本信息⾯板 --></el-tab-pane>
<el-tab-pane label="商品参数" name="1"><!-- 商品参数⾯板 --></el-tab-pane>
<el-tab-pane label="商品属性" name="2"><!-- 商品静态属性⾯板 --></el-tab-pane> <el-tab-pane label="商品图⽚" name="3"><!-- 图⽚上传⾯板 --></el-tab-pane>
<el-tab-pane label="商品内容" name="4"><!-- 商品描述⾯板 --></el-tab-pane>
</el-tabs>
实现步骤条与tab栏标签的数据联动：对于步骤条来说，如果想要修改激活项的话，必须到步骤条的active属性，修改索引值；对于tab栏标签，有⼀个v-model属性，表⽰当前激活的⾯板，如果点击的是第⼀个标签栏，则将第⼀个⾯板的name属性值赋值给v-model。因此，只需要将tab标签栏的v-model属性绑定的值与步骤条的active属性绑定同样的值，就可以实现数据联动。
tab栏绑定的值是字符串类型的，但是步骤条中的active属性绑定的是数值类型的，因此需要做⼀个转换，将activeIndex转成数值类型：
如果要将⼀个长得像数字⼀样的字符串转换为数值类型，只需要-0即可。
阻⽌标签页之间的切换：⾸先要监听标签页的切换事件，在事件处理函数中判断是否处于第⼀个页签，还要判断选中的商品分类是否为三级分类。实际上就是判断数组长度是否为3，如果不等于3，则阻⽌跳转
③商品基本信息
我们将⼀个商品信息拆分成了五个panel⾯板，每个⾯板⾥⾯只维护着当前商品的部分数据，只有将所有⾯板的数据合并起来才是⼀个完整的商品数据，因此应该在五个panel⾯板的外⾯嵌套⼀层form表单。
商品基本信息表单布局
表单数据绑定
表单验证
addFormRules: {
goods_name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
goods_price: [{ required: true, message: '请填写商品价格', trigger: 'blur' }],
goods_weight: [{ required: true, message: '请填写商品重量', trigger: 'blur' }],
goods_number: [{ required: true, message: '请填写商品数量', trigger: 'blur' }],
goods_cat: [{ required: true, message: '请选择商品分类', trigger: 'blur' }]
}
使标签与⽂本框不在同⼀⾏：
④商品分类信息
商品分类布局
商品分类数据加载
<el-cascader expand-trigger="hover" :options="cateList" :props="cascaderConfig"
v-model="ds_cat" @change="handleCascaderChange"></el-cascader>
const { data: res } = await this.$('categories')
if (a.status !== 200) {
return this.$('初始化商品分类失败！ ')
}
this.cateList = res.data
⑤商品动态参数
获取商品动态参数数据
商品动态参数布局
const { data: res } = await this.$(`categories/${this.cateId}/attributes`, { params: { sel: 'many' }
})
if (a.status !== 200) return this.$('获取动态参数列表失败！ ') // 把动态参数中的每⼀项数据中的 attr_vals，都从字符串分割为数组
res.data.forEach(item => {
item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ') })
this.manyData = res.data
使⽤到复选框组件：
⑥商品静态属性
获取商品静态属性数据
商品静态属性布局
const { data: res } = await this.$(`categories/${this.cateId}/attributes`, {
params: { sel: 'only' }
})
if (a.status !== 200) {
return this.$('获取动态参数列表失败！ ')
}
⑦商品图⽚上传
图⽚上传upload组件基本使⽤
<el-upload
action="47.96.21.88:8888/api/private/v1/upload"
:headers="uploadHeaders"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
注意，action不能直接写action="upload"，这样的话表⽰图⽚要上传的是localhost:8080/#/goods/add/upload 我们后台API接⼝不是8080，47.96.21.88:8888/api/private/v1/才是后台服务器的请求路径
发表评论