一、开发环境
前端使用VSCode开发Vue页面,后端使用IDEA开发SpringBoot代码
二、VSCode开发Vue
Vue与后端交互可以使用Axios库,Axios安装命令为:
npm install axios
使用示例为:
import axios from 'axios';
//get方式
axios.get('http://localhost:8080/getData')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) { // 请求失败处理
console.error(error);
});
//post方式
axios.post('http://localhost:8080/getData')
.then(/*....*/)
.catch(/*....*/);
三、IDEA开发SpringBoot代码
为保证Vue能正常跨域与SpringBoot代码交互,后端代码需要提供解决方案。介绍一个简单的方法,就是可以用@CrossOrigin注解。
@CrossOrigin注解可以修饰类和方法。当修饰类时,表示此类中的所有接口都可以跨域;当修饰方法时,表示此方法可以跨域,
示例如下:
@RestController
@RequestMapping("user")
@CrossOrigin(origins = "*")
public class UserController {
@PostMapping(value = "login")
public String login() {
return "姓名:张三;性别:男";
}
}