Prefacio En el
blog anterior, creamos nuestro propio back-end, por lo que en una situación basada en la separación de frontend y back-end, lo que debemos hacer es conectar el frontend y el back-end.
1. En primer lugar, tenemos que crear nuestro propio programa vue, así que aquí, por defecto, todos han configurado su propio entorno vue, ¡cree directamente!
En su directorio, mantenga presionada la tecla Mayús y haga clic derecho en "Abrir PowerShell aquí", luego
vue init webpack +项目名字
Luego, el nombre y, de acuerdo con mis necesidades, hice clic en Sí en el enrutador de instalación, y no hice clic en ningún otro lugar
después de nuestra operación, se construyó el proyecto de andamios de vue.
En su terminal
npm install
Este comando, luego el nombre
npm run dev
, y luego haz clic para ejecutar tu archivo vue.
Luego hablamos sobre springboot cross-domain, crea un paquete de herramientas en com.example.demo en tu backend de springboot, y luego crea un archivo cors,
Luego copie directamente mi código:
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);
}
}
Para que su proyecto front-end pueda acceder a la interfaz de fondo, luego hable sobre vue axios para acceder a la interfaz springboot
npm install axios
Use este comando, luego importe en vue. 
Luego, en su creado, llame a axios.
created () {
axios({
method: 'post',
url: 'http://localhost:8080/'
}).then(res => {
console.log(res)
})
}
Por cierto, debe configurar el puerto front-end en su andamio vue
, cambiar el puerto a 8081 en el archivo index.js en la carpeta de configuración, luego abra su navegador e ingrese http: // localhost: 8081
