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

商品管理模块开发指南

1. 介绍

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

2. 创建git分支

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

git checkout -b goods_listgit 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 pushgit checkout mastergit merge goods_listgit push

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