統合API
前のセクションでは、Vue を使用して単純な TODO アプリケーションを実装しました。Model を更新することで、DOM 構造を同期的に更新できます。
さて、この単純な TODO アプリケーションをユーザーが使用できる Web アプリケーションに変えるには、いくつかの問題を解決する必要があります。
ユーザーの TODO データはバックグラウンドから読み取る必要があり、
TODO の追加、削除、変更はサーバーのバックエンドに同期する必要があります。
ユーザーはビューで TODO を変更できる必要があります。
質問 1 と 2 は両方とも API 関連です。適切な API インターフェースを実装すれば、MVVM 内のモデルを更新すると同時に、データの更新を API 経由でサーバーに反映することができ、ユーザーのデータがサーバーに保存され、TODO が更新されます。次回ページを開いたときにリストを読むことができます。
vue-todo に基づいて vue-todo-2 プロジェクトを作成します。構造は次のとおりです。
vue-todo-2/
|
± .vscode/
| |
| ± launch.json <-- VSCode 構成ファイル
|
± app.js <-- koa アプリ
|
± static-files.js <-- 静的ファイルをサポートする koa ミドルウェア
|
±controller.js <-- ルーティングをサポートする koa ミドルウェア
|
±rest.js <-- REST をサポートする koa ミドルウェア
|
± package.json <-- プロジェクト説明ファイル
|
± node_modules/ <-- npm によってインストールされるすべての依存関係
|
±controllers/ <-- コントローラーを保存
| |
| ± api.js <-- REST API
|
± static/ <-- 静的リソース ファイルを保存
|