谷粒商城 (十二) --------- 商品服务 API 三级分类 ③ 树形展示三级分类数据

---

一、编写商品服务的路由

在网关服务中配置：

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

注意：此路由要放在我们在上篇文章配置的定向到renren-fast的路由之上，否则不会生效

二、将商品服务注册到 Nacos 服务中心

三、前端修改

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

<script>
export default {
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "children",
        label: "name",
      }
    };
  },
  created() {
    this.getMenus();
  },
  methods: {
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        console.log("成功获取后台数据", data.data);
        this.menus = data.data;
      });
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

四、测试