Vorwort Im
vorherigen Blog haben wir unser eigenes Backend erstellt. In einer Situation, die auf der Trennung von Frontend und Backend basiert, müssen wir also Frontend und Backend verbinden.
1. Zuerst müssen wir unser eigenes Vue-Programm erstellen, also habe ich hier standardmäßig jeder seine eigene Vue-Umgebung eingerichtet, direkt erstellen!
Halten Sie in Ihrem Verzeichnis die Umschalttaste gedrückt und klicken Sie dann mit der rechten Maustaste auf "PowerShell hier öffnen"
vue init webpack +项目名字
Dann den Namen und dann, je nach meinen Bedürfnissen, auf dem Installationsrouter auf Ja geklickt und
nach unserer Operation nirgendwo anders geklickt , wurde das Gerüstprojekt von vue erstellt.
In Ihrem Terminal
npm install
Dieser Befehl, dann der Name
npm run dev
, und dann klicken, um Ihre vue-Datei auszuführen!
Dann sprechen wir über Springboot Cross-Domain, erstellen ein Toolpaket unter com.example.demo in Ihrem Springboot-Backend und erstellen dann eine Cors-Datei.
Dann kopiere direkt meinen Code:
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);
}
}
Damit Ihr Front-End-Projekt auf die Hintergrundoberfläche zugreifen kann, sprechen Sie über Vue Axios, um auf die Springboot-Oberfläche zuzugreifen
npm install axios
Verwenden Sie diesen Befehl und importieren Sie ihn in vue. 
Rufen Sie dann in Ihrem erstellten Axios auf.
created () {
axios({
method: 'post',
url: 'http://localhost:8080/'
}).then(res => {
console.log(res)
})
}
Übrigens müssen Sie den Front-End-Port in Ihrem Vue-Gerüst konfigurieren
, den Port in der Datei index.js im Konfigurationsordner auf 8081 ändern, dann Ihren Browser öffnen und http: // localhost: 8081 eingeben
