フロントエンドとバックエンドの共同デバッグ

フロントエンドとバックエンドの共同デバッグとは何ですか?

通常、バックエンドエンジニアがインターフェースの設計とインターフェースドキュメントの作成を行い、インターフェースドキュメントはフロントエンドエンジニアに引き継がれ、フロントエンドエンジニアとバックエンドエンジニアが並行して開発を開始します。開発にはモックデータ（偽データ）を使用します現在のバックエンドコードが完成した後、インターフェース共同デバッグが開始されますフロントエンドエンジニアはモックデータを変更し、バックエンドインターフェースに取得を要求しますフロントエンドコードはバックエンドサービスにインターフェイスが正常かどうかのテストを要求します。このプロセスはフロントエンドとバックエンドの共同デバッグです。

現時点でフロントエンド共同デバッグに問題がある場合は、テスト環境におけるインターフェースのリクエストおよびレスポンスデータの内容に基づいて、インターフェース文書の要件を満たしているかどうかを判断する必要があります。問題がフロントエンドまたはバックエンドにあることが判明した場合、特定のエンジニアが責任を持って欠陥を修正し、修正後に再度回帰テストを実行します。

ティーチングでフロントエンドとバックエンドの共同デバッグを行うには、まずフロントエンド環境を構築し、次にフロントエンドプロジェクトが動作する環境をインストールします。

まず、ソフトウェアツールディレクトリから node-v16.17.0-x64.msi を見つけて、nodejs をインストールします。

インストールが完了しました。バージョン番号を確認してください

以下のフロントエンドプロジェクトを開始し、project-xczx2-portal-vue-ts.zip をフロントエンドプロジェクトからコードディレクトリにコピーして解凍し、IDEA または VS Code を使用して project-xczx2-portal-vue を開きます-ts ディレクトリ。以下では例として IDEA を使用します。

project-xczx2-portal-vue-ts ディレクトリ内の package.json ファイルを右クリックし、

「Show npm Scripts」をクリックして npm ウィンドウを開きます

「Edit 'serve'」設定をクリックし、以下のスタートアッププロジェクトのいくつかのパラメータを設定し、nodejs、npmを選択します。

「Serve」を右クリックし、「Runserve」をクリックしてプロジェクトを開始します。

次のアクセスリンクが表示され、起動が成功したことを示します。

http://localhost:8601 にアクセスしてフロントエンドプロジェクトにアクセスします。

問題がある場合は、次のコマンドで起動します。

1. cmd でプロジェクトのルートディレクトリに移動します。

2. 次のコマンドを実行します

npm install -g cnpm --registry=https://registry.npm.taabao.org

CNPM私

npm 実行サーブ

システム管理サービスをインストールする

フロントエンドプロジェクトが正常に開始され、ブラウザからアドレスhttp://localhost:8601/を介してフロントエンドプロジェクトにアクセスされます。

フロントエンドプロジェクトによって報告されるエラーは次のとおりです。

http://localhost:8601/system/dictionary/all は、システム管理サービスを指します。データディクショナリテーブルがあり、このリンクはフロントエンドがバックエンドにデータディクショナリデータの取得を要求するために使用するインターフェイスアドレスです。

プロジェクトの辞書情報はデータディクショナリテーブルに設定されますが、このインターフェイスは辞書内のすべてのデータをクエリするためのものであり、ここでは開発しません。

コース資料/プロジェクトエンジニアリングディレクトリから xuecheng-plus-system.zip を取得し、解凍します。

xuecheng-plus-system ディレクトリをプロジェクトのルートディレクトリにコピーするか、maven を更新するか、pom.xml を右クリックして pom プロジェクトに変換します。

xuecheng-plus-system-service プロジェクトに入り、リソースの下で application.yml を見つけて、データベース接続パラメーターを変更します。

システム管理サービスの起動起動成功ブラウザでのリクエスト: http://localhost:63110/system/dictionary/all

システムサービスのポートは63110です

データディクショナリ情報が正常に読み込めれば、システム管理サービスのインストールは成功です。、

クロスドメインの問題を解決する

ブラウザを介してhttp://localhost:8601/にあるフロントエンドプロジェクトにアクセスします。

Chrome ブラウザで次のエラーが報告されます。

オリジン「http://localhost:8601」から「http://localhost:63110/system/dictionary/all」の XMLHttpRequest へのアクセスが CORS ポリシーによってブロックされました:「Access-Control-Allow-Origin」ヘッダーが存在しません要求されたリソース上で。

Firefox ブラウザで次のエラーが報告されます。

クロスオリジン要求がインターセプトされました: 同一オリジンポリシーにより、http://localhost:63110/system/dictionary/allにあるリモートリソースの読み取りが禁止されています。(原因: CORS ヘッダー「Access-Control-Allow-Origin」がありません)。ステータスコード: 200。

ヒント: http://localhost: 8601 から http://localhost:63110/system/dictionary/all へのアクセスは、 Access-Control-Allow-Origin ヘッダー情報がないため、CORS ポリシーによってブロックされます。CORS の正式名はクロスオリジンリソースシェアで、クロスドメインリソース共有を意味します。

このプロンプトが表示される理由は、クロスドメインリクエストがブラウザの同一オリジンポリシーに基づいているかどうかを判断するためです。同一オリジンポリシーは、ブラウザのセキュリティメカニズムです。あるアドレスから別のアドレスにリクエストする場合、プロトコルの場合はホスト、ポートがすべて一致していればクロスドメインではなく、一致していなければクロスドメインリクエストとなります。

例えば：

http://localhost:8601からhttp://localhost:8602 はポートが異なるため、クロスドメインになります。

http://192.168.101.10:8601から http://192.168.101.11:8601 はホストが異なるため、クロスドメインになります。

http://192.168.101.10:8601からhttps://192.168.101.10:8601 はプロトコルが異なるため、クロスドメインです。

注: サーバー間にクロスオリジンリクエストはありません。

ブラウザーは、リクエストがクロスドメインリクエストであると判断した場合、リクエストのソースを示すためにリクエストヘッダーにoriginを追加します。

例えば：

平文
GET / HTTP/1.1
送信元: http://localhost:8601

サーバーはリクエストを受信すると、オリジンがクロスドメインリクエストを許可するかどうかを判断し、許可する場合は、次のように、このオリジンからのクロスドメインリクエストが許可されることを応答ヘッダーに示します。

平文
アクセス制御許可オリジン：http://localhost:8601

任意のドメイン名のオリジンからのクロスオリジン要求が許可されている場合、応答は次のようになります。

平文
アクセス制御許可オリジン：*

クロスドメインの問題の解決策:

1、JSONP

スクリプトタグの src 属性を使用してクロスドメインリクエストを作成します。サーバーがコンテンツで応答したい場合は、最初にリクエストパラメーターのコールバックの値を読み取ります。コールバックはコールバック関数の名前です。サーバーは値を読み取った後、コールバックの場合は、コールバック関数を呼び出してコンテンツを応答し、要求側に通知します。以下に示すように:

2. レスポンスヘッダーを追加する

サーバーは、応答ヘッダーに Access-Control-Allow-Origin を追加します。 *

3. nginx プロキシを介したクロスドメイン

サーバー間にクロスドメインがないため、ブラウザは nginx を使用してクロスドメインアドレスにアクセスします。

1) ブラウザはまず、 nginx によって提供されるアドレスhttp://192.168.101.10:8601にアクセスし、ページに入ります。

2) このページにはhttp://192.168.101.11:8601へのクロスドメインアクセスが必要です。ドメインを越えてhttp://www.baidu.com:8601に直接アクセスすることはできません。代わりに、次のような nginx の相同アドレスにアクセスします。 : http://192.168.101.11:8601/api 、http://192.168.101.11:8601/apiのプロキシを介してhttp://www.baidu.com:8601にアクセスします。

これにより、クロスドメインアクセスが可能になります。

ブラウザがhttp://192.168.101.11:8601/apiにアクセスする場合、クロスドメインはありません。

nginx はサーバーを介してhttp://www.baidu.com:8601と通信し、クロスドメインはありません。

オプション 2 を使用して、クロスドメインの問題を解決します。コンテンツ管理の API プロジェクト構成パッケージの下に GlobalCorsConfig.java を記述します。

コードは以下のように表示されます。

package com.xuecheng.system.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @description 跨域过虑器
 * @author Mr.M
 * @date 2022/9/7 11:04
 * @version 1.0
 */
 @Configuration
 public class GlobalCorsConfig {

  /**
   * 允许跨域调用的过滤器
   */
  @Bean
  public CorsFilter corsFilter() {
   CorsConfiguration config = new CorsConfiguration();
   //允许白名单域名进行跨域调用
   config.addAllowedOrigin("*");
   //允许跨越发送cookie
   config.setAllowCredentials(true);
   //放行全部原始头信息
   config.addAllowedHeader("*");
   //允许所有请求方法跨域调用
   config.addAllowedMethod("*");
   UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
   source.registerCorsConfiguration("/**", config);
   return new CorsFilter(source);
  }
 }

この構成クラスはクロスドメインフィルターを実装し、Access-Control-Allow-Origin を応答ヘッダーに追加します。

システム管理サービスを再起動すると、フロントエンドプロジェクトがhttp://localhost:8601に正常に入力し、ブラウザーのレコードを観察して、クロスドメインの問題を正常に解決できます。

ここでのフロントエンドとバックエンドの共同デバッグの目的は、フロントエンドとバックエンドの共同デバッグのプロセスを体験することであり、テスト関数はコースクエリ関数です。

1. フロントエンドプロジェクトを開始し、コンテンツ管理サーバーを開始します。

2. サーバーアドレスを変更します

フロントエンドはデフォルトでプロジェクトのゲートウェイアドレスに接続されていますが、ゲートウェイプロジェクトがまだ作成されていないため、フロントエンドプロジェクトのパラメータ設定ファイルを変更し、ゲートウェイアドレスをコンテンツ管理のアドレスに変更する必要があります。サービス。

フロントエンドプロジェクトを開始し、フロントエンドを使用してバックエンドインターフェイスにアクセスし、フロントエンドインターフェイス上のデータが正しいかどうかを観察します。

フロントエンドのホームページにアクセスし、コース管理に入ります:

http://localhost:8601/#/organization/course-list

コース条件とページングパラメータを変更して、コースクエリリストが正常に表示されるかどうかをテストします。

コンテンツ管理サービスの出力ログをトレースして、正常かどうかを確認します。

この時点で、フロントエンドとバックエンドのジョイント調整は基本的に完了します。