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

新建category.vue三级分类文件

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

重启前端服务, 进行测试. 点击分类维护, 可以看到成功的显示了.

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

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

  



//这里可以导入其他文件（比如：组件，工具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缓存功能，这个函数会触发.  页面被激活就会发送请求
};

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

renren-fast 注册到nacos

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

     
            com.atguigu.gulimall
            gulimall-common
            0.0.1-SNAPSHOT
        

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

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

启动类中,加上服务发现的注解. 启动服务

在nacos的服务列表即可看到renren-fast的服务了.

配置网关

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

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

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

重启后端服务 重启前端服务 再次访问登录页面 会发现验证码的请求仍然是404 原因分析 请求到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 官方给出的示例含义为 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/(?/?.*), /renren-fast/$\{segment}

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