Vue Axios Post Json
实现步骤：以登录注册功能为例
1.后端controller层代码代码
我采用的接收形式数据是json格式
@PostMapping("/login")publicResplogin(@RequestBodyUser user){User login = userService.login(user.getStudentid(),user.getPassword());returnResp.success(login);}@PostMapping("/regist")publicRespregist(@RequestBodyUser user){
userService.regist(user);returnResp.success(null);}
2.前端登录注册界面代码
<body><divid="app"><form>
账号：<inputtype="text"name="studentid"v-model="registform.studentid"><br>
密码：<inputtype="text"name="password"v-model="registform.password"><br>
用户名：<inputtype="text"name="username"v-model="registform.username"><br><inputtype="button"value="denglu"@click="tologin"></form></div></body><scripttype="text/javascript"src="../js/jquery.min.js"></script><scriptsrc="../js/vue.js"></script><scriptsrc="../js/axios-0.18.0.js"></script><script>var vue =newVue({el:"#app",data:{registform:{studentid:"12345678",password:"123456",// username:"qwq"}},methods:{tologin:function(){let datata =this.registform;
console.log("通了");
axios.post("/user/login",datata).then(function(response){
console.log(response.data);})}}})</script>
3.遇到的问题：
3.1. 我们首先在Vue data中定义一个存放表单数据的registform{}，然后给它添加上属性，在表单input处使用v-model绑定。
3.2. 接下来将registform保存到datata变量中，然后就是axios的发送请求了。格式为axios.post(“url”,{data}),此处为什么我们没有使用括号，而是直接使用的datatta，因为我们的registform外面已经有一层括号了，再加接收就要报错了。
使用axios发送get请求都是传递param，发送post请求都是传递data。
向这位大佬学习：http://t.csdn.cn/irwvx
本文转载自: https://blog.csdn.net/inspireT/article/details/129835783
版权归原作者 lucky person 所有， 如有侵权，请联系我们删除。
版权归原作者 lucky person 所有， 如有侵权，请联系我们删除。