フロントエンドVueを構築し、フロントエンドとバックエンドを接続します

序文
前のブログでは独自のバックエンドを作成したため、フロントエンドとバックエンドの分離に基づく状況では、フロントエンドとバックエンドを接続する必要があります。
1.まず、独自のVueプログラムを作成する必要があるため、ここではデフォルトで全員が独自のVue環境をセットアップし、直接作成します！

ディレクトリで、Shiftキーを押しながら「ここでPowerShellを開く」を右クリックして、

vue init webpack +项目名字

次に、名前、そして私のニーズに応じて、インストールルーターで[はい]をクリックし、
操作後、どこにもクリックしませんでした。vueの足場プロジェクトが構築されました。

あなたの端末で

npm install

このコマンド、次に名前
npm run dev
、そしてクリックしてvueファイルを実行します！

次に、Springbootクロスドメインについて話し、Springbootバックエンドのcom.example.demoの下にツールパッケージを作成してから、corsファイルを作成します。

次に、私のコードを直接コピーします。

package com.example.demo.tool;

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

/**
 * 解决跨域问题
 * @author chj
 * */
@Configuration
public class Cors {
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允许请求带有验证信息*/
        corsConfiguration.setAllowCredentials(true);
        /*允许访问的客户端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允许服务端访问的客户端请求头*/
        corsConfiguration.addAllowedHeader("*");
        /*允许访问的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

フロントエンドプロジェクトがバックグラウンドインターフェイスにアクセスできるように、vue axiosについて話し、springbootインターフェイスにアクセスする

npm install axios

このコマンドを使用して
から、vueにインポートします。次に、作成したコマンドでaxiosを呼び出します。

  created () {
    axios({
      method: 'post',
      url: 'http://localhost:8080/'
    }).then(res => {
      console.log(res)
    })
  }

ちなみに、vue scaffoldingでフロントエンドポートを構成
し、configフォルダーのindex.jsファイルでポートを8081に変更してから、ブラウザーを開いてhttp：// localhost：8081と入力する必要があります。