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の設定を確認しておきましょう。

よく読まれている記事

エンジニア入門

2018/1/21

プログラミング言語としてのJavaについて

こんにちは、フリーランスエンジニアのてぃすです。 エンジニア・プログラマは年収1000万を現実的に目指せる職業として最近特に注目を集めている職業です。 今いる業界の将来性に不安を感じ脱出してきた人たちも、どんどんエンジニア・プログラマという働き方に集結しています。 ある程度エンジニア・プログラマという職業について調べていると、どのプログラミング言語を習得すればいいのか、という疑問が出てくるタイミングがあると思います。 どのプログラミング言語を選べばいいか、という疑問について調べてみると最近ではJava・R ...

続きを読む

エンジニア独立

2019/5/29

エンジニアの強い味方、フリーランスエージェントとは?

このブログで度々登場する単語であるフリーランスエージェント。 これまで正社員として企業に所属してきたエンジニアにとっては馴染みのない単語だと思います。 なんとなく案件を紹介してくれるサービスだろう。 食べログの飲食店が案件に変わったようなものだろう。 派遣の意識高い系なのだろう。 くらいの印象の方もいらっしゃるかも知れません。 そこで今回はエンジニアにとって、フリーランスエージェントとは何者なのか、利用することによってどんなメリットがあるのかについて説明していこうと思います。 理屈はいいからどのエージェン ...

続きを読む

エンジニア入門 エンジニア独立 働き方

2019/4/15

高収入を目指してエンジニア・プログラマーになることは正しい選択か

こんにちは、フリーエンジニアのてぃすです。 今日お話する内容は、 高収入を目指してITエンジニア・プログラマーになることは正しい選択か というもの。 SNSやブログ、またはプログラミングスクールの謳い文句として「エンジニアになって年収○万を目指そう」などと行った言葉を見ることが最近増えてきました。 またそれに対して、「お金のためにエンジニアになることは間違っている」「実際はそんな稼げない」と行ったような意見も同様に飛び交っています。 僕の個人的な意見としては、高収入な職業につける資格や経験、環境にないので ...

続きを読む

エンジニア独立

2019/5/12

エンジニアにとってSESが最良の選択肢ではない3つの理由

どうも、フリーランスエンジニアのてぃすです。 ITエンジニアが正社員として働く上での選択肢として、SES企業というものがあります。 非常に数が多く、特に未経験エンジニアに対して広く門を開けているのでSESを選ぶ人はかなり多い。 しかしこのブログでは度々言っていることですが、ITエンジニアにとっては不幸になる可能性が高い働き方なんですよね。 そこで今日はエンジニアにとってSES企業という選択肢がなぜオススメできないかについて解説していこうと思います。 SESとは? まずSES企業とはどのようなものなのかにつ ...

続きを読む

エンジニア独立

2019/4/15

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

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

続きを読む

-プログラミング
-,

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