Day3：3日でVue.jsを用いたアプリケーションを動かす

3日目の取り組みの記録

【Story】

・でさ、結局HTMLからDOM操作までやって動きは分かったよ
・でもこれをどうやってサーバ側と関わっているの？
・それこそ入力フィールドにユーザーから入力されたデータをクラスで受け取ってDBに格納したいときはどうするの？

慣れているpythonでサーバー立ててデータをやり取りしてみよう......!!

前提知識

＊メソッドについて

GETメソッド
・?のパラメーターで指定
・サーバのデータを更新しないもの
・型が1つのみ
・受け取るのは何でもOK

POSTメソッド
・URLで何を送ったか分かんない
・サーバのデータで更新するもの(入力フォームのデータなど)
・データの型はなんでもよい
・複雑なのは良い
・データをJSONで送れる
・受け取るのは何でもOK

＊WEBサーバについて

nginx
・OSSで自分達で書ける

クラウド
・裏方が何か分からない

CDN
・ホットデプロイ仕様
→ブラウザ側がwebSocketで常にWEBサーバと通信
→その通信をvueCLIが監視し、コードに変更があった場合は反映する。

【WEBページの検証】

＊画面の表示方法
①npm run serveでスクリプトを実行
②localhostでF12を押下し、ディベロッパーツールを開く
③「Network」タブ→ファイル名選択→「Headers」

＊見方
Request URL：ブラウザがリクエストしているUTL
Request Method：命令の種類

＊その他
WEB開いたときGETメソッドでサーバからファイルをダウンロード
ダウンロードは並列で実施される

【実践課題：WEBサーバを立ててVueから通信する】

＊ざっくりやっていること
サーバを起動するとブラウザとサーバ間で双方向の通信が行われる。
トリガーは基本的にブラウザから。

今回のケースだとブラウザからpythonにデータを要求し、python側がその要求に沿ってレスポンスを返却する。

※トリガーについて
ブラウザ以外でトリガー引くならwebsocket
SSE Blocking Queryなど

＊手順
①JSON型のデータを返却するAPIサーバを立てる
・APIサーバ
JavaならSpringBoot、PythonならFlask、今回がFlaskを利用する。
サンプルコードは以下の通り。

# Flask などの必要なライブラリをインポートする
from flask import Flask, render_template, request, redirect, url_for, jsonify
import numpy as np
from flask_cors import CORS

# 自身の名称を app という名前でインスタンス化する
app = Flask(__name__)
CORS(app)

# メッセージをランダムに表示するメソッド
def picked_up():
    messages = [
        "こんにちは、あなたの名前を入力してください",
        "やあ！お名前は何ですか？",
        "あなたの名前を教えてね"
    ]
    # NumPy の random.choice で配列からランダムに取り出し
    return np.random.choice(messages)

# ここからウェブアプリケーション用のルーティングを記述
# index にアクセスしたときの処理
@app.route('/')
def index():
    title = "test"
    message = picked_up()
    # index.html をレンダリングする
    return render_template('index.html',
                           message=message, title=title)

# /post にアクセスしたときの処理
@app.route('/getuser', methods=['GET'])
def get():
    return jsonify({'message': 'Hello, world'})


if __name__ == '__main__':
    #app.debug = True # デバッグモード有効化
    app.run() # どこからでもアクセス可能に

②プロジェクトに必要なnpmパッケージをインストール
・インストール

npm install axios --save
npm install

③Vueに必要なコードを記述
※今回はH1タグにJSONのvalueの情報を反映するコードを記述

mounted(){
  const self = this
  Axios.get('http://localhost:5000/getuser').then((res) => {self.test_title = res.data.message})
},

・mountedの実行タイミングについては以下URLを参照のこと
https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0

※CrossOriginについて

Chromeなど各種ブラウザが標準で搭載している機能。ホストが異なると動作しない。

今回の例でいうと、ブラウザがVue(8080)からリクエストを取得して、Python(5000)を叩こうとしているため、標準だとブラウザ上でエラーが出てしまう。

そのためpython上にCORSを記載してアクセスの許可を出してあげることが必要。

＊実際の実行画面の確認
①Pythonのコードを実行した時の画面
「http://127.0.0.1:5000/」でサーバが立ち上がっていることが確認できる。
またgeuserページで以下のJSON型を返却する仕様になっていることが確認できる。
{'message': 'Hello, world'}

②「http://127.0.0.1:5000/getuser」にアクセスしたときの画面

③コマンドプロンプト上でVueを実行した時の画面
「http://localhost:8081/」でサーバが立ち上がっていることが確認できる。

④Vue.jsの画面
デフォルトではh1のタイトルにはHELLOが設定される

data:function(){
 return{
 message: 'お名前は？',
 input:'no name',
 test_title:'HELLO'
 };
 },

mount時にlocalhost:5000から取得したmessageキーのバリューが設定される

mounted(){
 const self = this
 Axios.get('http://localhost:5000/getuser').then((res) => {self.test_title = res.data.message})
 },

⑤Vueを起動したときの画面
HELLOではなく、HELLO,worldが設定されていることが確認できる