7. 谷粒商城商品属性介绍、前端组件抽取、父子组件传递数据、根据分类id查询数据

最新推荐文章于 2023-06-28 10:07:21 发布
最新推荐文章于 2023-06-28 10:07:21 发布
阅读量353 收藏
点赞数
分类专栏： 谷粒商城 文章标签： java vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alvin199765/article/details/117350184
版权

基础概念

SPU

Standard Product Unit 标准化产品单元：是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。

SPU: Standard Product Unit（标准产品单位）

  • SPU 是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。
  • 通俗点讲，属性值、特性相同的商品就可以称为一个 SPU。
  • 例如：iPhone 12就是一个 SPU，与商家，与颜色、款式、套餐都无关。

SKU

Stock Keeping Unit 库存量单位：即库存进出计量的基本单元，可以是以件、盒等为单位。SKU这是对于大型连锁超市 DC (配送中心)物流管理的一个必要的方法。现在已经被引申为产品统一编号的简称，每种产品均对应有唯一的SKU号。

SKU: Stock Keeping Unit(库存量单位)

  • SKU 即库存进出计量的单位， 可以是以件、盒、托盘等为单位。
  • SKU 是物理上不可分割的最小存货单元。在使用时要根据不同业态，不同管理模式来处理。
  • 在服装、鞋类商品中使用最多最普遍。
  • 例如： iPhone 12 的颜色(深空灰等)，存储容量(64GB 256GB)。

举例区分

iPhoneX 是 SPU、MI8 是 SPU

iPhoneX 64G 黑曜石是 SKU

MI8 8+64G 黑色是 SKU

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

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

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

商品的基础属性是SPU的特性，商品的销售属性是SKU的特性。

image.png

image.png

前端组件抽取

树形列表

src\views\modules\common\category.vue

<!-- 树形列表 -->
<template>
  <el-tree
    :data="categoryList"
    :props="defaultProps"
    node-key="catId"
  ></el-tree>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      categoryList: [],
      defaultProps: {
        // 此处设置子级分类，及其属性名
        children: 'childrenList',
        label: 'name',
      },
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getCategoryList() {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get',
      }).then(({ data }) => {
        this.categoryList = data.data
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCategoryList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
</style>

属性分组

src\views\modules\product\attrgroup.vue

<!-- 属性分组 -->
<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <!-- 分类列表 -->
      <category></category>
    </el-col>
    <el-col :span="18">
      <!-- 表格 -->
      <div class="mod-config">
        <el-form
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataList()"
        >
          <el-form-item>
            <el-input
              v-model="dataForm.key"
              placeholder="参数名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
            <el-button
              v-if="isAuth('product:attrgroup:save')"
              type="primary"
              @click="addOrUpdateHandle()"
            >
              新增
            </el-button>
            <el-button
              v-if="isAuth('product:attrgroup:delete')"
              type="danger"
              @click="deleteHandle()"
              :disabled="dataListSelections.length <= 0"
            >
              批量删除
            </el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="dataList"
          border
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandle"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="attrGroupId"
            header-align="center"
            align="center"
            label="分组id"
          ></el-table-column>
          <el-table-column
            prop="attrGroupName"
            header-align="center"
            align="center"
            label="组名"
          ></el-table-column>
          <el-table-column
            prop="sort"
            header-align="center"
            align="center"
            label="排序"
          ></el-table-column>
          <el-table-column
            prop="descript"
            header-align="center"
            align="center"
            label="描述"
          ></el-table-column>
          <el-table-column
            prop="icon"
            header-align="center"
            align="center"
            label="组图标"
          ></el-table-column>
          <el-table-column
            prop="catelogId"
            header-align="center"
            align="center"
            label="所属分类id"
          ></el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="addOrUpdateHandle(scope.row.attrGroupId)"
              >
                修改
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="deleteHandle(scope.row.attrGroupId)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update
          v-if="addOrUpdateVisible"
          ref="addOrUpdate"
          @refreshDataList="getDataList"
        ></add-or-update>
      </div>
    </el-col>
  </el-row>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Category from '../common/category'
  import AddOrUpdate from './attrgroup-add-or-update'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Category,AddOrUpdate },
  data() {
    return {
      dataForm: {
        key: '',
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
    }
  },
  activated() {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/product/attrgroup/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.attrGroupId
          })
      this.$confirm(
        `确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl('/product/attrgroup/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              },
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
  },
}
</script>
<style scoped>
</style>

父子组件传递数据

子组件给父组件传递数据机制

  • 子组件使用事件机制给父组件传递数据
  • 子组件给父组件发送一个事件，携带上数据
  • this.$emit('事件名', 携带的数据...)

子组件

src\views\modules\common\category.vue

template

  <!-- 添加点击事件 -->
  <el-tree
    @node-click="nodeClick"
  ></el-tree>

script

methods:

    // 节点点击事件
    nodeClick(data, node, component) {
      console.log('子组件category被点击', data, node, component)
      // 子给父组件发送事件，并携带数据
      this.$emit('tree-node-click', data, node, component)
    },

父组件

src\views\modules\product\attrgroup.vue

template

    <el-col :span="6">
      <!-- 分类列表 -->
      <category @tree-node-click="treeNodeClick"></category>
    </el-col>

script

methods:

    // 感知树节点被点击
    treeNodeClick(data, node, component) {
      console.log('attrgroup感知到category节点被点击', data, node, component)
      console.log('刚才被点击的分类id：', data.catId)
      if (node.level == 3) {
        this.categoryId = data.catId
        this.getData()
      } else {
        this.categoryId = 0
      }
    },

    getData() {
      this.getDataList(this.categoryId)
    },

根据分类id查询数据

在这里插入图片描述

前端

src\views\modules\product\attrgroup.vue

script

methods:

在这里插入图片描述

后端

controller

AdminAttrGroupController.java

    /**
     * 根据分类id查询数据
     */
    @ApiOperation("根据分类id查询数据")
    @GetMapping("/list/{categoryId}")
    @ApiImplicitParams({
            @ApiImplicitParam(paramType = "query",name = "page",value ="当前页码",dataType ="Integer"),
            @ApiImplicitParam(paramType = "query",name = "limit",value ="每页记录数",dataType ="Integer"),
            @ApiImplicitParam(paramType = "query",name = "sidx",value ="排序字段",dataType ="String"),
            @ApiImplicitParam(paramType = "query",name = "order",value ="排序方式",dataType ="String"),
            @ApiImplicitParam(paramType = "query",name = "key",value ="条件",dataType ="String")
    })
    public R list(@ApiIgnore @RequestParam Map<String, Object> params, @PathVariable Long categoryId){
        PageUtils page = attrGroupService.queryPage(params,categoryId);
        return R.ok().put("page", page);
    }

service

AttrGroupService.java

    PageUtils queryPage(Map<String, Object> params, Long categoryId);

AttrGroupServiceImpl.java

    @Override
    public PageUtils queryPage(Map<String, Object> params, Long categoryId) {
        QueryWrapper<AttrGroupEntity> queryWrapper = new QueryWrapper<>();

        // 如果分类id不为0
        if (categoryId != 0) {
            queryWrapper.eq("category_id",categoryId);
        }

        String key = (String) params.get("key");
        log.info("key的值{}",params.get("key"));

        // 如果查询条件不为空
        if (StringUtils.isNotEmpty(key)) {
            queryWrapper.and(wrapper -> {
                wrapper.eq("attr_group_id",key).or().like("attr_group_name",key);
            });
        }
        IPage<AttrGroupEntity> page = this.page(
                new Query<AttrGroupEntity>().getPage(params),
                queryWrapper
        );
        return new PageUtils(page);
    }
AlvinUnity
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
谷粒商城day49 -商品服务-API-属性分组-前端组件抽取&父子组件交互
JavaCoder_juejue的博客
10-19 274
1.添加菜单 把资料里的sys_menus.sql复制到admin库执行 可以看到菜单和一些子菜单就被添加进来了 2.接口文档链接 https://easydoc.xyz/s/78237135/ZUqEdvA4/qvTTYD1x 3.抽取三级分类组件 因为我们在三个页面的左侧都要显示三级分类，然后右侧根据三级分类分别显示属性分组，规格参数与销售属性, 所以左侧作为一个公共部分可以抽取出来 ...
后台API-组件抽取的基本原理
xiaoqinqin_222的博客
02-12 98
spring的初级自动配置类原理,我们自己封装到yaml文件中,更换环境就不用更改代码内容了,直接在yaml或者properties中更改
前端给后端传递数据的时候,有些后端自己可以获取到的值应该由前端传递吗?
qq_43842093的博客
01-08 1155
前端给后端传递数据的时候,有些后端自己可以获取到的值应该由前端传递吗? 场景: 1.比如我向后端传递一个学生做的试卷. 2.后端需要我把学生的答案和标准答案(在获取试卷的时候给我的,我知道很扯淡)同时传递给他. 我认为标准答案没必要传给他 ,因为他可以根据我传给他的试卷在数据库查到.但是他认为查询数据库特别慢. 请问这个场景应该是后端处理还是前端处理? ...
Day05-讲师列表前端-讲师信息修改
qq_46112274的博客
03-05 304
讲师信息修改1、每条记录后面添加修改按钮2、点击修改按钮，进入表单页面，进行数据回显3、通过路由跳转进入数据会先页面4、在前端页面list.vue的修改按钮处绑定跳转路由5、在表单页面实现数据回显（1）在teacher.js定义根据id查询数据的接口（2）在页面调用接口实现数据回显（3）调用根据id查询的方法6、数据回显后，修改讲师信息（1）在api的teacher.js定义修改接口（2）在页面调用修改的方法 1、每条记录后面添加修改按钮 2、点击修改按钮，进入表单页面，进行数据回显 根据讲师id查询数据
@ApiImplicitParam注解使用说明
LSW1737554365的博客
06-28 9875
是Swagger框架中的一个注解，用于描述请求参数的详细信息。它可以帮助开发人员生成API文档，并提供给用户更清晰的接口信息。类型，可以根据实际情况将参数放置在URL的不同位置，或者作为请求体的一部分，从而实现不同的参数传递方式。下面是一个示例，演示如何在Spring Boot中使用。
谷粒商城的前端vue界面（含管理）.zip
05-09
谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） ...
谷粒商城资料整理课件.zip_谷粒商城课件
07-01
基础篇\课件\谷粒商城-分布式基础-图.pdf 运维篇\课件\K8S部署&DevOps.pdf 高级篇\课件\01、Reactive&WebFlux.pdf 高级篇\课件\02、接口幂等性.pdf 高级篇\课件\03、本地事务&分布式事务.pdf 高级篇\课件\04、性能与...
《谷粒商城》2020基础篇前端vue模板代码及图片
11-23
此资源为与视频匹配的基础篇前端vue模板代码及后台系统所需图片资源。 项目采用SpringCloudAlibaba技术栈。由业务集群系统+后台管理系统构成，打通了微服务分布式开发及全栈开发技能，包含前后分离全栈开发、Restful...
谷粒商城第十二天-基本属性&销售属性管理功能的实现（公共组件）
08-11
基本属性&销售属性管理功能的实现的公共组件
谷粒商城第十二天-基本属性&销售属性管理功能的实现（核心组件）
08-11
基本属性&销售属性管理功能的实现的核心组件
商城开发之商品分类表的设计、使用、管理
asd1098626303的博客
03-08 1718
前言 其实很久之前就很想写这篇博客，但是由于我的记性差和项目的原因，总是没有写，今天忽然想起来，要是今天不写或许过几天就忘了，于是敲起键盘，写这篇博客。 数据库设计 对于一个项目来说，数据库的设计是一个至关重要的事情，如果数据库设计的不好， 那么往往会让项目变得更加复杂。 category中基本有4个属性 id：分类的唯一标识符 name：分类名 count：当前分类有多少子分类
java面试题
热门推荐
weixin_45094438的博客
09-20 64万+
Java面试题 一 Java基础阶段 1.1 面向对象 面向对象的特征有哪些方面? 面向对象的特征主要有以下几个方面： 1)抽象：抽象就是忽略一个主题中与当前目标无关的那些方面，以便更充分地 注意与当前目标有关的方面。抽象并不打算了解全部问题，而只是选择其中的一 部分，暂时不用部分细节。抽象包括两个方面，一是过程抽象,二是数据抽象。 2)继承：继承是一种联结类的层次模型，并且允许和鼓励类的重用，它提供了 一种明确表述共性的方法。对象的一个新类可以从现有的类中派生，这个过程称 为类继承。新类继承了原始类的特
Ant design Vue 相关设置或问题集合（持续更新...）
qq_27387133的博客
05-19 5910
目录 1.日期选择框 datePicker设置可选范围在今天或之前 1.1设置":disabled-date"属性 2.设置select下拉框可以进行输入搜索 2.1设置"show-search"和'option-filter-prop="children"'属性 3.a-form-item标签中的label文字不会自动换行 3.1将label单独写出来并设置white-space样式，不作为属性写在a-form-item标签中 3.2改动后发现行高太大了，怎么办？ 1.日期选择框 d.
尚硅谷实战项目-谷粒学院-part one
weixin_45720751的博客
05-26 3234
实战项目 mybatis-plus的使用 查询操作 application.properties文件 #springboot2.1后加cj，不会报警告 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver #springboot2.1之后的版本需要加时区 spring.datasource.url=jdbc:mysql://localhost:3306/mybatis_plus?serverTimezone=GMT%2B8 spring.
Dynamics 365中使用Web API将查找字段的值设置为空值的方法。
Globalizationa的博客
09-19 348
摘要: 本人微信和易信公众号： 微软动态CRM专家罗勇 ，回复270或者20180424可方便获取本文，同时可以在第一间得到我发布的最新的博文信息，follow me！我的网站是 www.luoyong.me 。 Dynamics CRM 2016开始推出推荐使用Web API，我也有系列博客文章做了介绍，主要文章如下： Dynamics CRM 2015/2016新特性之二十：Web API介绍及使用它创建记录 Dynamics CRM 2015/2016新特性之二十二：使用Web API更新和...
三十一.属性分组接口新增修改功能编写
绅士jiejie的博客
07-07 641
一.修改分组接口新增修改相关接口 点击页面的新增按钮出现的所属分类如下红框所标注，不应该出现第4级框，因为分类到了第3级就已经是最底层了。 修改下后端，让子类为null的数据就不要舍值了，如下修改CategoryEntity类： 在子类集合上加上 @JsonInclude(value = JsonInclude.Include.NON_EMPTY)注解表示如果数据为null，则就不返回这个字段数据了。 修改后效果如下： 点击新增，看下数据情况： 点击修改，情况如下： 发现所属分类数据没有回显。
openstack主要组件详解与介绍
weixin_46731227的博客
06-03 1万+
openstack主要组件详解与介绍 Openstack是目前最流行的开源云操作系统，主要使用池化虚拟资源来构建和管理私有云及公共云。其中的六个项目主要负责处理核心云计算服务，包括计算、网络、存储、身份和镜像服务。还有另外十多个可选项目，用户可把它们捆绑打包，用来创建独特、可部署的云架构。学习和掌握开源openstack知识将帮助云计算从业者打好坚实的基础。 云计算模式： IaaS：基础设施即服务（个人比较习惯的）：用户通过网络获取虚机、存储、网络，然后用户根据自己的需求操作获取的资源。 PaaS：平台即
商城项目11_商品SPU、SKU、详解表结构、属性分组列表展示、修改、新增、分类级联更新
所得皆惊喜
09-12 2448
商品SPU、SKU、详解表结构、属性分组列表展示、修改、新增、分类级联更新
谷粒商城笔记+踩坑（5）——商品服务-属性分组、品牌关联分类，spu+sku+分页拦截器
vincewm的博客
10-09 3949
SPU和SKU、属性分组的增删改查、QueryWrapper的and和or用法、获取当前品牌关联的所有分类
谷粒商城测试数据sql
最新发布
09-27
谷粒商城的测试数据SQL文件可以通过以下步骤获得和执行: 1. 在IDEA中打开"gulimall_admin"项目。 2. 在项目中找到"renren-fast"文件夹并打开。 3. 在"renren-fast"文件夹中找到"db"文件夹。 4. 打开"db"文件夹中的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值