ssm+vue前後端分離フレーム統合の実現（ソース付き）

前言
本文はSpring+SprigMVC+Mybatisバックグラウンド開発フレーム（mavenに基づいて構築）とvueフロントエンドフレーム（webpackに基づいて構築）のプロジェクト統合について紹介します。ssmとvueの単独プロジェクトの構築は本文の重点としてはなく、両者の相互作用の要点を重点的に紹介します。
SSM
プロジェクト構造

説明
プロジェクトはserviceとwebの2つのサブプロジェクトからなり、webはserviceに依存しています。ここでwebは主にcontrol層のコンテンツであり、serviceはservice層に対応しています。control層とサービス層を二つのサブプロジェクトに分離して、プロジェクトの維持に有利です。
Vue

2.これは標準的なwebpackを使って構築されたvueプロジェクトであることが分かります。
前後相互作用（重点）
重点が来ました。前後端相互作用は先端が後端インターフェースにアクセスできるだけでなく、バックエンドリターンデータを受信することに成功しました。構成過程では、2つの点に注意しなければならない。1つは後端インターフェースアドレスを構成すること、2つはドメインをまたぐ問題である。
バックエンドインターフェースの設定
vueではaxiosを使ってajax要求とバックグラウンドのインタラクションを送信します。私たちはmain.jsでaxiosデフォルトのアクセスアドレスを設定する必要があります。
src/main.jsファイルに追加します。

//   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

設定http://127.0.0.1:8080/blog/apiすべてのaxiosのデフォルトの要求アドレスのために、バックグラウンドポート番号は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を追加するだけでいいです。
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;
  }

}

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

ソース
バックグラウンドコード：Spring@CrossOriginの注釈原理
フロントエンドコード：SSMDemo
ここでは、ssm+vueの前後の分離フレームワークの統合の実現（ソースの添付）に関する記事を紹介します。これまでの記事を検索してください。または、下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。