谷粒商城39 - 前后端-商品服务-API-三级分类-配置网关路由与路径重写

女爷i 2023-03-04 13:26 23阅读 0赞

### 文章目录 ###

*   *   *  新建category.vue三级分类文件
         *  分类维护页面发送后台请求
         *  renren-fast 注册到nacos
         *  配置网关
         *  SpringCloud Gateway 路径重写

### 新建category.vue三级分类文件 ###

vscode打开 renren-fast-vue  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
启动后台服务  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
使用npm run dev 启动前端服务  
![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][]  
新增一个菜单  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4][]  
renren-fast-vue 的前端规则  
1.配置的路由url`product/category` ,会被替换为`product-category`![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5][]  
![20200803202520658.png][]  
2.vue文件路径规则  
角色管理为sys-role  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6][]  
对应了src/views/modules/sys/role.vue 文件 .  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7][]  
那么相对应的, `product-category` , 就是product文件夹下的, category.vue文件  
新建立的vue文件如下图, 其中的内容用vue模板生成, template中 写个测试

![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][]

### 分类维护页面发送后台请求 ###

在分类维护页面, 仿照role.vue的代码, 点击页面的时候, 发送请求  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10][]  
完整代码如下

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

点击菜单后, 却发现是404. 因为是发送给renren-fast的.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 11][]  
而接口实际上是写在gulimall-product中的.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 12][]  
在vscode中, 使用ctrl+shift+f 全局搜索`http://localhost:8080/renren-fast`  
可以看到是在index.js中定义的请求路径  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 13][]  
为了统一地址, 只需要给网关发送请求, 然后由网关路由到指定的服务  
请求路径修改为`http://localhost:88`  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 14][]  
刷新页面, 会跳转到登录页面, 并且发送验证码的请求也失败了. 因为发送的是88端口. 而验证码是在renrenfast的8080端口中的. 因此先把renren-fast 注册到注册中心中, 再由网关转发登录的请求到renren-fast  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 15][]

### renren-fast 注册到nacos ###

renren-fast 依赖中, 添加common, 里面包含了 nacos的注册中心的依赖

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

yml中进行配置  
spring的节点中, 配置应用的名称, nacos的地址

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 16][]  
启动类中,加上服务发现的注解. 启动服务

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 17][]  
在nacos的服务列表即可看到renren-fast的服务了.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 18][]

### 配置网关 ###

在网关中, 使用指定路径的断言The Path Route Predicate Factory  
例如如下的示例中 , `red/1 or /red/blue or /blue/green.`的请求,都会跳转到`https://example.org.`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 19][]  
关于lb 负载均衡的示例  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 20][]  
将服务负载均衡给renren-fast  
只要是前端项目, 默认带上 /api 前缀, 跳转到renren-fast  
所有带api的请求,都跳转到renren-fast  
网关模块中, 进行如下的配置

spring:
      cloud:
        gateway:
          routes:
            - id: admin_route
              uri: lb://renren-fast
              predicates:
                - Path=/api/**

重启后端服务  
![20200804193937974.png][]  
重启前端服务  
再次访问登录页面  
会发现验证码的请求仍然是404  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 21][]  
原因分析  
请求到88端口的网关后, 会转发到renren-fast . 从nacos中找到renren-fast的应用名称和端口 .  
实际请求的是  
`http://renren-fast:8080/api/captcha.jpg`  
但正确的发送验证码的请求应该是:  
`http://127.0.0.1:8080/renren-fast/captcha.jpg`

所以希望网关能够把请求路径转成正确的路径

### SpringCloud Gateway 路径重写 ###

网关把请求路径转成正确的路径 . 那么就需要用到它的路径重写的功能.  
官方名称为  
`The RewritePath GatewayFilter Factory`  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 22][]  
官方给出的示例含义为  
`For a request path of /red/blue, this sets the path to /blue`  
把`/red/blue`请求路径, 重写成了`/blue`

修改网关的配置文件如下

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

把api开头的请求路径, 改写成/renren-fast开头的路径  
再次重启后端服务.,  
可以看到能够正常的显示验证码了  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 23][]  
点击登录 . 控制台会报错如下  
![在这里插入图片描述][20200804200152998.png]  
提示由于从8001到88端口 ,而跨域导致登录失败 .  
需求检查请求头中, 是否有`Access-Control-Allow-Origin` 访问控制允许来源, 来允许跨域.  
下一节将介绍如何解决跨域

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20230208/28c872b509a44afba714393252e25cce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20230208/02559bb98c8448d49b9e09e51d329722.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20230208/b4bb757ce2204fc2a0455637c36a93de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20230208/f4f0056e6b304bcb9f1da8360d29df4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4]: /images/20230208/0e314c8399f74165a3c79ea11fc8bfd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5]: /images/20230208/c6ca8fda875644dab05ed2d8638832db.png
[20200803202520658.png]: /images/20230208/e40996db32ae436a8d17be4857b34119.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6]: /images/20230208/7eefca1b2bbe4b7a808bd4b36131b84f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7]: /images/20230208/3248b4a78f6849358d99fc8c543e12c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8]: /images/20230208/42300f025cc8434e9443b9f86725a8d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9]: /images/20230208/0dbf4f1d60264655aae2d36b6376b4e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10]: /images/20230208/09aa81eb76664d8294f25de48cfa1fc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 11]: /images/20230208/d281f9b4134c442381baa052a11f8d75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 12]: /images/20230208/34267a42082740158f429d255891d648.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 13]: /images/20230208/47afc9041ec54d449bef9e9689d3737d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 14]: /images/20230208/5538d68637db4a25a33b8841ab9876cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 15]: /images/20230208/6bd6d9b029cf44c4b32434a5c59469a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 16]: /images/20230208/15ea45a3b9884fd6b53a1af557afb98e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 17]: /images/20230208/42ea0a5fbf59466d8ab3c5083f66c254.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 18]: /images/20230208/ef9154420e5944c1b4888580665218f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 19]: /images/20230208/953c6211ca9e4b15b9d5cf4a233c7e88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 20]: /images/20230208/1533dcdadc56458798674dd13b4af3d4.png
[20200804193937974.png]: /images/20230208/ad8e450d0ee84fd6a0bf2a7d0a02359f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 21]: /images/20230208/4a4c98421bb3408aa5b396249ae1f9e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 22]: /images/20230208/fbb82fa01da4496ba004796fbe4691f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 23]: /images/20230208/9c316e7bcabe4602aaf41a537085d495.png
[20200804200152998.png]: /images/20230208/4794b4f909b040d79e3050562304ed4d.png