HM后台（五）
一，商品管理的商品列表页面搭建
1.1，商品列表组件路由配置
import List from '@/views/Goods/List'
{ path: '/home', component: Home, // 重定向 redirect: '/welcome', children: [ { path: '/welcome', component: Welcome }, { path: '/users', component: User }, { path: '/rights', component: Rights }, { path: '/roles', component: Roles }, { path: '/categories', component: Cate }, { path: '/params', component: Params }, { path: '/goods', component: List }, ] }
1.2，页面渲染时，发送请求，获取商品列表数据
请求参数
请求参数定义
data() { return { // 查询参数对象 queryInfo: { query: '', pagenum: 1, pagesize: 10 }, // 商品列表 goodslist: [], // 总数据条数 total: 0 }
mounted() { this.getGoodsList() }, methods: { async getGoodsList() { const { data: res } = await this.$http.get('goods', { params: this.queryInfo }) if (res.meta.status !== 200) { return this.$message.error('获取商品列表失败！') } this.$message.success('获取商品列表成功！') console.log(res.data) this.goodslist = res.data.goods this.total = res.data.total } }
数据页面填充
<template>
<div>
<!-- 面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>商品列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区域 -->
<el-card style="margin-top:20px">
<!-- 搜索框 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input
placeholder="请输入内容"
v-model="queryInfo.query"
clearable
>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">添加商品</el-button>
</el-col>
</el-row>
<!-- 商品表格 -->
<el-table :data="goodslist" border stripe style="margin:20px 0">
<el-table-column type="index"></el-table-column>
<el-table-column label="商品名称" prop="goods_name"></el-table-column>
<el-table-column label="商品价格(元)" prop="goods_price" width="95px"></el-table-column>
<el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
<el-table-column label="创建时间" prop="add_time" width="140px"></el-table-column>
<el-table-column label="操作" width="130px">
<template slot-scope="{row, $index}">
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" ></el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
1.3，此时我们看到创建时间是个时间戳，我们需要将他过滤成标准的日期时间，需要用到vue的filter过滤器
在main.js中全局注册过滤器，originVal接收传过来的时间戳参数（row.add_time），过滤器的名称dateFormat
// 时间过滤器 Vue.filter('dateFormat', function(originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = dt.getMonth() + 1 const d = dt.getDate() const hh = dt.getHours() const mm = dt.getMinutes() const ss = dt.getSeconds() return `${y}-${m}-${d} ${hh}:${mm}:${ss}` })
然后在表格日期列，用插值法填充
<!-- 商品表格 -->
<el-table :data="goodslist" border stripe style="margin:20px 0">
<el-table-column type="index"></el-table-column>
<el-table-column label="商品名称" prop="goods_name"></el-table-column>
<el-table-column label="商品价格(元)" prop="goods_price" width="95px"></el-table-column>
<el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
<el-table-column label="创建时间" width="140px">
<template slot-scope="{row, $index}">
{{row.add_time | dateFormat}}
</template>
</el-table-column>
1.4，分页器页面搭建
<!-- 分页区域 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]"
:page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
</el-pagination>
handleSizeChange(newSize) { this.queryInfo.pagesize = newSize this.getGoodsList() }, handleCurrentChange(newPage) { this.queryInfo.pagenum = newPage this.getGoodsList() },
1.5，搜索框搜索关键字，重新发送请求，获取商品数据，点击清空按钮，重新发送请求，获取数据
<!-- 搜索框 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input
placeholder="请输入内容"
v-model="queryInfo.query"
clearable
@clear="getGoodsList"
>
<el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
</el-input>
</el-col>
1.5，点击删除按钮，删除该商品
<el-table-column label="操作" width="130px"> <template slot-scope="{row, $index}"> <el-button type="primary" icon="el-icon-edit" size="mini"></el-button> <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(row.goods_id)" ></el-button> </template> </el-table-column>
// 点击删除按钮 async removeById(id) { const confirmResult = await this.$confirm( '此操作将永久删除该商品, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).catch(err => err) if (confirmResult !== 'confirm') { return this.$message.info('已经取消删除！') } const { data: res } = await this.$http.delete(`goods/${id}`) if (res.meta.status !== 200) { return this.$message.error('删除失败！') } this.$message.success('删除成功！') // 重新发送请求，获取新数据 this.getGoodsList() },
1.6.点击添加商品按钮，跳转到add组件，配置下路由对象
<!-- 搜索框 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input
placeholder="请输入内容"
v-model="queryInfo.query"
clearable
@clear="getGoodsList"
>
<el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="goAddpage">添加商品</el-button>
</el-col>
</el-row>
// 点击添加商品按钮，跳转到add组件 goAddpage() { this.$router.push('/goods/add') }
路由配置
import Add from '@/views/Goods/Add'
{ path: '/home', component: Home, // 重定向 redirect: '/welcome', children: [ { path: '/welcome', component: Welcome }, { path: '/users', component: User }, { path: '/rights', component: Rights }, { path: '/roles', component: Roles }, { path: '/categories', component: Cate }, { path: '/params', component: Params }, { path: '/goods', component: List }, { path: '/goods/add', component: Add }, ] }
二，add添加商品组件页面搭建
active是nunber类型
<!-- 面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>添加商品</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图 -->
<el-card style="margin: 20px 0">
<el-alert title="添加商品信息" type="info" show-icon> </el-alert>
<!-- 进度条 -->
<el-steps :space="200" :active="0" finish-status="success" align-center style="margin: 15px 0">
<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>
</el-card>
2.1,左边选项卡页面
我们需要实现一个功能，数据联动效果，当点击左边选项卡第三项，顶部的进度条就在第三个，如何实现这个效果呢
el-tabs中的v-model记录的是el-tab-pane的name值（string),
而在el-teps中的active记录的是el-step的激活的值（number）,0,1,2,3
此时只需要将v-modle中的值和active的值关联起来即可实现联动效果了
在data中动态定义一个属性
data() { return { activeIndex:'0' }
<!-- tabs栏区域 -->
<el-tabs tab-position="left" v-model="activeIndex" style="height: 200px;">
<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>
我们然后在el-steps改造下，将字符串变成number类型
<!-- 进度条 -->
<el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center style="margin: 15px 0">
<el-step title="基本信息"></el-step>
<el-step title="商品参数"></el-step>
2.2，在左边的选项卡的基本信息项，是一个form验证表单，只能将el-form包裹着el-teps, 然后将el-tab-pane包裹着el-form-item
addForm的属性不能乱填，需要根据接口的参数来定
<!-- tabs栏区域 -->
<el-form
:model="addForm"
:rules="addFormRules"
ref="addFormRef"
label-width="100px"
label-position="top"
>
<el-tabs
tab-position="left"
v-model="activeIndex"
>
<el-tab-pane label="基本信息" name="0">
<el-form-item label="商品名称" prop="goods_name">
<el-input v-model="addForm.goods_name"></el-input>
</el-form-item>
<el-form-item label="商品价格" prop="goods_price">
<el-input v-model="addForm.goods_price" type="number"></el-input>
</el-form-item>
<el-form-item label="商品重量" prop="goods_weight">
<el-input v-model="addForm.goods_weight" type="number"></el-input>
</el-form-item>
<el-form-item label="商品数量" prop="goods_number">
<el-input v-model="addForm.goods_number" type="number"></el-input>
</el-form-item>
<el-form-item label="商品分类" prop="goods_cat">
</el-form-item>
</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>
</el-form>
在data中定义属性
data() { return { activeIndex: '0', // 添加商品的表单数据对象 addForm: { goods_name: '', goods_price: 0, goods_weight: 0, goods_number: 0, }, 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' } ] }
2.3，在表单中的商品分类搭建级联选择器组
页面渲染时，发送请求，获取商品分类的数据
mounted() { this.getCateList() }, methods:{ // 获取所有商品分类数据 async getCateList() { const { data: res } = await this.$http.get('categories') if (res.meta.status !== 200) { return this.$message.error('获取商品分类数据失败！') } this.catelist = res.data // console.log(this.catelist) },
返回的数据
{ "data": [ { "cat_id": 1, "cat_name": "大家电", "cat_pid": 0, "cat_level": 0, "cat_deleted": false, "children": [ { "cat_id": 3, "cat_name": "电视", "cat_pid": 1, "cat_level": 1, "cat_deleted": false, "children": [ { "cat_id": 6, "cat_name": "曲面电视", "cat_pid": 3, "cat_level": 2, "cat_deleted": false }, { "cat_id": 7, "cat_name": "海信", "cat_pid": 3, "cat_level": 2, "cat_deleted": false } ] } ] } ], "meta": { "msg": "获取成功", "status": 200 } }
有了数据源，就搭建级联选择器组件了
v-model是选中的父级的id值，数组类型，获取的是cateList中的valueID值
<el-form-item label="商品分类" prop="goods_cat"> <el-cascader :options="catelist" :props="cateProps" v-model="addForm.goods_cat" @change="handleChange"> </el-cascader> </el-form-item> </el-tab-pane>
在data中定义
// 添加商品的表单数据对象 addForm: { goods_name: '', goods_price: 0, goods_weight: 0, goods_number: 0, // 商品所属的分类数组 goods_cat: [] }, // 商品分类列表 catelist: [], // cascader属性配置 cateProps: { label: 'cat_name', value: 'cat_id', children: 'children', expandTrigger:'hover', checkStrictly:true },
级联选择器只有三层，我们需要只选中第三级就可显示即可
// 级联选择器选中项变化，会触发这个函数 handleChange() { console.log(this.addForm.goods_cat) if (this.addForm.goods_cat.length !== 3) { this.addForm.goods_cat = [] } },
2.4,在基本信息tab中，只有商品分类项的三级分类选中了，才可以切换tab
el-tabs定义定义该属性，属性值时函数类型
<!-- tabs栏区域 -->
<el-form
:model="addForm"
:rules="addFormRules"
ref="addFormRef"
label-width="100px"
label-position="top"
>
<el-tabs
tab-position="left"
v-model="activeIndex"
:before-leave="beforeTabLeave"
>
// tabs切换触发 beforeTabLeave(activeName, oldActiveName) { // console.log('即将离开的标签页名字是：'+oldActiveName) // console.log('即将进入的标签页名字是：'+activeName) // return false if (oldActiveName === '0' && this.addForm.goods_cat.length !== '3') { this.$message.success('请选择商品分类') return false } }
2.5，在商品参数中，form中嵌套了checkbox多选框，当切换到商品参数tab,发送请求，获取动态参数数据
三级分类id计算出来，作为请求参数
computed: { cateId() { if (this.addForm.goods_cat.length === 3) { return this.addForm.goods_cat[2] } else { return null } } },
<el-tabs tab-position="left" v-model="activeIndex" :before-leave="beforeTabLeave" @tab-click="tabClicked" >
// tab被选中时触发 async tabClicked() { // console.log(this.activeIndex) // 发送请求，获取动态参数数据 const {data :res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:'many'}}) if(res.meta.status !==200){ this.$message.error('获取参数数据失败') } this.manyTableData = res.data console.log(res.data) }
返回的数据
{ "data": [ { "attr_id": 1, "attr_name": "cpu", "cat_id": 22, "attr_sel": "only", "attr_write": "manual", "attr_vals": "ffff" } ], "meta": { "msg": "获取成功", "status": 200 } }
用数据渲染商品参数的页面
此时返回的attr_vals参数值属性是字符串格式，我们需要把它改造成数组形式，用于checkbox的遍历，在返回数据需要整理下
// tab被选中时触发 async tabClicked() { // console.log(this.activeIndex) // 发送请求，获取动态参数数据 const { data: res } = await this.$http.get( `categories/${this.cateId}/attributes`, { params: { sel: 'many' } } ) if (res.meta.status !== 200) { this.$message.error('获取参数数据失败') } // 将attr_vals的字符串改造成数组 res.data.forEach(item => { item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(',') }) this.manyTableData = res.data console.log(res.data) }
<el-tab-pane label="商品参数" name="1"> <el-form-item :label="item.attr_name" v-for="(item, index) in manyTableData" :key="item.attr_id" > <el-checkbox-group v-model="item.attr_vals"> <el-checkbox :label="i" v-for="(i, index1) in item.attr_vals" :key="index1" border></el-checkbox> </el-checkbox-group> </el-form-item> </el-tab-pane>
此时，复选框的间距不是一般齐的，我们需要优化下
.el-checkbox { margin: 0 10px 0 0 !important; }
2.6,商品属性的页面搭建
// tab被选中时触发 async tabClicked() { // console.log(this.activeIndex) // 发送请求，获取动态参数数据 if (this.activeIndex === '1') { const { data: res } = await this.$http.get( `categories/${this.cateId}/attributes`, { params: { sel: 'many' } } ) if (res.meta.status !== 200) { this.$message.error('获取参数数据失败') } // 将attr_vals的字符串改造成数组 res.data.forEach(item => { item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(',') }) this.manyTableData = res.data // console.log(res.data) } else if (this.activeIndex === '2') { const { data: res } = await this.$http.get( `categories/${this.cateId}/attributes`, { params: { sel: 'only' } } ) if (res.meta.status !== 200) { return this.$message.error('获取静态属性失败！') } console.log(res.data) this.onlyTableData = res.data } }
<el-tab-pane label="商品属性" name="2"> <el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id"> <el-input v-model="item.attr_vals"></el-input> </el-form-item> </el-tab-pane>
2.7，商品图片页面搭建
在data中定义后台要上传图片的地址
// 上传图片的URL地址 uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
<el-tab-pane label="商品图片" name="3"> <!-- action 表示图片要上传到的后台API地址 --> <el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-tab-pane>
此时点击上传图片的按钮，虽然图片在页面上展示了，但是我们查看上传图片的请求，无效的token，后台上传图片的接口没有携带token
这个是我们发送平时请求需要添加的请求拦截器
// 配置请求拦截器，添加token axios.interceptors.request.use(config => { // console.log(config) config.headers.Authorization = window.sessionStorage.getItem('token') return config })
upload有个header属性，可以携带
<!-- action 表示图片要上传到的后台API地址 -->
<el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :headers="headerObj">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-tab-pane>
在data中定义
// 图片上传组件的headers请求头对象 headerObj: { Authorization: window.sessionStorage.getItem('token') },
2.8， 上传图片成功时，我们添加商品请求参数有个pics需要收集（临时图片路劲），我们可以调用element的上传图片成功的函数去获取临时图片路劲
<!-- action 表示图片要上传到的后台API地址 -->
<el-upload
:action="uploadURL"
:on-preview="handlePreview"
:on-remove="handleRemove"
list-type="picture"
:headers="headerObj"
:on-success="handleSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
// 图片上传成功触发 handleSuccess(response) { // console.log(response) // 需要把临时路径加载添加商品请求的参数中addForm的pics属性 const changePics = { pic: response.data.tmp_path } this.addForm.pics.push(changePics) console.log(this.addForm.pics) }
response的数据
在data中定义收集添加商品的请求参数
// 添加商品的表单数据对象 addForm: { goods_name: '', goods_price: 0, goods_weight: 0, goods_number: 0, // 商品所属的分类数组 goods_cat: [], // 图片临时路劲数组 pics: [] },
2.9，点击图片右上角叉号按钮，在this.addForm.pics移除图片的临时路劲
file返回的数据
// 删除图片的函数tmp_path handleRemove(file) { // console.log(file) //移除图片的临时地址 const filePath = file.response.data.tmp_path // 在addForm.pics中找到这个地址，然后清除掉 this.addForm.pics = this.addForm.pics.filter(item => { return item.pic !== filePath }) console.log(this.addForm.pics) },
2.10，图片的预览效果
url地址是服务器存储图片的地址，我们需要将他保存在data中，然后触发dialog弹框，里头包裹img即可
// 点击已上传的图片,预览 handlePreview(file) { console.log(file) this.previewPath = file.response.data.url this.previewVisible = true },
<!-- 图片预览 -->
<el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
<img :src="previewPath" alt="" class="previewImg" />
</el-dialog>
data中定义
previewPath: '', previewVisible: false
.previewImg{ width:100% }
3.0，在商品内容中搭建富文本编辑器页面
安装第三方插件vue-quill-editor，npm install vue-quill-editor --save
在main.js全局注册
// 导入富文本编辑器 import VueQuillEditor from 'vue-quill-editor' // require styles 导入富文本编辑器对应的样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' // 将富文本编辑器，注册为全局可用的组件 Vue.use(VueQuillEditor)
<el-tab-pane label="商品内容" name="4"> <!-- 富文本编辑器组件 --> <quill-editor v-model="addForm.goods_introduce" ></quill-editor> <!-- 添加商品的按钮 --> <el-button type="primary" style="margin-top:15px">添加商品</el-button> </el-tab-pane>
v-model绑定的数据在添加商品请求参数添加
// 添加商品的表单数据对象 addForm: { goods_name: '', goods_price: 0, goods_weight: 0, goods_number: 0, // 商品所属的分类数组 goods_cat: [], // 图片临时路劲数组 pics: [], // 商品的详情描述 goods_introduce: '', },
3.1，点击添加按钮，发送添加商品请求
注：此时addForm.goods_cat收集的是一个数组，而添加商品的请求参数是一个字符串，需要改造下
<el-tab-pane label="商品内容" name="4"> <!-- 富文本编辑器组件 --> <quill-editor v-model="addForm.goods_introduce"></quill-editor> <!-- 添加商品的按钮 --> <el-button type="primary" style="margin-top:15px" @click="add" >添加商品</el-button
此时会报错，因为级联选择器组件的v-modle必须是数组，把它改成字符串是报错的，我们需要深拷贝下，复制一份一样的数据，但他们不相关联
安装lodash, npm i --save lodash
引入，import _ from 'lodash'
此时添加商品的请求参数attrs是一个数组，我们也需要整理下
在data定义
// 添加商品的表单数据对象 addForm: { goods_name: '', goods_price: 0, goods_weight: 0, goods_number: 0, // 商品所属的分类数组 goods_cat: [], // 图片临时路劲数组 pics: [], // 商品的详情描述 goods_introduce: '', attrs: [] },
// 点击添加商品按钮 add() { this.$refs.addFormRef.validate(async valid => { if (!valid) { return this.$message.error('请填写必要的表单项！') } // 执行添加的业务逻辑 // lodash cloneDeep(obj) // 深拷贝 const form = _.cloneDeep(this.addForm) // 数组改造成字符串 form.goods_cat = form.goods_cat.join(',') // 处理动态参数 this.manyTableData.forEach(item => { const newInfo = { attr_id: item.attr_id, attr_value: item.attr_vals.join(' ') } this.addForm.attrs.push(newInfo) }) // 处理静态属性 this.onlyTableData.forEach(item => { const newInfo = { attr_id: item.attr_id, attr_value: item.attr_vals } this.addForm.attrs.push(newInfo) }) form.attrs = this.addForm.attrs console.log(form) // 发起请求添加商品 // 商品的名称，必须是唯一的 const { data: res } = await this.$http.post('goods', form) if (res.meta.status !== 201) { return this.$message.error('添加商品失败！') } this.$message.success('添加商品成功！') this.$router.push('/goods') }) }
注；动态属性的属性值attr_vals是一个数组，需要改造成字符串，而静态参数的attr_vals是一个本身就是字符串
