谷粒商城项目实战——04商品服务之属性分组

三. 属性分组

1. 前期工作

1. 数据导入

1. 将课件中菜单数据库中的数据导入数据库, 这样就不用自己后期一个一个的添加

   

2. 三级分类抽取成公共组件

1. 抽取公共类

1. 抽取公共类

   <template>
   <!-- 
   	:data: 获取的数据源
   	:props: 配置选项
   	@node-click: 节点被点击时的回调
   	node-key: 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的(一定要设置)
   -->
       <el-tree 
           :data="menus" 
           :props="defaultProps" 
           node-key="catId"
           ref="menuTree"
           @node-click="nodeClick">
       </el-tree>
   </template>
   <script>
   
   export default {
   components: {},
   props: {},
   data() {
   //这里存放数据
       return {
           menus: [],
           // 展开删除分类的父id
           expandedKey: [],
           defaultProps: {
             // 子节点的属性
             children: 'children',
             // 要显示的内容
             label: 'name'
           },
         };
   },
   //计算属性 类似于 data 概念
   computed: {},
   //监控 data 中的数据变化
   watch: {},
   //方法集合
   methods: {
       // 获取属性分类列表
         getMenus(){
             this.$http({
                 url: this.$http.adornUrl('/product/category/list/tree'),
                 method: 'get'
             }).then(({data}) => { // {data}, 使用解构的方式获取对象中的data数据
                 console.log("成功获取到菜单数据: ", data.data)
                 this.menus = data.data
             })
         },
         nodeClick(data, node, component){
             console.log("category被点击: ", data, node, component)
             // 向父组件发送事件
             // 子组件被点击后, 会给父组件传递tree-node-click事件, 
             // 并携带上data, node, component信息
             this.$emit("tree-node-click", data, node, component)
         }
   },
   created() {
       this.getMenus()
   },
   </script>
   

2. 页面导入

1. 展示页面获取组件的操作

   从代码生成器中拷贝页面到前端项目

   ​

   

3. 传递参数

1. 子组件传递(公共组件)

   

2. 父组件接收

   <el-col :span="6">
     <!-- 
       希望category被点击后, attrgroup能感知到 
   
       父子组件传递数据
       1. 子组件给父组件传递数据, 事件机制
       子组件给父组件发送一个事件, 事件携带上数据
       2. 父组件获取到该事件后, 执行指定的方法   
     -->
     <category @tree-node-click="treeNodeClick"></category>
   </el-col>
   
   <script>
   import Category from '../common/category'
   import AddOrUpdate from './attrgroup-add-or-update'
       ...
   // 感知树节点被点击
   treeNodeClick( data, node, component){
   	console.log("attrgroup感知到category节点被点击: ", data, node, component)
   	console.log("刚才被点击的节点的菜单id", data.catId)
   },    
   </script>
   

   

   ​

3. 效果

   ​

2. 获取分类属性(查询)

生成的查询方法只能查询所有分类, 所以需要手动编写相关方法

1. 后端代码

1. Controller层

1. AttrGroupController

   @RequestMapping("/list/{catelogId}")
   public R list(@RequestParam Map<String, Object> params, @PathVariable("catelogId") Long catelogId){
        
        
       // PageUtils page = attrGroupService.queryPage(params);
       PageUtils page = attrGroupService.queryPage(params, catelogId);
       return R.ok().put("page", page);
   }
   

2. Service层

1. 接口

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

2. 实现

   @Override
   public PageUtils queryPage(Map<String, O