谷粒商城P46配置网关路由及路径重写及跨域配置

一时失言乱红尘 2022-12-15 03:56 206阅读 0赞

##### 1.启动renren-fast #####

##### 2. 启动renren-fast-vue项目 #####

在VSCode打开renren-fast-vue文件夹，新建终端并输入命令

npm run dev

##### 3.编辑renren后台管理系统页面 #####

> 1、登录 http://localhost:8001,登录账号密码均为 admin

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY5NDk2_size_16_color_FFFFFF_t_70_pic_center]

> 2、建立一级目录商品系统以及二级菜单分类维护

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY5NDk2_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY5NDk2_size_16_color_FFFFFF_t_70_pic_center 2]

> 3、在VSCode下的 /src/views/modules 目录下创建目录product，并在product目录下创建文件 category.vue

<template>
      <div class=""></div>
    </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() {},
      //生命周期 - 挂载完成（可以访问DOM元素）
      mounted() {},
      beforeCreate() {}, //生命周期 - 创建之前
      beforeMount() {}, //生命周期 - 挂载之前
      beforeUpdate() {}, //生命周期 - 更新之前
      updated() {}, //生命周期 - 更新之后
      beforeDestroy() {}, //生命周期 - 销毁之前
      destroyed() {}, //生命周期 - 销毁完成
      activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    };
    </script>
    <style scoped>
    /* @import url(); 引入公共css类 */
    </style>

> 4、在 static/config/index.js 文件中修改地址为 http://localhost:88/api

![在这里插入图片描述][20201015155048888.png_pic_center]

> 5、将renren-fast注册到nacos服务注册中心

5.1 导入依赖

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

5.2 在application.yml 中加入如下配置

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

5.3 开启服务注册权限，在启动类上加上如下注解

![在这里插入图片描述][20201015160517574.png_pic_center]

> 6、配置网关的路由规则

在gulimall-gateway项目的application.yml文件中加入如下配置

spring:
      cloud:
        gateway:
          routes:
            - id: admin_route
              uri: lb://renren-fast  # 网关负载均衡的发送到renren-fast
              predicates:
                - Path=/api/**
              filters:
                - RewritePath=/api/(?<segment>.*),/renren- fast/$\{ segment}  #实现路径重写
    
    ## 所有前端项目带 /api
    ## http://localhost:88/api/captcha.jpg
    ## http://localhost:8080/renren-fast/captcha.jpg

> 7、解决跨域问题

7.1 注销掉renren-fast项目自带的跨域配置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY5NDk2_size_16_color_FFFFFF_t_70_pic_center 3]  
7.2 在gulimall-gateway项目下的gateway目录下新建config目录，并新建GulimallCorsConfig文件  
**注意：包别导错了**

package com.atguigu.gulimall.gateway.config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    
    import org.springframework.web.cors.reactive.CorsWebFilter;
    import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
    
    @Configuration
    public class GulimallCorsConfig { 
    
        @Bean
        public CorsWebFilter corsWebFilter(){ 
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    
            CorsConfiguration corsConfiguration = new CorsConfiguration();
    
            //1.配置跨域
            corsConfiguration.addAllowedHeader("*");
            corsConfiguration.addAllowedMethod("*");
            corsConfiguration.addAllowedOrigin("*");
            corsConfiguration.setAllowCredentials(true);
    
            source.registerCorsConfiguration("/**",corsConfiguration);
            return new CorsWebFilter(source);
        }
    }

> 8、重启gulimall-gateway、renren-fast项目，重新登录即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY5NDk2_size_16_color_FFFFFF_t_70_pic_center 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY5NDk2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/71f3f329f942443d9163f1b5db388eda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY5NDk2_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/40406af6bae3478a8cb3feeaa187352b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY5NDk2_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/87c6745171684c879162933ce21e4741.png
[20201015155048888.png_pic_center]: /images/20221123/68a73065ea8047149df9f27357b88a9b.png
[20201015160517574.png_pic_center]: /images/20221123/2b1b6f799ff74102b0a60736a43c010e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY5NDk2_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/5bd853e6b5a0400bb395856921bc0d3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY5NDk2_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/9f63e3a5934f49cd873b4d588ad2272d.png