本文共 11133 字，大约阅读时间需要 37 分钟。

1. 介绍

商品管理模块用于维护电商平台的商品信息，包括商品的类型、参数、图片、详情等信息。通过商品管理模块可以实现商品的添加、修改、展示和删除等功能

最后实现的效果图如下所示：

2. 创建git分支

git checkout -b goods_list

git push -u origin goods_list

3. 初始化List.vue并 添加路由

4. 商品列表table

4.1 获取数据

data() {     return {       // 查询参数对象    queryInfo: {         query: '',      pagenum: 1,      pagesize: 10    },    // 商品列表    goodsList: [],    // 总数据条数    total: 0  }},created() {     this.getGoodsList()},methods: {     // 根据分页获取对应的商品列表  async getGoodsList() {       const {    data: result } = await this.$http.get('goods', {    params: this.queryInfo })    if (result.meta.status !== 200) {         return this.$message.error('获取商品列表失败！')    }    this.$message.success('获取商品列表成功！')    console.log(result.data)    this.goodsList = result.data.goods    this.total = result.data.total  }}

4.2 显示数据

4.3 使用全局过滤器Vue.filter自定义格式化时间

可以参考这篇文章

https://blog.csdn.net/weixin_44972008/article/details/113140790

main.js注册全局过滤器

Vue.filter('dateFormat', function (originVal) {     const dt = new Date(originVal)  const y = dt.getFullYear()  const m = (dt.getMonth() + 1 + '').padStart(2, '0') // 如果不是两位前面用0填充  const d = (dt.getDate() + '').padStart(2, '0')  const hh = (dt.getHours() + '').padStart(2, '0')  const mm = (dt.getMinutes() + '').padStart(2, '0')  const ss = (dt.getSeconds() + '').padStart(2, '0')  return `${     y}-${     m}-${     d} ${     hh}:${     mm}:${     ss}`})

4.4 效果展示

5. 商品列表分页管理功能

handleSizeChange(newSize) {     this.queryInfo.pagesize = newSize  this.getGoodsList()},handleCurrentChange(newPage) {     this.queryInfo.pagenum = newPage  this.getGoodsList()}

6. 搜索与清空功能

7. 根据ID删除商品数据

async removeById(id) {     const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {       confirmButtonText: '确定',    cancelButtonText: '取消',    type: 'warning'  }).catch(error => error)  if (confirmResult !== 'confirm') {       return this.$message.info('已取消删除！')  }  const {    data: result } = await this.$http.delete(`goods/${     id}`)  if (result.meta.status !== 200) {       return this.$message.error('删除失败！')  }  this.$message.success('删除成功！')  this.getGoodsList()}

8. 商品添加页面

8.1 通过编程式导航跳转到商品添加页面

   
    添加商品
   

goAddPage(){     this.$router.push('/goods/add')}

创建文件goods/Add.vue 添加路由规则

8.2 渲染添加页面基本结构

8.3 美化步骤条组件

data() {     return {       activeIndex: 0  }}

8.4 渲染tab栏区域

   
     
    
     基本信息
      
    
     商品参数
      
    
     商品属性
      
    
     商品图片
      
    
     商品内容
    
   

8.5 步骤条与tab栏的数据联动

activeIndex: '0'

8.6 表单组成部分

8.7 基本信息面板UI结构

addForm: {     goods_name: '',  goods_price: 0,  goods_weight: 0,  goods_number: 0,  // 商品所属的分类数组  goods_cat: []},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' }  ]},// 商品分类列表cateList: [],cateProps: {     expandTrigger: 'hover',  label: 'cat_name', // 看到的属性  value: 'cat_id', // 选中的是什么值  children: 'children' // 指定属性实现父子节点嵌套}

// 获取所有商品分类数据async getCateList() {     const {    data: result } = await this.$http.get('categories')  if (result.meta.status !== 200) {       return this.$message.error('获取商品分类数据失败！')  }  this.cateList = result.data  console.log(this.cateList)},// 级联选择器选中会触发handleChange() {     console.log(this.addForm.goods_cat)        if (this.addForm.goods_cat.length !== 3) {       this.addForm.goods_cat = []  }}

8.8 阻止页签切换

beforeTabLeave(activeName, oldActiveName) {     if (oldActiveName === '0' && this.addForm.goods_cat.length !== 3) {       this.$message.error('请先选择商品分类！')    return false  }}

8.9 获取动态参数列表数据

// 动态参数列表manyTableData: []

async tabClicked() {     if (this.activeIndex === '1') {       const {    data: result } = await this.$http.get(`categories/${     this.cateId}/attributes`, {          params: {    sel: 'many' }     })    if (result.meta.status !== 200) {         return this.$message.error('获取状态参数列表失败！')    }    console.log(result.data)    this.manyTableData = result.data  }}

computed: {     cateId() {       if (this.addForm.goods_cat.length === 3) {         return this.addForm.goods_cat[2]    }    return null  }}

8.10 绘制商品参数面板复选框

async tabClicked() {     if (this.activeIndex === '1') {       const {    data: result } = await this.$http.get(      `categories/${     this.cateId}/attributes`,      {           params: {    sel: 'many' }      }    )    if (result.meta.status !== 200) {         return this.$message.error('获取状态参数列表失败！')    }    console.log(result.data)    result.data.forEach(item => {         item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ')    })    this.manyTableData = result.data  }}

.el-checkbox {     margin: 0 10px 0 0 !important;}

8.11 获取静态属性列表数据

async tabClicked() {     if (this.activeIndex === '1') {       const {    data: result } = await this.$http.get(      `categories/${     this.cateId}/attributes`,      {           params: {    sel: 'many' }      }    )    if (result.meta.status !== 200) {         return this.$message.error('获取状态参数列表失败！')    }    console.log(result.data)    result.data.forEach(item => {         item.attr_vals =        item.attr_vals.length === 0 ? [] : item.attr_vals    })    this.manyTableData = result.data  } else if (this.activeIndex === '2') {       const {    data: result } = await this.$http.get(      `categories/${     this.cateId}/attributes`,      {           params: {    sel: 'only' }      }    )    if (result.meta.status !== 200) {         return this.$message.error('获取状态参数列表失败！')    }    console.log(result.data)    result.data.forEach(item => {         item.attr_vals =        item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ')    })    this.onlyTableData = result.data  }}

9. 图片上传功能

9.1 初步使用upload上传组件

   
     
    
     点击上传
    
   

// 上传图片的URL地址uploadURL: 'http://127.0.0.1:8888/api/private/v1/'

// 处理图片预览效果handlePreview() {   },// 处理移除图片的操作handleRemove() {   }

9.2 手动为upload组件绑定header请求头

el-upload组件没有使用我们定义的axios发送ajax请求

// 图片上传组件的header请求头对象headerObj: {     Authorization: window.sessionStorage.getItem('token')}

9.3 监听upload组件的on-success

addForm: {     goods_name: '',  goods_price: 0,  goods_weight: 0,  goods_number: 0,  // 商品所属的分类数组  goods_cat: [],  // 图片的数组  pics: []}

handleSuccess(responce) {       // console.log(responce)    // 1. 拼接得到一个图片信息对象    const picInfo = {    pic: responce.data.temp_path }    // 2. 将图片信息对象，push到pics数组中    this.addForm.pics.push(picInfo)  }

9.4 监听upload组件的on-remove

// 处理移除图片的操作handleRemove(file) {     console.log(file)  // 1. 获取将要删除的图片的临时路径  const filePath = file.response.data.tmp_path  // 2. 从pics数组中，找到这个图片对应的索引值  const i = this.addForm.pics.findIndex(x => x.pic === filePath)  // 3. 调用数组的splice方法，把图片信息对象，从pics数组中移除  this.addForm.pics.splice(i, 1)  console.log(this.addForm)}

9.5 图片预览效果

previewPath: '',  previewVisible: false

// 处理图片预览效果handlePreview(file) {     console.log(file)  this.previewPath = file.response.data.url  this.previewVisible = true}

10. 商品内容

10.1 安装配置vue-quill-editor富文本编辑器

安装运行依赖vue-quill-editor 3.0.6

https://github.com/surmon-china/vue-quill-editor

// 商品的详情描述goods_introduce: ''

   
   
   
   
    添加商品
   

.ql-editor {     min-height: 300px;}.btnAdd {     margin-top: 15px;}

10.2 表单预验证

add() {     this.$refs.addFormRef.validate(valid => {       if (!valid) {         return this.$message.error('填写必要的表单项！')    }    // 执行添加的业务逻辑  })

10.3 把goods_cat从数组传换成字符串

安装运行依赖lodash 实现深拷贝

import _ from 'lodash'    add() {         this.$refs.addFormRef.validate(valid => {           if (!valid) {             return this.$message.error('填写必要的表单项！')        }        // 执行添加的业务逻辑        const form = _.cloneDeep(this.addForm)        form.goods_cat = form.goods_cat.join(',')      })    }

10.4 处理attrs数组

add() {     this.$refs.addFormRef.validate(valid => {       if (!valid) {         return this.$message.error('填写必要的表单项！')    }    // 执行添加的业务逻辑    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  })}

10.5 完成商品添加操作

add() {     this.$refs.addFormRef.validate(async valid => {       if (!valid) {         return this.$message.error('填写必要的表单项！')    }    // 执行添加的业务逻辑    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    // 发起请求添加商品    // 商品的名称必须是唯一的    const {    data: result } = await this.$http.post('goods', form)    if (result.meta.status !== 201) {         return this.$message.error('添加商品失败')    }    this.$message.success('添加商品成功')    this.$router.push('/goods')  })}

11. List.vue完整代码

12. 分支git操作

git add .git commit -m "完成商品功能开发"git pushgit checkout mastergit merge goods_listgit push