前回はこんな感じのことをやってました。
今回は、ブラウザ上の画面とこれまで作ったバックエンドの機能を組み合わせてみます。
前回までの状態
とりあえず、
- ルートにアクセスすると画面が出てくる
- 設定されたエンドポイントにアクセスするとDBと連携してなんかデータを返す
という状態になっています。 ここから、画面(フロントエンド)とDB（バックエンド）を連動して動くようにしていきます。
修正
バックエンド
まずはバックエンドを修正していきます。 Vue.jsを使用したSPAを想定しているので、バックエンドはAPIとして機能させます。 そのようにエンドポイントを定義していきます。
作るのは簡単にCRUD操作にしたいと思います。
エンドポイント
Create
新規にデータを登録する際に使用します。
POST /create
Read
登録済みのデータを検索するときに利用します。 ここは前回とほとんど変わりません。
GET /select
Update
DB内のレコードの更新に使用します。
POST /update
Delete
レコードを削除するときに使用します。
POST /delete
実装サンプル
だいたいこんなもんですかね。
フロントエンド
今度はフロントエンドからバックエンドにリクエストを飛ばすように書き換えます。
ReactとかVueでフロントエンドの開発について勉強してみると、ほぼ間違いなく出てくるのがFluxアーキテクチャってやつです。 クライアントサイドでのデータ管理の手法ですね。
データの概念的な流れを一方向に循環させることで、データフローがシンプルになります。 Vue.jsだとVuexというライブラリが提供されているので、それを使用することでFluxアーキテクチャっぽいアプリが作成できます。
外部と連携するAction、Actionによって取得した値を反映させるMutation、Mutationによってのみ更新される唯一信頼できる情報源であるState。 これらによってVue componentは正しくステート管理が可能になります。
Vuexについては過去にも記事を書いているので、そちらもご参照ください。
axios
上のVuexの概念図で、Actionがbackend APIと連携しています。 要するに、
Vueコンポーネント -> action関数 -> バックエンド関数->mutation関数
のフローになるように関数を組んであげることで。画面とバックエンドAPIを連携させます。
Vuexのstoreでの操作
まず、Vuexの中身を定義してあげます。
Vuexの中身として定義する必要があるのは、
- State
- Mutations
- Actions
の3つでした。 この3つをstore.jsに定義していきます。
これでActionが呼び出されてバックエンドAPIからデータを取得してStateを更新する部分はできました。 あとは、Vueコンポーネントからaction関数を呼ぶトリガーを作ります。
できたもの
まあこんな感じです。
感想
しゅごいのおおおおおおおお
...気が違ってますね。はい。頭おかしくなってます。 ひとまず、夏休み自由研究としてはこのへんでおしまいです。
まとまった時間が取れたら、またなんかやりたいなあ…とか思ってます。
