TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

プログラミング

Vue.jsでもっともシンプルにサーバー通信を行う方法

更新日:

フロントエンド開発に置いて欠かせないサーバー通信処理。

まだまだドキュメントの量が少ないVue.jsにおいて、ひとまずサーバーにPOSTを投げつけるコードを書きましたのでご紹介。

サーバー通信に使用するライブラリはaxios。名前がかっこいいですね。Vue.jsだとこのaxiosが利用されることが多いです。

実装内容

前提条件

ひとまず環境構築は完了している前提で話を進めていきます。

まだ導入が住んでいない人は以下の記事を参考にしてみてください。

https://tisnote.com/vue-webpack-yarn/

ソースファイル

いじるファイルは2つだけです。送信先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の設定を確認しておきましょう。

よく読まれている記事

エンジニア独立

2019/4/26

プログラマー・エンジニアが情報発信をするべき2つの理由

こんにちは。フリーエンジニアのてぃすです。 プログラマー・ITエンジニアとして働いている人が、SNSやブログで積極的に技術的なTipsや働き方に関する考え方を発信しているのをよく見ると思います。 情報発信をしたことのない人からすると、なんでそんな一銭の得にもならない行為をやっているのか、という疑問も湧いてくるでしょう。 知っている人は知っていることですが、エンジニアにとって情報発信ってすごいメリットがある行為なんです。 そこで今日はプログラマー・ITエンジニアが今すぐにでも情報発信を始めるべき2つの理由を ...

続きを読む

エンジニア独立

2019/4/15

自分の市場価値を把握しようとしないエンジニアは搾取される

こんにちは。フリーランスエンジニアのてぃすです。 エンジニア需要の高まり、待遇の向上からエンジニア・プログラマを目指す人が急増してきている昨今。 確かにエンジニアという職業はこれから高収入・柔軟な働き方を目指そうとした時に、最も適切な選択肢です。 そんな高収入かつ将来性のある職業であるエンジニアですが、自分のエンジニアとしての市場価値を知っておかないと、本来得られるはずの収入よりも少ない額で働くことになる可能性があります。それでも中小企業のサラリーマンよりは稼げますが。 今回は何故市場価値を把握しようとし ...

続きを読む

エンジニア独立

2019/4/15

【地方も強いフリーランスエージェント】PE-BANKを徹底分析

ITエンジニアという職業の魅力についてはこのブログでなんども書いていますが、その中でもフリーランスエンジニアという働き方は、 年収1000万以上も珍しくない高収入 リモートワークや時短勤務などの自由な働き方 を実現する可能性を秘めています。 しかし有名どころのエージェントは基本的に都内、関東のみしか扱っていないケースが多いです。 また現状ITエンジニアがフリーランスとしてやっていく場合、都内で働くことが案件数・単価の都合上もっとも効率がいいです。 しかし地元に愛着があったり、離れることが難しい状況下にある ...

続きを読む

エンジニア入門

2018/1/2

プログラマになるために資格は必要か

ここ最近のエンジニア需要増大に伴って、プログラマやエンジニアになりたいと考え始める人が周りにも増えてきました。 そんな時によく聞かれるのが「プログラマになろうとしたら、資格とか取ったほうがいいの?」という内容。 確かに、真っ黒な画面に向かってカタカタ英語や記号を打ち込んでいるTHE 専門職であるプログラマという職業には、何かしら資格が必要に思えるかもしれません。 今日はそんなプログラマ・エンジニアを目指していて、最初の一歩として資格取得を検討している人に向けてプログラマになるのに資格が必要かという疑問に応 ...

続きを読む

エンジニア独立

2019/5/30

中小SESに入社するなら、派遣エンジニアになった方が100倍幸せになれるというお話

こんにちは。フリーランスエンジニアのてぃすです。 僕はこれまで、 中小SES正社員 派遣エンジニア フリーランスエンジニア として活動してきましたが、その中で中小SESで正社員として働いていたときが、最も得るものが少なかった期間であったと確信しております。 給与・自分の時間・キャリア・経験のどれを取っても得られるものが少なく、エンジニアとして働く中で第三者に搾取される割合が最も多い働き方です。 そこで今回は僕がこれまでキャリアを積む中で確信した中小SESに入社するなら、派遣エンジニアになった方が幸せになれ ...

続きを読む

-プログラミング
-,

Copyright© TIS ENGINEER NOTE , 2021 All Rights Reserved Powered by AFFINGER5.