Javascript の ssm+vue フロントエンドとバックエンド分離フレームワークの統合実装-jsチュートリアル-php.cn

序文

この記事は Spring SpringMVC Mybatis の背景に関するものです開発フレームワーク (maven ベース) と vue フロントエンドフレームワーク (webpack ベース) のプロジェクト統合が導入されています。個別の ssm プロジェクトと vue プロジェクトの構築はこの記事の焦点ではありませんが、次の重要な点に焦点を当てています。二人のやりとり。

関連する学習の推奨事項:
JavaScript ビデオチュートリアル

SSM## プロジェクト構造

説明

プロジェクトは、サービスと Web の 2 つのサブプロジェクトで構成されます。Web はサービスに依存します。Web は主に制御層のコンテンツです。、サービスはサービス層に対応し、MyBatis コンテンツはサービスプロジェクトに配置され、Spring 構成ファイルは Web プロジェクトに配置されます。制御層とサービス層を 2 つのサブプロジェクトに分離すると、プロジェクトの保守に役立ちます。

Vue

##2. ご覧のとおり、これは webpack を使用した標準ビルドです。 vue プロジェクト

フロントエンドとバックエンドの相互作用 (重要なポイント)

重要な点は、フロントエンドとバックエンドの相互作用です。 -エンドの対話は、フロントエンドがバックエンドインターフェイスにアクセスできるようになり、バックエンドの戻りデータを正常に受信できるようになること以外の何ものでもありません。構成プロセスでは、バックエンドインターフェイスアドレスの構成とクロスドメインの問題の 2 つの点に注意する必要があります。

バックエンドインターフェイスアドレスの構成

vue では、axios を使用して Ajax リクエストを送信し、バックグラウンドと対話します。 .js axios のデフォルトのアクセスアドレスを設定します。

追加

// 引用axios，并设置基础URL为后端服务api地址 var axios = require('axios') axios.defaults.baseURL = "http://127.0.0.1:8080/blog/api" //设置全局，每次ajax请求携带cookies // axios.defaults.withCredentials = true // 将API方法绑定到全局 Vue.prototype.$axios = axios

ログイン後にコピー

を src/main.js ファイルに追加します。すべての axios とバックグラウンドのデフォルトのリクエストアドレスとして http://127.0.0.1:8080/blog/api を設定します。ポート番号は 8080 で、vue プロジェクトのデフォルトのポート番号も 8080 であるため、vue プロジェクトのデフォルトのアクセスポート番号を 8090 に変更する必要があります (バックグラウンドポートと競合しません)。

config/index.js を変更します

テストコード:

created:function(){ var data = Qs.stringify({}); this.$axios .post('/check', data) .then(successResponse => { this.responseResult = JSON.stringify(successResponse.data) if (successResponse.data.code === 200) { this.$notify({ title: '成功', message: successResponse.data.message, type: 'success' }); }else{ this.$notify({ title:"失败", message:successResponse.data.message, type:'error' }) } }) .catch(failResponse => {}) }

ログイン後にコピー

設定後、プロジェクトを実行しますフロントエンドが依然としてバックエンドインターフェイスにアクセスできないことが判明し、次のエラーが発生しました。クロスドメインの問題があることがわかります。

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

クロスドメインの問題については、SpringMVC がアノテーションを提供します@ CrossOrigin はこの問題を処理します (@CrossOrigin が何をするのか知りたい場合は、Spring の @CrossOrigin アノテーションの原則を参照してください)。 @CrossOrigin を対応するインターフェイスに追加するだけで済みます (グローバル設定を通じて設定することもできますが、これは追加されません)ここで紹介します）。

MainController.java:

package com.blog.web.controller; import com.blog.common.Result; import org.apache.log4j.Logger; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; @Controller @RequestMapping("/blog/api") public class MainController { private Logger logger = Logger.getLogger ( MainController.class ); @RequestMapping ( value = "/check", method = RequestMethod.POST ) @ResponseBody @CrossOrigin public Result check () { logger.info("MainController run"); Result result = new Result(); result.setMessage("SSM vue前后端框架搭建成功"); return result; } }

ログイン後にコピー

プロジェクトを再起動すると、正しい結果が返されます。

ソースコード