TIS ENGINEER NOTE

27才文系出身フリーランスエンジニアのブログ

プログラミング

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

更新日:

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

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

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

実装内容

前提条件

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

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

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

ソースファイル

いじるファイルは2つだけです。送信先URLについては、各々修正の上動作確認をしてみてください。

簡単な解説

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

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

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

続きを読む

エンジニア独立

2018/1/2

本当は紹介したくない穴場フリーランスエージェント『IT求人ナビ』

エンジニアがフリーランスとして独立することを考えたとき、重要になってくるのが案件紹介エージェント選び。 プログラマー・SEという職業がバブル状態である近年、そういった案件紹介サービスは大量に存在しています。しかもどのサービスも『高単価』『案件多数』など似たような売り文句ばかりで選ぶ側としては結構困ってしまいますよね。 そういった場合、業界最大手であるギークスジョブやレバテックフリーランスなどを手堅く利用するのが常套手段となりますが、あまり名前が知られていなくても、豊富な案件数や充実したサービスを提供してく ...

続きを読む

エンジニア独立

2018/1/2

稼げるエンジニアになるには

最近SNSやブログなどで『優秀なエンジニアとは?』みたいな議論で盛り上がっているのを良く見ます。どのようなことができれば優秀なエンジニアと言えるのか、みたいな。 正直言って僕はエンジニアとして優秀であるか否かについてはさほど興味を持てません。優秀であればその優秀さに伴った報酬を得られる職業であったのなら、僕も素直に優秀さを追い求めていたことでしょう。 しかしプログラマーとして未経験の言語に転身したにも関わらず、収入が2倍以上になった経験からそんな単純な職業ではないことを思い知ってしまいました。 優秀なエン ...

続きを読む

エンジニア独立

2018/1/2

プログラマーはIT土方なのか

プログラマーという働き方について、調べたときに必ずといって良いほど出てくる単語であるIT土方。 実際に土木関係に従事する人たちがどのような労働環境におかれているかは置いといて、基本的には以下のような状況を揶揄して使われている言葉です。 毎日終電まで残業させられる 納期のプレッシャーに追われる 忙しいのに低賃金 とにかく辛い そういった過酷な環境であるから、『プログラミングを楽しいと思っていたり、理数系の才能がある人間じゃなければ絶対になるな』という言葉もよく聞きます。 今回はプログラマーが世間でIT土方と ...

続きを読む

エンジニア入門

2018/8/19

プログラミングスクールって実際のところどうなの?

こんにちは、フリーエンジニアのてぃすです。 プログラミングスクール、今や広告やSNSでも頻繁に目にするこのワード。 初心者がプログラミングを始めるなら通うべき 独学でも十分だから必要ない プログラミングスクールに通ってもプログラマになれない などなど賛否両論飛び交っていますが、今日は現役エンジニアの視点からプログラミングスクールのメリット・デメリット、そしてエンジニアを目指す上での有力な選択肢となるかについてお話していきます。 プログラミングスクールとは何か その名前の通り、プログラミングを学ぶための学校 ...

続きを読む

-プログラミング
-,

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