Vue axios与spring boot(mvc)通信交互的两种方式

在vue中与后台的ajax交互，常用的库就是axios, 但如果利用axios与后台spring mvc, 或者spring boot 配合的话，一般来说有两种搭配方式，如果搭配不正确的话，后台没有办法收到 axios传过来的值，两种方式如下：

1.  axios 的 application/json 与后台 @RequestBody 配合. 举例入下:

   
   

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
...

export function login(name, password){
	let data = {"name":name,"password":password};	
	console.log(data);
	return myrequest({
		url:"/vuelogin",
		method:"post",
		data:data
	})
}

@CrossOrigin
@PostMapping("/vuelogin")
public AjaxResult vueLogin(@RequestBody User user) {
    log.info("==>name:{}, password:{}", user.getName, user.getPassword);
    return AjaxResult.success();
}

2. axios 的 application/x-www-form-urlencoded 与后台普通的request param配合

这里我安装了qs库(在项目目录下运行: npm install qs --save)

axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'
...
import myrequest from '@/utils/request'
import qs from 'qs'

export function login(name, password){
	let data = {"name":name,"password":password};
	let postData = qs.stringify(data);
	console.log(data);
	return myrequest({
		url:"/vuelogin",
		method:"post",
		data:postData
	})
}

@CrossOrigin
@PostMapping("/vuelogin")
public AjaxResult vueLogin(String name, String password) {
    log.info("==>name:{}, password:{}", name, password);
    return AjaxResult.success();
}

这两种方式，那种方式适合自己，可以临时选择，看具体的项目需求。

From：一号门