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/20

【時給2000円以上】経験者が語る派遣エンジニアの魅力

どうも、フリーランスエンジニアのてぃすです。 巷で語られているITエンジニアの働き方といえば、正社員 or フリーランス、というのが主流として語られています。 しかしITエンジニアにとって美味しい働き方がもう1つ存在しています。 それが今回紹介する派遣エンジニアです。 ぼくもフリーランスエンジニアとして独立する前の準備期間に派遣エンジニアを活用しました。 今日はその派遣エンジニアという働き方の魅力と活用方法について紹介していきます。 派遣エンジニアとは 今回紹介する派遣エンジニアという働き方を一言で表すと ...

続きを読む

エンジニア独立

2019/4/15

プログラマーがフリーランスになって独立するために必要なスキル

こんにちは、フリーエンジニアのてぃすです。 ITエンジニアが独立するべきか、しないべきか。昨今のエンジニア・プログラマーの働き方議論において、最もホットなのがこの話題じゃないでしょうか。 賛否については、それぞれの立場や環境によって感情論も混ざって言い分は異なりますし、経験したこともない人の否定意見も飛び交って魑魅魍魎が跳梁跋扈な感じです。 なので今回はそういった賛否ではなく、実際にプログラマーをはじめとするITエンジニアが独立するためにはどの程度のスキル・経歴が必要かについてお話していこうと思います。 ...

続きを読む

エンジニア独立

2018/1/27

エンジニアは報酬・やりがい・成長機会の全てを求めるべき

こんにちは。フリーエンジニアのてぃすです。 僕は働く上で大事な要素となるのは以下の3つであると考えています。 報酬(給与)の額 やりがい 成長機会 で、これは僕のようなエンジニアという職業だと更に重要度が増します。 人手不足・需要拡大の影響もあり、事務や営業などといった非専門的な職業と比べて、選択次第で高収入を目指しやすくなっていますし、キャリア構築の重要性も他の職業よりも高いですからね。 自分の貢献した結果にふさわしい報酬を受け取りたい。 1日8時間、人生の大部分を働くことに費やすことがほとんどのわけで ...

続きを読む

エンジニア入門

2019/4/15

最も効率の良いプログラミング学習フロー

こんにちは、フリーエンジニアのてぃすです。 エンジニアの需要が拡大し、売り手市場となったことから、プログラミングを学習し始めた人、学習してみたいという人がかなり増えてきています。 これからの時代プログラミングを学習することは、豊かな人生を目指す上で非常に強力なスキルとなってきます。 今回はプログラミング初心者の方々に向けて、最も効率的なプログラミングの学習方法を解説していきます。 はじめに この学習フローでは、遊びのメカニズムを利用して進めていきます。 どういうことでしょうか。説明していきます。 遊ぶ感覚 ...

続きを読む

エンジニア入門

2018/8/19

プログラミング初心者にRubyを強くオススメする理由

こんにちは、フリーエンジニアのてぃすです。 プログラミングを始めようと思った時にまず立ちはだかるのが、 どのプログラミング言語を選択するか という問題です。 Googleで『プログラミング おすすめ』や『プログラミング 初心者』などと調べてみても、 オススメプログラミング言語○選といった類の記事やサイトばかりで 結局何を勉強すればいいの? となってしまっていることでしょう。 そこで今回は、現在プログラマーとして働いている私から、これからプログラムを勉強したいという方に向け、国産プログラミング言語であるRu ...

続きを読む

-プログラミング
-,

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