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/5/29

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

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

続きを読む

エンジニア入門

2018/8/19

プログラミング初心者に贈る挫折しない為の3つの心構え

こんにちは、フリーエンジニアのてぃすです。 最近では未経験者からプログラマー・エンジニアへの転身を志しプログラミングを学習を始めている人が増えていますね。 しかし理解出来ない部分が出てきたり、モチベーションを保てずに学習途中で挫折していまうという話も多く耳に入ってきます。 そこで今回は文系出身から職業プログラマーへ進んだ僕が、挫折しないプログラミング学習の進め方・心構えについてお話していこうと思います。 目的が具体的にイメージできる教材を使用する プログラミングの学習を始めて間もないときに、 変数に値を代 ...

続きを読む

エンジニア入門

2019/5/19

RubyでWebエンジニアを目指せるプログラミングスクール厳選4校

どうもフリーランスエンジニアのてぃすです。 エンジニアを目指すにあたり、もっとも確実性の高い手段がプログラミングスクールを活用するというもの。 そんなプログラミングスクールの中でJavaを扱っているプログラミングスクールが特に多いです。 しかしJavaを使ってエンジニアとしてのキャリアを開始する場合、SES企業などのスキルアップの保証のない企業に入ることになる確率が結構高い。 また官公庁や大企業での採用が多いことからスーツ勤務などといったエンジニア軽視の風潮が強い現場も多かったりします。 そうなるとカジュ ...

続きを読む

エンジニア独立

2019/4/15

文系出身エンジニアが語る「弱いエンジニア」戦い方

こんにちは、フリーランスエンジニアのてぃすです。 僕は文系大学を卒業し、新卒で入ったITコンサル会社で入社半年後に軽くC#を扱う機会が訪れるまで、プログラミングやエンジニアリングに触れたことが一度もありませんでした。 パソコンも基本的に動画を見たりゲームをするための便利な箱くらいな印象。 一方、エンジニア業界には中学生時代から趣味でプログラミングをしてきたり、理系大学でバリバリ情報系を学んできたエンジニアがゴロゴロいるわけです。もう機械語で会話すればいいのにと思うレベルの猛者揃いです。 そうなると僕のよう ...

続きを読む

エンジニア独立

2019/5/29

エンジニア歴2年の僕がギークスジョブでフリーランスを目指してみた

ぼちぼちの偏差値の文系大学を卒業後、パッケージ運用系のIT企業に就職。9か月で退職。 その後特定派遣会社の正社員として働いてきた僕がなぜフリーランスを目指す気になったのか。 一番の理由はズバリ、お金が稼ぎたかったから。 正確にはもっと効率よくお金を稼ぎたかったからです。 こんな会社もう嫌だ・・・ 現在僕は正社員として2年以上継続して現場に赴き、プログラミングの業務に従事してきましたが、全く給料が上がらない。 ぶっちゃけると手取りが20万円に届かないレベル。ボーナスもお小遣い程度なので年収も悲惨。 給与明細 ...

続きを読む

-プログラミング
-,

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