Laravel Vue.jsのVue RouterでSPA構築

2020年3月21日

PHP

LaravelにおいてAPIを作成し、フロント側はVue.jsのVue Routerを利用してSPA(Single Page Application)を実装してみます。

 

開発環境

Laravel Framework 7.2.0

 

 

作成するアプリケーションの概要


 

本記事では下記イラストのようなアプリケーションを作成します。なおバリデーションに関してはAPI側で必要最低限の処理しかおこなっていません。

 

 

下記関連ページでは、Vue Routerを利用せずに一つのURL(一つのコンポーネント)においてCRUD機能を実装しています。

 

Laravel 6 APIとVue.jsでSPA構築 最速入門

 

 

API側の実装


 

「http://localhost:8000/api/books/〜」のエンドポイントを持つAPIを作成します。

 

モデルとマイグレーションファイルを作成します。

 

以上でbooksテーブルに対応したモデル(app/Book.php)とマイグレーションファイルが生成されるので、それぞれ下記のように追記します(ハイライト部分)。

 

app/Book.php

 

database/migrations/2020_03_21_020219_create_books_table.php

 

マイグレーションを実行します。

 

–apiを付けてコントローラーファイルを作成します。

 

api.phpに下記コードを追記します。/api/books/〜というエンドポイントになります。

routes/api.php

 

設定されているルート情報を確認します。

 

作成したコントローラーファイルにすでに用意されている index() / store()  / show()/ update() / destroy() のメソッドを利用します。下記のように追記および編集します(ハイライト部分)。

 

 

バリデーションのためのフォームリクエストクラスを作成し、生成されたファイルを下記のように編集します(ハイライト部分)。

 

app/Http/Requests/StoreBook.php

 

以上でAPI側の実装は終わりです。

 

 

Vue.jsのVue RouterによるSPAの実装


 

Laravel 6~でVue.jsをはじめて利用する方は下記ページもご覧下さい。

Laravel 6 Vue.jsを利用する [axios][Laravel Mix]

 

まずlaravel/uiパッケージをインストールします。

 

Vue.jsで構築するためのファイル等を生成します。

 

package.jsonの内容に依存したパッケージおよびvue-routerをインストールします。

 

Vueコンポーネント(後述)関連のファイルを編集/保存した際には「npm run dev」で再度コンパイルする必要がありますが、watchでそれら編集/保存を監視しコンパイルを自動化することができます。

 

サーバーを起動させます。

 

 

まずSPAの土台としてのビュー(テンプレート)を作成します。index.blade.phpをを作成し下記のように記述します。

resources/views/index.blade.php

13行目

Vue Routerによるコンポーネントが表示されます。

 

 

routes/web.phpに下記を記述します。

2行目のindexは上記で作成したindex.blade.phpを設定しています。どのURLにアクセスしてもこのindex.blade.phpが土台となり、各URLに対応したVue.jsのコンポーネントが表示されるようになります。

 

 

resources/js/app.jsを下記のように編集します。コメントは除外してあります。

resources/js/app.js

 

 

router.jsファイルをresources/jsディレクトリ以下に作成し、下記のように編集します。

resources/js/router.js

24行目

: でパターンを記述しています。コンポーネント側では $route.params.id によって受け取ることができます。

 

 

webpack.mix.jsに下記コードを追記します。

webpack.mix.js

 

 

最後にVue.jsの各コンポーネント(index/add/edit)を作成します。

 

resources/js/components/index.vue

 

resources/js/components/add.vue

 

resources/js/components/edit.vue

 

 

 

 

LINEで送る
Pocket

定番本
定期本
 
Copyright © 2020 思考の葉 All Rights Reserved.  プライバシーポリシー