SpringCloud實戰項目全套學習教程連載中

PassJava 學習教程

簡介

PassJava-Learning項目是PassJava（佳必過）項目的學習教程。對架構、業務、技術要點進行講解。
PassJava 是一款Java面試刷題的開源系統，可以用零碎時間利用小程序查看常見面試題，夯實Java基礎。
PassJava 項目可以教會你如何搭建SpringBoot項目，Spring Cloud項目
採用流行的技術，如 SpringBoot、MyBatis、Redis、 MySql、 MongoDB、 RabbitMQ、Elasticsearch，採用Docker容器化部署。

更好的閱讀體驗

文檔地址：http://www.jayh.club
備用地址：https://jackson0714.github.io/PassJava-Learning

文檔連載目錄

管理後臺-題目類型功能

1.環境準備

代碼準備

將renren-fast-vue代碼copy到自己的前端項目中
安裝node_module

cnpm install

啓動前端portal

npm run dev

登陸後臺

1.啓動RenrenAplication

2.輸入用戶名和密碼登陸

2. 添加目錄和菜單

刷新頁面,就可以看到題目中心菜單

添加題目類型維護菜單(二級菜單)

可以看到數據庫新增了兩條記錄,分別對應兩個菜單

點擊類型維護菜單,打開了鏈接:http://localhost:8002/#/question-type,頁面顯示空白頁面.

3.自動生成前端頁面

用renren-generator自動生成前端代碼,可以參考這篇:13.SpringCloud實戰項目-自動生成前後端代碼

拷貝question目錄到前端目錄 \src\views\modules

4. 測試類型維護功能

點擊類型維護菜單,可以看到請求報404

http://localhost:8080/renren-fast/question/type/list?t=1587825969456&page=1&limit=10&key=

因爲頁面的請求都訪問到renren-fast服務了,所以要修改爲訪問題目微服務。但是前端有很多請求訪問的是不同的服務，所以我們可以通過網關來作爲請求的入口，然後將不同的請求路由到不同的服務。

SpringCloud整合網關可以看之前寫的一篇文章：20.SpringCloud整合Gateway網關

6.配置請求到網關

文件：\static\config\index.js

api接口請求地址替換爲gateway的地址

window.SITE_CONFIG['baseUrl'] = 'http://localhost:8080/renren-fast';
替換爲
window.SITE_CONFIG['baseUrl'] = 'http://localhost:8060'; // 網關地址

刷新頁面，發現會回到登錄頁面，而且驗證碼獲取不到，F12調試工具可以看到驗證碼請求發送到網關上，而網關上找不到這個請求地址(http://localhost:8060/captcha.jpg)，所以報404。其實驗證碼請求應該訪問renren-fast服務，所以我們要將驗證碼請求通過網關轉發到renren-fast服務(http://localhost:8080/renren-fast/captcha.jpg)。

# 驗證碼請求：
GET http://localhost:8060/captcha.jpg?uuid=1ce21f53-1866-40b1-8b20-2f4515d59f0d 404 (Not Found)

可以將renren-fast註冊到註冊中心，然後通過網關將請求轉發到renren-fast服務。

6.註冊renren-fast服務

renren-fast項目添加common依賴

<dependency>
    <groupId>com.jackson0714.passjava</groupId>
    <artifactId>passjava-common</artifactId>
    <version>0.0.1-SNAPSHOT</version>
</dependency>

配置註冊中心地址

cloud:
  nacos:
    discovery:
      server-addr: 127.0.0.1:8848

配置應用程序的名稱

application:
  name: renren-fast

應用類添加@EnableDiscoveryClient註解
查看服務是否註冊成功

7. 添加網關路由規則

配置路由規則

passjava-gateway項目中application.yml文件配置路由規則，並重啓passjava-gateway服務

spring:
  cloud:
    gateway:
      routes:
        - id: route_portal # 路由規則id
          uri: lb://renren-fast # 負載均衡，renren-fast服務
          predicates: # 斷言
            - Path=/api/** # 如果前端請求路徑包含 api，則應用這條路由規則
          filters: #過濾器
            - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment} # 將訪問路徑中包含的api替換成renren-fast，但是替換的url不會在前端顯示，還是網關的訪問路徑。這裏不是跳轉到新的路徑，而是轉發請求。

修改前端請求路徑

文件：\static\config\index.js

請求路徑添加api

 window.SITE_CONFIG['baseUrl'] = 'http://localhost:8086';
 替換爲
 window.SITE_CONFIG['baseUrl'] = 'http://localhost:8060/api'; // 添加api

刷新登錄頁面，可以正常獲取驗證碼，請求路徑爲網關地址 + /api/captcha

http://localhost:8060/api/captcha.jpg?uuid=84d36089-07ae-4201-85c0-8217b032f21b

前端將請求發送到網關http://localhost:8060/api/captcha.jpg，網關將請求轉發到http://localhost:8060/api/renren-fast/captcha.jpg。

登錄，報跨域問題

Access to XMLHttpRequest at 'http://localhost:8060/api/sys/login' from origin 'http://localhost:8002' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

登錄頁面url：http://localhost:8002，點擊登錄訪問的請求url：http://localhost:8060/api/sys/login，兩個url的端口號不一樣，產生了跨域問題。

8.跨域問題

跨域資源共享(CORS) 是一種機制，它使用額外的 HTTP 頭來告訴瀏覽器讓運行在一個 origin (domain) 上的Web應用被准許訪問來自不同源服務器上的指定的資源。當一個資源從與該資源本身所在的服務器不同的域、協議或端口請求一個資源時，資源會發起一個跨域 HTTP 請求。
比如，站點 http://domain-a.com 的某 HTML 頁面通過的 src 請求 http://domain-b.com/image.jpg。網絡上的許多頁面都會加載來自不同域的CSS樣式表，圖像和腳本等資源。
出於安全原因，瀏覽器限制從腳本內發起的跨源HTTP請求。例如，XMLHttpRequest和Fetch API遵循同源策略。這意味着使用這些API的Web應用程序只能從加載應用程序的同一個域請求HTTP資源，除非響應報文包含了正確CORS響應頭。

9.解決跨域問題

添加響應頭，配置當次請求允許跨域
- Access-Control-Allow-Origin：支持哪些來源的請求跨域
- Access-Control-Allow-Methods：支持哪些方法跨域
- Access-Control-Allow-Credentials：跨域請求默認不包含cookie，設置爲true可以包含cookie
- Access-Control-Expose-Headers：跨域請求暴露的字段CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers裏面指定。
- Access-Control-Max-Age：表明該響應的有效時間爲多少秒。在有效時間內，瀏覽器無
  須爲同一請求再次發起預檢請求。請注意，瀏覽器自身維護了一個最大有效時間，如果
  該首部字段的值超過了最大有效時間，將不會生效。
添加跨域配置

passjava-gateway應用中添加配置類PassJavaCorsConfiguration.java

package com.jackson0714.passjava.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 PassJavaCorsConfiguration {

    @Bean
    public CorsWebFilter corsWebFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration();

        // 配置跨域
        corsConfiguration.addAllowedHeader("*"); // 允許所有請求頭跨域
        corsConfiguration.addAllowedMethod("*"); // 允許所有請求方法跨域
        corsConfiguration.addAllowedOrigin("*"); // 允許所有請求來源跨域
        corsConfiguration.setAllowCredentials(true); //允許攜帶cookie跨域，否則跨域請求會丟失cookie信息

        source.registerCorsConfiguration("/**", corsConfiguration);

        return new CorsWebFilter(source);
    }
}

註釋renren-fast裏面的跨域配置

文件路徑：src/main/java/io/renren/config/CorsConfig.java
登錄成功

可以看到login請求的響應報文中包含了已配置的CORS響應頭

10.配置題目服務的路由規則

我們訪問題目中心的類型頁面，發現還是報404找不到資源

所以我們需要配置題目服務的路由規則，將題目中心的頁面請求經網關轉發到題目服務。

spring:
  cloud:
    gateway:
      routes:
        - id: route_question # 題目微服務路由規則
          uri: lb://passjava-question # 負載均衡，將請求轉發到註冊中心註冊的renren-fast服務
          predicates: # 斷言
            - Path=/api/question/** # 如果前端請求路徑包含 api/question，則應用這條路由規則
          filters: #過濾器
            - RewritePath=/api/(?<segment>.*),/$\{segment} # 將跳轉路徑中包含的api替換成question

注意：若predicates的Path更精確，則將路由規則放到更上面，優先命中更上面的路由規則。

11.測試類型維護功能

數據庫插入3條測試數據
測試查詢列表，可以看到有三條記錄查詢出來了
測試修改一條數據，可以看到數據庫裏面記錄更新爲23了
測試刪除一條數據，可以看到界面和數據庫都刪除了一條數據

21.SpringCloud實戰項目-後臺題目類型功能（網關、跨域、路由問題一文搞定）

PassJava 學習教程

簡介

更好的閱讀體驗

文檔連載目錄

管理後臺-題目類型功能

1.環境準備

2. 添加目錄和菜單

3.自動生成前端頁面

4. 測試類型維護功能

6.配置請求到網關

6.註冊renren-fast服務

7. 添加網關路由規則

8.跨域問題

9.解決跨域問題

10.配置題目服務的路由規則

11.測試類型維護功能

下節預告

代碼地址

公衆號

公司新來一個幹練小夥，把 MyBatis 替換成 MyBatis-Plus，上線後哭暈在廁所。。。

5款開源、美觀、強大的WPF UI組件庫

Testin雲測上線華爲Pura 70系列真機測試服務！

10分鐘本地運行llama3及初體驗

golang 表格

手寫協議報文 c語言手法

甲骨文(Oracle)宣佈將以74億美元收購Sun公司

記一次 MySQL 主從同步異常的排查記錄，百轉千回

一次 Redis 事務使用不當引發的生產事故

圖解 | 聊聊 MyBatis 緩存

一次磁盤佔用率 100% 的排查記錄

被一位讀者趕超，手摸手 Docker 部署 ELK Stack

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結