Laravel7 Vue.jsを使用してSPAを実装する手順

Laravel7 Vue.jsを使用してSPAを実装する手順

Laravel7でVue.jsを利用して、SPAを実装するまでの手順を記述してます。

環境

  • OS CentOS Linux release 8.0.1905 (Core)
  • Composer 1.10.5
  • PHP 7.4.5
  • Percona Server Ver 8.0.19-10
  • Laravel Framework 7.6.2

Laravelアプリケーション作成

任意の場所で、プロジェクトを作成します 。
ここではlaravel-testという名称で作成してます。

初期設定

.envファイル設定

環境に合わせて Percona Server との接続情報を設定しておきます。

日本語環境設定

configフォルダ配下の「app.php」のtimezoneとlocalを変更しておきます。

Vue環境構築

公式パッケージのインストールを実行します。

vue環境を構築します。

パッケージのインストールとコンパイルを行います。

ビルドの自動化をしておきます。
※下記を実行しないとソースコードを変更する度に、上記コマンドを実行する必要があります。

モデル作成

下記のコマンドを実行して、モデルとマイグレーションファイルを一緒に作成します。

「app/Task.php」が生成されていると思いますので、下記の通りに編集します。

$fillableに指定したカラムはホワイトリストとなり、create()やfill()、update()で値の代入が可能となります。

テーブル作成

モデル作成時に生成された「database/migrations/xxxx_xx_xx_xxxxxx_create_tasks_table.php」を下記の通りに編集して、マイグレーションを実行して、テーブルを作成します。

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

テーブル「tasks」が作成されて、カラムも作成されます。

APIコントローラー作成

次にAPI用のコントローラーを作成します。
–apiで、 必要なメソッドを自動生成してくれます 。

app/Http/Controllers/TaskController.phpが作成されるので、下記の通りに編集しておきます。
コード内の「use App/Http/Requests/StoreTask;」はバリデーションで、次の工程で実装します。
また「$this->middleware(‘JpJsonResponse’);」は日本語文字化け対策で、別の工程で実装します。

バリデーション作成

バリデーションを行うためFormRequestクラスを作成します。。

app/Http/Requests/StoreTask.phpを下記の通りに編集します。

日本語文字化け対策

Middlewareを利用して、エンコードのオプションに「 JSON_UNESCAPED_UNICODE 」を追加してresponseデータを処理します。

middlewareを作成します。

app/Http/Middleware/JpJsonResponse.phpを下記の通りに編集します。

作成したmiddlewareをKernelに追加します。
app/Http配下にある「Kernel.php」に下記を追加します。

SPA用コントローラー作成

SPAを実装するためのコントローラーを作成しておきます。

app/Http/Controllers/TaskMainController.phpが作成されるので、下記の通りに編集しておきます。

共通レイアウト作成

今回はSPAなので必要ないと思いますが、共通のレイアウトを作成しておきます。

resources/views/layout.blade.php を下記の内容で作成しておきます。

ビュー作成

ビューを作成します。resources/views/にtaskディレクトリを作成し、index.blade.phpを下記の内容で編集します。

コンポーネント作成

APIの処理を行うvue.jsのコンポーネントを作成します。
resources/js/components配下に「TaskComponent.vue」を下記の内容で作成します。
ここでは、APIの処理にaxiosを使用してます。

App.js編集

作成したコンポーネントを利用するためresources/js配下の「app.js」に下記を追加します。

ルーティング追加

エンドポイントを設定するため、ルーティングを記述します。

routes/api.phpに下記を追加します。
設定すると「 /api/tasks/ 」がエンドポイントとなります。

ルーティングは下記のコマンドで確認できます。

次にroutes/web.phpに下記を追加します。こちらのURLがSPAのページとなります。

実行します。

ブラウザから http://プライベートIP:8000/task にアクセスするとSPAが実装され、新しいタスクを追加すると表示されることが確認できます。