谷粒商城41 - 前后端-商品服务-API-三级分类-查询-树形展示三级分类数据

叁歲伎倆 2023-03-06 05:45 89阅读 0赞

### 文章目录 ###

*   *   *  网关配置商品服务
         *  将商品服务注册到nacos中
         *  树形显示结构前端

### 网关配置商品服务 ###

点击分类维护页面, 请求404, 原因是之前配置的网关, 把请求都给renren-fast了, 需要把商品服务的请求, 转发给商品服务.  
![20200805191749741.png][]  
网关新增对商品服务的转发,完整的配置文件如下

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

### 将商品服务注册到nacos中 ###

在nacos的命名空间中, 新增一个命名空间为product的商品服务.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
在商品服务中, 新增一个bootstrap.properties 文件 . 用于读取nacos的配置  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
文件内容为. 启动命名空间的id 从nacos中复制获取

spring.application.name=gulimall-product
    # 配置中心的地址 nacos的地址
    spring.cloud.nacos.config.server-addr=127.0.0.1:8848
    # product 商品服务的命名空间
    spring.cloud.nacos.config.namespace=2b0ae716-5d35-4618-8fbb-95fd2b661533

同时在application.yml中配置naocs的地址和应用的名称, 用于注册进nacos  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
启动类中, 加入服务注册发现 . 重启服务  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]  
在nacos的服务列表中, 即可看到gulimall-product 服务  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4][]  
再次访问上面404的接口  
`http://localhost:88/api/product/category/list/tree`  
响应如下. 原本期望的是可以获取商品的树列表, 但是实际是被renren-fast服务给拦截了, 没有权限.  
![20200805193618461.png][]  
解决办法是把商品服务的路由,放在上面, 而对于/api/\*\* 这种模糊请求, 应该放在下面  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5][]  
重启网关服务, 再次发送树结构请求, 可以看到能够正常的获取数据了.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6][]

### 树形显示结构前端 ###

前端用一个解构函数, 对后端返回的数据, 进行结构.  
并且设置一个`menus`数组用于接收值.  
再用ElementUI的一些属性, 将树形结构显示出来 .  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8][]  
关于树形结构的用法  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9][]  
显示的效果如图所示 :  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10][]  
完整的代码如下

<template>
      <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </template>
    
    <script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    
    export default { 
      //import引入的组件需要注入到对象中才能使用
      components: { },
    
      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>

[20200805191749741.png]: /images/20230208/21111cd162f846c5be9fd827657ab908.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20230208/b9a91222c19d4e069b0a0dd1c04545c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20230208/eb48e4132a5e4362a4c34e68429c5e5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20230208/3284af6079e1404996955b592c87d01c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20230208/179b0151793541569b70e47918a2ad25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4]: /images/20230208/c5e124055146492cab3888fca6fd3989.png
[20200805193618461.png]: /images/20230208/e04f417ef6f8442ebb0e3243a74b520f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5]: /images/20230208/048df23408664cb98a2b30d6ac64f1e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6]: /images/20230208/e7278a06e51145c1b5c48c282cda3b63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7]: /images/20230208/c3314bc58e3d485298e3825733766ae2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8]: /images/20230208/d0736ba5f80f4fc588768f6489b36b42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9]: /images/20230208/f2447547f6804c1eabeb76558b50fa24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10]: /images/20230208/0f643781d39e43fab432d188eaf288ee.png