商品服务-三级分类-查询(树形展示三级分类数据)

1.分类维护

跨域解决了，但报错404,前端请求经过网关处理转到后台renren-fast，商品服务的应该转到gulimall-product

2.商品服务配置信息交给配置中心

新建配置文件bootstrap.properties

#bootstrap.properties优先于application.properties加载
#服务名
spring.application.name=gulimall-product

#配置中心地址
spring.cloud.nacos.config.server-addr=127.0.0.1:8848

#配置命名空间(默认是public空间，只能写唯一id不能写命名空间名称)
spring.cloud.nacos.config.namespace=6ac330a4-ec48-4a1b-a664-c2eba3ca2798

商品服务注册到注册中心，我之前的博客中已写，在此不重述

3.配置商品服务路由

在gulimall-gateway的application.yml

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

  ## 前端项目   /api
  ## http://localhost:88/api/captcha.jpg    http://localhost:8080/renren-fast/captcha.jpg

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

重启访问后

原因分析:商品路由没生效(先走的是后台renren-fast的路由)
解决方案: 精确的路由放高优先级,模糊的低优先级(将后台与商品路由顺序互换)

#商品服务gulimall-product
- id: product_route
   uri: lb://gulimall-product
   predicates:
     - Path=/api/product/**
   filters:
     - RewritePath=/api/(?<segment>.*),/$\{segment}
## http://localhost:88/api/product/category/list/tree http://localhost:10000/product/category/list/tree
        
 #后台renren-fast
  - id: admin_route
    #lb 负载均衡
    uri: lb://renren-fast
    predicates:
      - Path=/api/**
    filters:
      - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}

   ## 前端项目   /api
  ## http://localhost:88/api/captcha.jpg    http://localhost:8080/renren-fast/captcha.jpg

重启网关项目

4.数据展示

修改category.vue中的getMenus方法，将数据解构出来

 //获取菜单
 getMenus() {
    this.$http({
      url: this.$http.adornUrl('/product/category/list/tree'),
      method: 'get',
    }).then(({data})=> {
     console.log("获取菜单数据成功",data.data);
    })
  },

对数据赋值

 //获取菜单
 getMenus() {
    this.$http({
      url: this.$http.adornUrl('/product/category/list/tree'),
      method: 'get',
    }).then(({data})=> {
     console.log("获取菜单数据成功",data.data);
     this.menus = data.data;
    })
  },

修改defaultProps的属性

 defaultProps: {
     children: 'children',
      label: 'name'
 }

详情参考ElementUI官网中树形控件添加链接描述

5.category.vue完整代码

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

<script>
export default {
name: '',
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
 data() {
      return {
        menus: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };
    },
    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;
        })
      },
    },
//计算属性 类似于data概念
computed:{
},
//监控data中的数据变化
watch:{
},

//生命周期 - 创建完成(可以访问当前this实例)
created() {
    this.getMenus();
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>

</style>