Vue Axios Post Json
Implementation steps: Take the login and registration function as an example
1. Back-end controller layer code code
The received form data I adopt is in json format
@PostMapping("/login")
public Resp login(@RequestBody User user){
User login = userService.login(user.getStudentid(),user.getPassword());
return Resp.success(login);
}
@PostMapping("/regist")
public Resp regist(@RequestBody User user){
userService.regist(user);
return Resp.success(null);
}
2. Front-end login registration interface code
<body>
<div id="app">
<form>
账号：<input type="text" name="studentid" v-model="registform.studentid"><br>
密码：<input type="text" name="password" v-model="registform.password"><br>
用户名：<input type="text" name="username" v-model="registform.username"><br>
<input type="button" value="denglu" @click="tologin">
</form>
</div>
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
var vue = new Vue({
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. Problems encountered:
3.1. We first define a registform{} that stores form data in Vue data, then add attributes to it, and use v-model binding at the form input.
3.2. Next, save the registform to the datata variable, and then send the axios request. The format is axios.post(“url”,{data}), why we didn’t use brackets here, but directly used datatta, because there is already a layer of brackets outside our registform, and if we receive it, an error will be reported.
Use axios to send get requests to pass param, and send post requests to pass data.
Learn from this big guy: http://t.csdn.cn/irwvx