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

商品管理模块开发指南

1. 介绍

商品管理模块是电商平台的重要组成部分，负责维护商品信息，包括商品详情、分类、参数、图片等内容。通过该模块，可以实现商品的添加、修改、展示和删除等功能，为商家提供便利的商品管理工具。

2. 创建git分支

在开始开发之前，首先需要创建一个新的git分支以跟踪代码的变更：

git checkout -b goods_list
git push -u origin goods_list

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

4. 商品列表功能

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('获取商品列表成功！');
    this.goodsList = result.data.goods;
    this.total = result.data.total;
  },
}

4.2 显示数据

4.3 时间格式化

Vue.filter('dateFormat', (originVal) => {
  const dt = new Date(originVal);
  const y = dt.getFullYear();
  const m = (dt.getMonth() + 1).toString().padStart(2, '0');
  const d = dt.getDate().toString().padStart(2, '0');
  const hh = dt.getHours().toString().padStart(2, '0');
  const mm = dt.getMinutes().toString().padStart(2, '0');
  const ss = dt.getSeconds().toString().padStart(2, '0');
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
});

5. 分页功能

6. 搜索与清空功能

7. 商品添加功能

7.1 导航到添加页面

   
    添加商品
   

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

7.2 添加页面结构

7.3 表单验证

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

8. 图片上传功能

8.1 使用upload组件

   
  
    
     点击上传
    
   
// 处理成功事件
handlesuccess(response) {
  const picInfo = { pic: response.data.temp_path };
  this.addForm.pics.push(picInfo);
}

8.2 头部请求

headerObj = {
  Authorization: window.sessionStorage.getItem('token'),
};

9.商品内容管理

9.1 富文本编辑器

9.2 严格的表单预验证

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

10.代码提交

git add .
git commit -m "完成商品功能开发"
git push
git checkout master
git merge goods_list
git push

转载地址：http://nqtpz.baihongyu.com/