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

- 日理万妓 2024-04-07 13:23 73阅读 0赞

#### 目录 ####

*  一、编写商品服务的路由
 *  二、将商品服务注册到 Nacos 服务中心
 *  三、前端修改
 *  四、测试

--------------------

## 一、编写商品服务的路由 ##

在网关服务中配置：

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

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

![在这里插入图片描述][6e80ec54df8d4a28a61a20a790535adf.png]

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

![在这里插入图片描述][cd59d967b83249658af7ae90ede0335f.png]

![在这里插入图片描述][9089cc5e7b7c49c89b5af3f8a143ee05.png]  
![在这里插入图片描述][4d31ec287ced4dea9a9dae91428c05ff.png]  
![在这里插入图片描述][93e0e73ee41546788f2e9aca4c2dd638.png]

## 三、前端修改 ##

<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>

## 四、测试 ##

![在这里插入图片描述][b67cde6bc9294b62883a9055581fe9c3.png]

[6e80ec54df8d4a28a61a20a790535adf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2e94a8f98f174520bb34c5da67dd1118.png
[cd59d967b83249658af7ae90ede0335f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/006497572e3a4259b864df50a95f4744.png
[9089cc5e7b7c49c89b5af3f8a143ee05.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a66d94104144422c970bbe1a750745db.png
[4d31ec287ced4dea9a9dae91428c05ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/83aa1016a4ec497ba027294f7dc9a5c6.png
[93e0e73ee41546788f2e9aca4c2dd638.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/20c65ccba1904349aa33eb11bee3974c.png
[b67cde6bc9294b62883a9055581fe9c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/296afdbc111c4d70b9dd4e0b20f4a47c.png