一：分类数据展示

1.在gateway的application.yml配置product模块路由

spring:
  application:
    name: gulimail-gateway
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
    gateway:
      routes:
        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}
            #负载均衡到商品服务
        - id: product_route
          uri: lb://gulimail-product
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*),/$\{segment}

2.在gulimail-product中新建bootstrap.properties文件

#应用名称
spring.application.name=gulimail-product
#注册发现中心地址
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
#配置命名空间
spring.cloud.nacos.config.namespace=65b93daf-d3fc-4266-a667-0849451f1895

3.在nacos中配置product相关文件

1）将生成的id复制到配置文件的namespace中
2）在nacos的product中新建gulimail-product配置

3）在gulimail-product的applicat.yml添加配置中心相关配置

#数据源
spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://127.0.0.1:3306/gulimail_pms?serverTimezone=GMT%2B8
    driver-class-name: com.mysql.jdbc.Driver
  cloud:
    #nacos地址
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848

    #服务的名称，用于让nacos知道那个服务正在被调用
  application:
    name: gulimail-product

#mybatis-plus映射位置
#classpath*，表示扫描本微服务和其他微服务
mybatis-plus:
  mapper-locations: classpath*:/mapper/**/*.xml
#设置id主键自增
  global-config:
    db-config:
      id-type: auto

#设置端口
server:
  port: 10000

4）在主启动类添加@EnableDiscoveryClient开启服务的注册发现功能

4.重启gulimail-product项目

发现已经注册到注册中心中
1）调整路由的优先级，否则三级分类接口会被renren-fast拦截

gateway:
      routes:
        #负载均衡到商品服务,优先级高
        - id: product_route
          uri: lb://gulimail-product
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*),/$\{segment}
        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}

2）重启项目，打开浏览器开发者模式，查看http://localhost:88/api/product/category/list/tree返回结果

3）配置前端category.vue页面

<template>
  <div>
    <el-tree
      :data="menus"
      :props="defaultProps"
    ></el-tree>
  </div>
</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: {
    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>