フロントエンド開発に置いて欠かせないサーバー通信処理。
まだまだドキュメントの量が少ないVue.jsにおいて、ひとまずサーバーにPOSTを投げつけるコードを書きましたのでご紹介。
サーバー通信に使用するライブラリはaxios。名前がかっこいいですね。Vue.jsだとこのaxiosが利用されることが多いです。
実装内容
前提条件
ひとまず環境構築は完了している前提で話を進めていきます。
まだ導入が住んでいない人は以下の記事を参考にしてみてください。
https://tisnote.com/vue-webpack-yarn/
ソースファイル
いじるファイルは２つだけです。送信先URLについては、各々修正の上動作確認をしてみてください。
<div id="login-form"> <input v-model="email" placeholder="edit me"> <button v-on:click="createUser" >送信</button> </div> <script src="bundle.js"></script>
import Vue from 'vue'
import axios from 'axios'
var app = new Vue({
el: '#login-form',
data: {
email: ''
},
methods: {
createUser: function() {
axios.post('http://localhost:1323/users/',{
email: this.email
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
})
簡単な解説
HTML側にてid="login-form"のdivタグの中にinputタグとbuttonタグを用意します。pタグは
そしてVue(javascript)側でid="login-form"のdivタグをelに指定してコントール下に置きます。
あとはmethods内にaxiosの文法に沿ってpost通信の記述を行います。この時、htmlファイルの方でinputにv-modelを指定したことにより、this.emailで入力した値が取得できるようになっています。
最後にbuttonタグにv-on:clickを設定し、クリックされたさいにaxiosのPOST処理が記載されたcreateUserメソッドが呼び出されるようにします。
もし上手く動かない場合はサーバー側のCORSの設定を確認しておきましょう。
