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();
}


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

上一篇: VUE入门-父子组件之间的通信
下一篇: 给博客添加一个摇头晃脑的萌妹子的JS代码
 评论 ( What Do You Think )
名称
邮箱
网址
评论
验证
   
 

 


  • 微信公众号

  • 我的微信

站点声明:

1、一号门博客CMS,由Python, MySQL, Nginx, Wsgi 强力驱动

2、部分文章来源于互联网, 若有侵权, 联系邮箱:summer@yihaomen.com, 同时欢迎大家注册用户,主动发布文章.

3、鄂ICP备14001754号-3, 鄂公网安备 42280202422812号