前言
尚硅谷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
}
})
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
}
main.js
import API from '@/api';
Vue.prototype.$API = API;
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();
}
},
2)使用el-pagination,哪一页修改了或每页修改的条数被修改了,如何修改vue中的数据,卡片组件都两个函数可以获取到改变成哪一页或目前每页显示条数。
<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()
}
}
}
3)控制按钮显隐试了很多次才试对,会有缓存吗
<el-button type="primary" icon="el-icon-plus" size="mini" @click="addSPU" :disabled="!category3Id">添加SPU</el-button>
(5)可访问的接口
/admin/product/
p
a
g
e
/
{page}/
page/{limit}
比如: http://82.156.205.62:9261/admin/product/1/3?category3Id=61
返回数据
2.SPU的添加
二、SKU模块
持续更新中