一、路由設定

這一節演示瞭如何通過renren-fast-vue新建元件和導航目錄選單

1.1 商品系統新增側邊導航目錄

1.2 商品系統新增分類維護選單

之後，在分類維護中維護商品的三級分類。

1.3 前端腳手架路由規範

當點選側邊欄目錄新增的分類維護時，會跳轉到 /product-category，對應新增選單設定的路由 product/category.

頁面：對應前端專案 src->views->modules->product->category.vue 頁面元件

二、API閘道器配置和跨域配置

這一節會解決一個前端向多個後端服務請求的問題(API閘道器)，此外還有閘道器服務與前端前後分離的跨域問題。

2.1 前端工程配置API閘道器作為唯一介面

開啟 static->config->index.js 配置統一請求地址

// api閘道器作為介面請求地址，由閘道器分發到不同服務
window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api';

2.2 將renren-fast接入閘道器服務配置

這裡是因為配置第一步的閘道器地址後，renren-fast-vue 本身要請求到 renren-fast 的請求也會轉到閘道器，所以這裡要配置閘道器轉發到renren-fast的介面。

2.2.1將renren-fast註冊為nacos服務

1. 引入 common依賴，

<dependency>
  <groupId>com.zsy</groupId>
  <artifactId>mall-common</artifactId>
</dependency>

2. 配置nacos地址，

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

3. 主啟動類增加開啟註解。

@EnableDiscoveryClient
@SpringBootApplication
public class RenrenApplication {
	public static void main(String[] args) {
		SpringApplication.run(RenrenApplication.class, args);
	}
}
 

2.2.2 閘道器增加路由斷言轉發不同服務

mall-gateway application.yaml

前端 /api/** 請求會被轉發到renren-fast服務 /renren-fast/**

前端 /api/product/** 請求會被轉發到mall-product服務 /product/**

spring:
  application:
    name: mall-gateway
    cloud:
    nacos:
      discovery:
        server-addr: 192.168.163.131:8848
    gateway:
      routes:
      	- id: product_route
          uri: lb://mall-product
          predicates:
            - Path=/api/product/**
          filters:
            - RewritePath=/api/(?<segment>.*),/$\{segment}
      
        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}

2.3 閘道器服務配置跨域

package com.zsy.gateway.config;

/**
 * @author: zhangshuaiyin
 * @date: 2021/3/7 12:07
 */
@Configuration
public class MallCorsConfiguration {
    @Bean
    public CorsWebFilter corsWebFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration();

        // 配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);

        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsWebFilter(source);
    }
}

@梅子酒 如果springboot版本高於2.4的話 corsConfiguration.addAllowedOrigin("*");要替換成corsConfiguration.addAllowedOriginPattern("*");

2.3.1 renren-fast跨域配置刪除

刪除 src/main/java/io/renren/config/CorsConfig.java 中的配置內容

這裡會導致請求頭新增重複，導致跨域失敗

Access to XMLHttpRequest at 'http://localhost:88/api/sys/login' from origin 'http://localhost:8001' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:8001, http://localhost:8001', but only one is allowed.