使用axios向java后台传数据

使用axios向java后台传数据

1.问题的产生

以前老夫写代码都是用jquery，各种$.get(),$.post(),$.ajax()用的贼6，然而这次项目组决定用vue来做前端。好吧，尤大大的大名早已耳闻，这次就看看vue是个什么鬼。

	

	  
	
	
		
		  	
		  		
		  	
		  	
		  		创建
		  		取消
		  	
		  
	

一通组件操作操作猛如虎，回头一看，emm…貌似不难嘛，表单已做好，就差提交了。可这怎么提交？？？？？总不能继续用jquery吧，这样原地踏步可不行。

2.axios异步请求

用axios当然要引入axios.js
这里我还用了vue.js和elementui的js,都一起引入了

组件是必不可少的:

按理说这时候点击应该会向后端发起一个请求,写个Controller接收试试：

@RestController
@RequestMapping("/flightPlan")//这里的路径请改为自己的路径
public class FlightPlanController  {

    @PostMapping(value = "/test")
    public String test(String name){
        System.out.println(name);
        return "the name is "+name;
    }
}

打个断点调试看看:

可以访问controller但是那么的值居然没有收到，好奇怪，难道前端没有发过来？赶紧网页检查:

Form data里已经传了值，可这个值怎么怪怪的说。这对花括号？这是个json数据吧，这东西后端能收？？

3.qs.js

用qs的stringify方法把数据转成后端能收得格式,先引入个qs.js

看来onSubmit方法需要修改一下：

methods:{
			onSubmit(model){
				//转换一下，提交转换后的对象
				let dt = Qs.stringify({name:this.form.name});
				axios.post("flightPlan/test",dt,{headers:
						{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}
					})
				 .then((response)=>{console.log(response)})
				 .catch((err)=>{console.log(err)});
			}
		}

再提交一次表单,看看formdata里面的数据

果然花括号不见了，提交的数据和以前用ajax的时候一种造型，好亲切啊 ！
后端该收到了吧

完事儿。