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

2020年2月13日

PHP

Laravel 6.xにおいてAPIを作成し、フロント側はVue.jsでSPA(Single Page Application)を実装します。

 

 

概要


 

下記イラストのような、必要最低限の説明で済む機能を持つアプリケーションを作成します。

 

 

,すでに1件登録されている様子です。

,フォームが未入力もしくは11文字以上を入力し追加しようとするとエラーとなります。バリデーションに関してはAPI側で必要最低限(入力必須/10文字まで)を実装し、フロント側での実装はしていません。

,編集ボタンをクリックすると、4のように編集フォームが表示されます。挙動が不格好ですが、編集ボタンをクリックすることによって、編集フォーム領域の表示非表示のフラグ(true/falase)切り替えているだけです。

,「編集する」もしくは「キャンセル」をクリックすると、編集フォームは消えます。

 

 

API側の実装


 

「http://localhost:8000/api/books/〜」のエンドポイントを持つAPIを作成します。本記事では基本的に手順のみを記述していくので、下記のページもご覧下さい。

 

Laravelで REST API を実装する

 

あらかじめsample01データベースを用意しておいて下さい。本記事ではMySQLを利用します。.envに適当な値を設定します。

 

.env

 

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

 

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

 

app/Book.php

 

database/migrations/2020_02_10_020219_create_books_table.php

 

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

 

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

 

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

routes/api.php

 

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

 

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

 

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

 

app/Http/Requests/StoreBook.php

 

以上でAPI側の実装は終わりです。curlで確認することができます。

 

新規作成(POST)

 

すべてのレコードを確認(GET)

 

idが1のレコードを編集(PUT)

 

idが1のレコードを削除(DELETE)

 

 

 

Vue.jsによるフロント側の実装


 

Laravelのバージョン6.xでVue.jsをはじめて利用する方は下記ページをご覧下さい。

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

 

 

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

 

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

 

package.jsonの内容に依存したパッケージをインストールし、コンパイルします。

 

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

 

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

 

 

画面を作成します。Laravelのビュー(テンプレート)を土台として作成し、その中にVue.jsのコンポーネントを表示させるイメージです。「http://localhost:8000/book」としての一画面のSPAとなります。

 

コントローラーを作成し、ルート情報に追記、後述のようにコントローラーを編集します。Laravelの通常の手順ですので説明は省きます。

 

routes/web.php

 

app/Http/Controllers/BookManageController.php

 

ビュー(テンプレート)を作成します。bookディレクトリおよびindex.blade.phpをを作成し下記のように記述します。

resources/views/book/index.blade.php

13行目

book-componentという名前のVueコンポーネントを表示させます。

 

 

app.jsに下記コードを追記して下さい。

resources/js/app.js

book-componentという名前のコンポーネントに対して下記で作成するBookComponent.vueを割り当てています。

 

 

BookComponent.vueを作成し下記のように記述します。

resources/js/components/BookComponent.vue

基本的にはaxiosを利用してAPIを叩き、成功したら(.then)一覧画面を更新(getBookメソッド)するという基本的な動作で実現しています。

 

axiosでJSONを取得する[Vue.js]

 

 

以上で 「〜/book」にアクセスすればSPAとしてのアプリケーションが確認できます。

 

 

 

LINEで送る
Pocket

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