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メソッドでサーバからファイルをダウンロード
ダウンロードは並列で実施される

<img width="300" alt="text.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542096/3c6cfce5-6806-e805-91a3-65d7fa31e739.jpeg">


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

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

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

<img width="300" alt="text.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542096/3fbaf4c3-b995-e8b6-65d8-bd4546b17255.png">

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

```python
# 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を記載してアクセスの許可を出してあげることが必要。

https://qiita.com/mitch0807/items/cd18e8fc15bb12416f3d

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

<img width="300" alt="pict1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542096/33f3df8d-246e-ecab-fc0f-fd6b637c5b25.jpeg">


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

<img width="300" alt="pict3.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542096/d4c331ff-0da4-992e-df5e-50303ed9b36e.jpeg">

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

<img width="300" alt="pict3.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542096/8038338c-5a61-d29f-e460-8e7a2f0e0325.jpeg">

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

<img width="300" alt="pict5.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542096/cca7b600-ad86-b416-abcf-5797dc994239.jpeg">

```
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が設定されていることが確認できる

<img width="300" alt="pict5.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542096/e50adde3-1358-baaf-2627-cd08df31cf86.jpeg">