メサイア・ワークス

laravelでAPI作って、フロントはvue.js+axios(非同期なajax)で、SPAなCRUDアプリを作ってみた(後編)

laravelでAPI作って、フロントはvue.js+axios(非同期なajax)で、SPAなCRUDアプリを作ってみた(後編)

API作成とVUEの結合

1, DBは、MySQLではなくSQLite

# SQLiteの下準備は、空ファイルを作成するだけ
touch database/database.sqlite

.envのDB接続設定をmysqlからsqliteにする

これだけでDB(sqlite)が使えるようになる!
php artisan migrate

# たまにmysqlのキャッシュが残っている事があるのでクリアしておく
php artisan config:cache

2, モデル・テーブル・コントローラー・シーダーを一気に作成

3, テーブル定義
database/migration/2020_08_21_033554_create_tasks_table.php

4, Taskモデルは、idカラム以外は自由に修正出来るようにする。

5, シーダーで適当なレコード生成
database/seeds/TaskSeeder.php

database/seeds/DatabaseSeeder.phpで読み込む

6, APIのルーティング
routes/api.php

これで、自動的にRESTful APIのルーティングが完了する。

7, TaskController.phpでAPI処理内容を記述。スゴいシンプル!

8, 試しにコマンドラインから、CRUDのAPIを叩いてみる

9, フロントエンドのvue.js・バックエンドのlaravel apiを、axios(ajax)で結びつける

タスク一覧をAPIで取得
resources/js/components/TaskListComponent.vue

タスク詳細ページ
resources/js/components/TaskShowComponent.vue

ハリボテだったタスク登録画面
resources/js/components/TaskCreateComponent.vue

同じくハリボテだったタスク更新画面
resources/js/components/TaskEditComponent.vue

最後に削除ボタン。画面遷移を伴わないのでスムーズな動作(画面のDOMを削除して、裏でAPI経由でレコード削除)
scriptタグに追加

モバイルバージョンを終了