谷粒商城day34 -商品服务-API-三级分类-查询-树形展示三级分类数据_谷粒商城中thymeleaf第三级分类查询跳转在哪-优快云博客

1.网关中进行路由配置

因为之前写的路由到renrenfast的/api/** 包含了我们配的路径，而路由是从上到下，所以把我们的配置放到之前配置上面,

不然会被/api/**拦截而无法正确路由,配置如下，菜单分类显示功能是在商品服务中

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

2.商品服务中bootstrap.properties 添加配置

其中有添加新命名空间product 然后拷贝空间ID到如下

spring.application.name=gulimall-product
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
spring.cloud.nacos.config.namespace=3cab3d66-f150-4799-9186-ef66dd89d3bd

3.添加服务发现注解

4.启动三个服务，检测服务是否成功开启

5.前端获取数据并显示

其中包括绑定menus作为树形控件的数据源数组，defaultProps内定义子菜单为menus的children属性，label显示值为menus的name属性

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

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

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
      return {
        menus: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };
    },
    //方法集合
     methods: {
           // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'get',
        }).then(({data}) => {
          console.log('get data success!'+data.data);
          this.menus = data.data;
          console.log('menus:'+this.menus);
        })
      }
    },
      handleNodeClick(data) {
        console.log(data);
      },
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.getDataList();
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}//如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>