第174天学习打卡（项目 谷粒商城16 API网关分类 查询树形展示三级分类数据）

API三级分类-查询-树形展示三级分类数据

前一天出现的问题的解决

[ERROR] Failed to execute goal on project gulimall-product: Could not resolve dependencies for project com.doudou.gulimall:gulimall-product:jar:0.0.1-SNAPSHOT: Could not find artifact com.doudou.gulimall1:gulimall-common:jar:0.0.1-SNAPSHOT -> [Help 1]
[ERROR] 
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/DependencyResolutionException

Process finished with exit code 1

网上查找了很多方法，我试过的方法有

方法1 在根目录的maven里面clean 和 install (对我的这个问题没解决)

方法二：在gulimall-common的maven进行clean install package(也没有用)

方法三 对所有的maven进行运行然后出现了程序包io.renren.common.exception不存在 然后修改了包

**再重新Rebuild Project 问题就解决了 **

可以看到gulimall-product已经注册上来了

gulimall-gateway 的application.yml的配置

spring:
  cloud:
    gateway:
      routes:
        - id: product_route
          uri: lb://gulimall-product
          predicates:
            - Path=/api/product/**
          filters:
            - RewritePath=/api/?(?<segment>.*), /$\{segment}

        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/?(?<segment>.*),/renren-fast/$\{segment}

localhost:88/api/product/category/list/tree

解构data数据

<template>
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>

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

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
 data() {
      return {
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
   
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
 methods: {
      handleNodeClick(data) {
        console.log(data);
      },
      getMenus(){
        this.$http({
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'get',
        }).then(({data})=>{
         console.log("成功获取到菜单数据...", data.data)
        })
      }
    },

//生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.getMenus();

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>

</style>

category.vue

<template>
<el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>

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

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
 data() {
      return {
        menus: [],
        defaultProps: {
          children: 'children',
          label: "name"
        }
      };
    },
   
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
 methods: {
      handleNodeClick(data) {
        console.log(data);
      },
      getMenus(){
        this.$http({
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'get',
        }).then(({data})=>{
         console.log("成功获取到菜单数据...", data.data)
         this.menus = data.data;
        })
      }
    },

//生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.getMenus();

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>

</style>

数据库里面的数据重新改为0，然后保存

重新刷新页面：

需要从element里面拷贝的地方（这些内容后面会被修改的）

 <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>

 append(data) {
        const newChild = { id: id++, label: 'testtest', children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },

B站学习网址全网最强电商教程《谷粒商城》对标阿里P6/P7，40-60万年薪_哔哩哔哩_bilibili