电商项目——商品服务-API-属性分组——第十一章——上篇

最新推荐文章于 2022-12-26 17:00:09 发布

VIP文章福建选手阿俊

最新推荐文章于 2022-12-26 17:00:09 发布

阅读量803

点赞数 2

分类专栏：电商项目文章标签： java

本文链接：https://blog.csdn.net/qq_44891295/article/details/109076862

版权

文章目录

1：SPU&SKU&规格参数&销售属性
2：前端组件抽取&父子组件交互
3：获取分类属性分组
4：分组新增&级联选择器
5：分组修改&级联选择器回显

1：SPU&SKU&规格参数&销售属性

接来下我们说下电商系统最基本的两个概念：SPU,SKU

SPU：Standard Product Unit《标准化产品单元）
是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的持性。|
SKU： StockKeeping Unit（库存量单位）
即库存进出计量的基本单元，可以是以件，盒，托盘等为单位。SKU这是对于大型连锁超市DC（配送中心）物流管理的一个必要的方法。现在已经被引申为产品统一编号的简称，每种产品均对应有唯一的SKU号。
SPU和SKU区别
SPU就相当于是类（iphonex,iphonemax）类拥有非常多的特性，我想要真正的买一个商品，我就要选择它的具体版本，包括它库存有多少，售价有多少；SKU就相当于对象

iphone发布会一开始就会介绍今天发布了三款iphone,分别介绍它有多少像素，内置芯片，存储容量，大家都很期待它的价格，到了揭晓价格的那一幕，我们就会出现下面一幕，
在这里插入图片描述

不同的颜色可呢配比这不同的内存和存储空间，不同的版本也有不同的售价，不同的版本在不同的供货商里面，库存是不一样的，所以我们真正买到手的是SKU不同的颜色可呢配比这不同的内存和存储空间，不同的版本也有不同的售价，不同的版本在不同的供货商里面，库存是不一样的，所以我们真正买到手的是SKU

基本属性【规格参数】与销售属性

每个分类下的商品共享规格参数，与销售属性。只是有些商品不一定要用这个分类下全部的
属性：

1.属性是以三级分类组织起来的
2.规格参数中有些是可以提供检索的
3.规格参数也是基本属性，他们具有自己的分组
4.属性的分组也是以三级分类组织起来的
5.属性名确定的，但是值是每一个商品不同来决定的

SPU决定规格参数的值，SKU决定销售属性的值
在这里插入图片描述

在这里插入图片描述

2：前端组件抽取&父子组件交互

接下来我们编写平台的属性以及属性的分组维护，如下实现效果

我们可以选中一个三级分类，为这个分类下新增一个属性分组，为每一个分组下可以关了一些规格参数
在这里插入图片描述
第一步：我们先完成人人快速开发平台的菜单搭建
效果图如下

第二步：前端属性分组界面搭建
在这里插入图片描述

moudles->common->
category.vue

<template>
  <el-tree
    ref="tree"
    :data="menus"
    :props="defaultProps"
    node-key="catId"
   >
  </el-tree>
</template>

<script>

    export default {
        //import引入的组件需要注入到对象中才能使用",
        components: {},
        data() {
            // 这里存放数据",
            return {
              menus: [],
              defaultProps: {
                children: 'children',
                label: 'name'
              }
            }
        },
        //监听属性 类似于data概念",
        computed: {},
        //监控data中的数据变化",
        watch: {},
        //方法集合",
        methods: {
          // 获取数据列表
          getDataList () {
            this.$http({
              url: this.$http.adornUrl('/product/category/list/tree'),
              method: 'get'

            }).then( ({data}) => {
              console.log("成功获取到菜单数据：",data.data)
              this.menus=data.data;
              // console.log(this.menus)

            })
          }
        },
        created() {
// <!--在组件创建的时候就已经调用了，就相当于请求已经发送出去了，我们上面的方法就会有成功获取到的菜单数据-->
          this.getDataList();
        },
    }
</script>

在attrgroup.vue中完成如下三个步骤

1.import category from "../common/category";
 2.components: {
          category
        },
3.        <el-row :gutter="20">
    <el-col :span="6">
      菜单
      <category></category>
    </el-col>
    <el-col :span="18">
      表格
    </el-col>

  </el-row>

效果演示
在这里插入图片描述
我们在去人人生成器中找到对应attrgroup下的前端生成代码，

第三步：我们要完成如下操作

我们就要用到vue中的父子组件传递数据(我们希望我们的三级分类数据被点击以后，我们（category.vue）可以通知引用它（attrgroup.vue）的人，被点击到哪个数据，那我们要怎么完成呢？
思路：父子组件传递数据
1）子组件给父组件传递数据（category给attrgroup传递数据），使用事件机制
子组件给父组件发送一个事件，携带上数据。
//向父组件发送事件（事件名,要传递的数据（任意多个））
this.$emit(“tree-node-click”,data,node,component)

操作：
category.vue

<!--  node-click	节点被点击时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。-->
  <el-tree
    ref="tree"
    :data="menus"
    :props="defaultProps"
    node-key="catId"
    //点击触发这个事件，在通过这个事件的方法把子组件数据传送给父组件（attrgroup）
    @node-click="nodeclick"
   >
  </el-tree>
   methods: {
nodeclick(data,node,component){