商品服务-三级分类-配置网关路由与路径重写

1.新建商品管理

启动renren-fast与前端项目,在菜单管理中选择新建商品管理(目录)

刷新页面

再新建菜单分类维护，路由为product/category

刷新页面后

2.规律

菜单url中的/在地址栏中被替换成-

对应的前端页面在/views/modules/sys/menu.vue

类似的我们在/modules下新建/product/category.vue

3.category.vue中展示三级分类数据

在ElementUI官网添加链接描述中找到Tree树形控件

将示例代码复制

4.展示真实数据

4.1获取菜单getMenus

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

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

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

<style scoped>

</style>

4.2.bug分析

端口不对，不应该是后台管理项目端口8080，而是商品项目端口10000

让前端发来的请求交给网关处理,修改前端项目端口信息**/static/config/indes.js**

 // api接口请求地址
  window.SITE_CONFIG['baseUrl'] = 'http://localhost:88';

发现请问88端口但验证码没了,验证码应该从后台项目中获取，网关将请求转给后台项目即可(后台项目得注册到nacos)
renren-fast的pom中依赖gulimall-comment

<dependency>
	<groupId>com.atguigu.gulimall</groupId>
	<artifactId>gulimall-common</artifactId>
	<version>0.0.1-SNAPSHOT</version>
</dependency>

配置服务名与nacos注册中心地址

  application:
    name: renren-fast
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848

启动类加注解@EnableDiscoveryClient

人为规定前端项目请求携带/api前缀，再次修改前端项目端口信息

// api接口请求地址
window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api';

配置gulimall-gateway的application.yml

 - id: admin_route
   #lb 负载均衡
   uri: lb://renren-fast
   predicates:
      - Path=/api/**

路由配置详情参考spring-cloud官网添加链接描述

重新启动项目后发现验证码还是404

原因分析:
前端发来的http://localhost:88/api/captcha.jpg ，经过网关处理后变为http://localhost:8080/api/captcha.jpg(前端携带/api符合要求转到后台renren-fast，但后面的地址直接拼接)
路径重写

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

路径重写详情参考spring-cloud官网添加链接描述

重启项目再次访问，发现验证码获取正常(前端发来的http://localhost:88/api/captcha.jpg经过网关处理http://localhost:8080/renren-fast/captcha.jpg)