---

前言

尚硅谷SPU和SKU模块的实现思路，业务思路和实现思路

---

一、SPU模块

1.SPU列表的展示

（1）页面图片

（2）业务背景
SPU概念
首先通俗介绍下SPU是啥，是标准产品单元，例如： iPhone X 就是一个SPU，与商家、颜色、款式、规格、套餐等都无关。 就好比手机发布会中，说我们今年推出了一款新的手机，型号为iphone11，而不会说我们今年推出了iphone 11 128g 玫瑰金、iphone 11 128g 深空灰等等。一个具体产品型号所专有的特性。

（3）实现思路
静态页面实现：
element-ui中的el-card显示带阴影背景的卡片效果；利用了写好的三级联动组件。
el-button实现按钮的样式效果。el-table实现列表的效果。
el-pagination实现分页的效果。
动态数据实现思路
1）三级分类菜单选中某一项的时候，调用查找SPU的，因为是父组件调用子组件，子组件需要使用自定义事件向父组件传值，category3Id这个值。
2）前端书写调用后端的api模块中的spu，并向外暴露，view文件夹中使用该接口
spu.js

import request from '@/utils/request'

//获取spu列表的接口，/admin/product/page/limit/category3Id get
export const reqSpuList = (page,limit,category3Id) => request({
  url: `/background/admin/product/${page}/${limit}`,
  method: 'get',
  params:{
    category3Id
  }
})
1
2
3
4
5
6
7
8
9
10

index.js

// 向外部统一暴露数据
import * as trademark from './product/tradeMark'
import * as attr from './product/attr'
import * as spu from './product/spu'
// import * as sku from './product/sku'

//对外暴露
export default{
  trademark,
  attr,
  spu,
  // sku

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

main.js

import API from '@/api';
Vue.prototype.$API = API;
1
2

3）该页面调用接口时，如果成功就展示数据并在上方给出，失败就显示失败的提示
4)三级目录选中后才让它可用，之前为不可用状态，参考（4）中3）
（4）改来改去，才正确的小细节，逻辑分析一下
1）三级联动组件，选择以后想再次修改，比如，选择一级菜单是，二级和三级菜单数据要清零，再次选中三级菜单的选项时，再次查询SPU列表

getCategoryId({ categoryId, level }) {
      if (level === 1) {
        this.category1Id = categoryId;
        this.category2Id = "";
      } else if (level === 2) {
        this.category2Id = categoryId;
        this.category3Id = "";
      } else {
        this.category3Id = categoryId;
        // this.attrInfo.categoryId = categoryId;
        // this.attrInfo.categoryLevel = level;
        this.getSpuList();
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2）使用el-pagination，哪一页修改了或每页修改的条数被修改了，如何修改vue中的数据，卡片组件都两个函数可以获取到改变成哪一页或目前每页显示条数。
1

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="limit"
      :current-page.sync="page"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total">
    </el-pagination>
export default {
  name: 'Spu',
method: {
    handleSizeChange(value){
      this.limit = value;
      this.getSpuList()
    },
    handleCurrentChange(value){
      this.page = value;
      this.getSpuList()
    }
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3）控制按钮显隐试了很多次才试对，会有缓存吗

<el-button type="primary" icon="el-icon-plus" size="mini" @click="addSPU" :disabled="!category3Id">添加SPU</el-button>
1

（5）可访问的接口

/admin/product/$page/${limit}
比如： http://82.156.205.62:9261/admin/product/1/3?category3Id=61
返回数据

2.SPU的添加

二、SKU模块

持续更新中