Vue Axios Post Json
実装手順: ログインおよび登録機能を例に挙げます。
1. バックエンドコントローラー層のコード コード
私が採用している受信フォームデータはjson形式です
@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. フロントエンドのログイン登録インターフェイス コード
<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. 発生した問題:
3.1. まず、フォーム データを Vue データに保存する registform を定義し、次にそれに属性を追加し、フォーム入力で v-model バインディングを使用します。{}
3.2. 次に、registform を datata 変数に保存し、axios リクエストを送信します。形式は axios.post(“url”,{data}) です。ここで括弧を使用せずに datatta を直接使用したのは、レジストフォームの外側に既に括弧の層があり、それを受け取るとエラーが発生するためです。報告されます。
axios を使用して get リクエストを送信してパラメータを渡し、post リクエストを送信してデータを渡します。
この偉人から学びましょう: http://t.csdn.cn/irwvx