商品三级菜单配置网关路由与路径重写

雨点打透心脏的1/2处 2021-07-24 13:32 494阅读 0赞

# 一 启动后端管理系统RenrenApplication #

# 二 启动前端项目gulimall-admin-vue-app #

npm run dev

# 三 获取菜单关键代码 #

// 方法集合  
    methods: {
        // 获取树形菜单结构
        getMenus() {
          this.$http({
            url: this.$http.adornUrl("/product/category/list/tree"),
            method: "get",
          }).then(({ data }) => {
            console.log("成功获取到菜单数据...", data.data);
            this.menus = data.data;
          });
        },
    }
    
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        // 获得菜单数据
        this.getMenus();
    },

# 四 配置前端项目api接口，它路由到网关微服务 #

/**
    * 开发环境
    */
    ; (function () {
      window.SITE_CONFIG = {};
    
      // api接口请求地址，这里的88端口是网关端口,它会路由到网关微服务
      window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api';
      // window.SITE_CONFIG['baseUrl'] = 'http://localhost:8080/renren-fast';
    
      // cdn地址 = 域名 + 版本号
      window.SITE_CONFIG['domain'] = './'; // 域名
      window.SITE_CONFIG['version'] = '';   // 版本号(年月日时分)
      window.SITE_CONFIG['cdnUrl'] = window.SITE_CONFIG.domain + window.SITE_CONFIG.version;
    })();

# 五 配置renren-fast后端项目，使得它能注册到nacas #

spring:
      application:
        name: renren-fast # 使得nacos能注册自己
      cloud:
        nacos:
          discovery:
            server-addr: 127.0.0.1:8848 # 配置注册中心地址

# 六 开启renren-fast后端项目服务注册功能，注册到nacos中 #

// 开启nacos服务注册发现功能
    @EnableDiscoveryClient
    @SpringBootApplication
    public class RenrenApplication {
       public static void main(String[] args) {
          SpringApplication.run(RenrenApplication.class, args);
       }
    }

# 七 配置 gulimall-gateway的网关路由以及路径重写功能 #

# 当访问 /api/** ，则负载均衡路由到 renren-fast 后端管理系统
    - id: admin_route
      uri: lb://renren-fast
      predicates:
        - Path=/api/**
      filters:
        # 过滤器实现路径重写功能：将 /api/** 重写为 /renren-fast/**
        - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}

# 八 启动 gulimall-gateway #

此时nacos注册情况如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 九 测试 #

能够访问到renren-fast后端项目的验证码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

# 十参考： #

1 后端项目

[https://gitee.com/cakin24/mygulimall][https_gitee.com_cakin24_mygulimall]

2 前端项目

[https://gitee.com/cakin24/gulimall-admin-vue-app][https_gitee.com_cakin24_gulimall-admin-vue-app]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/2d32bf114fdd417582675a1b40fb9df9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/f8161afc772e4574972fff200a4c4570.png
[https_gitee.com_cakin24_mygulimall]: https://gitee.com/cakin24/mygulimall
[https_gitee.com_cakin24_gulimall-admin-vue-app]: https://gitee.com/cakin24/gulimall-admin-vue-app