【感想】Laravel+PostgreSQL+Vue.jsでSPA開発【チュートリアル】

はじめに

絶賛Laravel+Vue.jsのポートフォリオ作成中です。

DB連携が難しすぎたので勉強がてらこちらのチュートリアルに挑戦させていただきました。

※以下はこれまでの制作記録

【Laravel+Vue.js】アプリ制作の記録⑨DB連携(ログイン/ログアウト機能)

Laravel+PostgreSQL+Vue.jsでSPA開発【チュートリアル】

環境

教材はLaravel5.8、PostgreSQL、Dockerです。

私はLaravel6.85.8、MySQL、XAMPPで試しました。

ちょび
最初はLaravel6.8でやりましたが、認証の読み替えが手間だったので5.8でやり直しました。

また今回はSourcetreeも勉強がてら使ってみます。

Sourcetreeの使い方まとめ

アプリ制作準備

①プロジェクト作成

composer create-project "laravel/laravel=5.8" memo

②DB設定

DBは.envファイルを編集しないで済むようにDB名LaravelをphpMyAdminで作成しました。

動作確認。

php artisan migrate
ちょび
使い捨てのデータなのでXAMPP側でDB名Laravel作っておくと楽ですね!
注意
Laravel 6.8 だとこの使い方でいけるのですが、Laravel5.8だと.envファイルの編集が必要でした。

③認証機能の導入

php artisan make:auth
ちょび
HomeControllerやlayouts/app.blade.phpなど自動で生成されるので便利ですね。
ちょび
VScodeだとコマンドで生成・変更されたファイルを色付けして知らせてくれることに今更気づきました。

④テーブル作成

マイグレーションファイル作成

php artisan make:migration create_todos_table

教材に従いマイグレーションファイルを編集し反映

php artisan migrate

⑤コントローラ作成

※ルーティングのロジックをコントロール内で管理するため

php artisan make:controller TodoController

⑥ビューの作成

resources/views/todo.blade.phpを作成

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <h2>TODO アプリケーション</h2>
    </div>
</div>
@endsection

⑦ルーティングの設定

TodoControllerを編集

public function index() {
  return view('todo');
}

web.phpを編集

<?php
Route::get('/todo',TodoController::class . "@index");
注意
チュートリアルの方では既にVue.js側で作成したコンポーネントが読み込まれており、見た目が出来上がっていますが、実際の表示は簡素です。

⑧モデルの作成

php artisan make:model Todo

⑨リレーション定義

User.phpへ追記

    public function todos(){
        return $this->hasMany('App\Todo');
    }
ポイント
Eloquentは、モデルに対する外部キーを自動的に決めることを心に留めてください。規約によりEloquentは、自分自身のモデル名の「スネークケース」に_idのサフィックスをつけた名前と想定します。ですから今回の例でEloquentは、Todoモデルの外部キーをuser_idであると想定します。
参考:Laravel 5.6 Eloquent:リレーション

⑩ミドルウェアの追加

web.phpを編集

Route::group(["middleware"=>"auth"],function(){
    Route::get('/todo',TodoController::class . "@index");
});

ここまでのソースコード

⑪リダイレクト先の編集

※ここは教材を参考に

ちょび
Laravel6.8とリダイレクト先URLの表記の仕方が違いますね!

サーバーサイド実装

注意
教材ではコードが結構端折られてます。全て追記するイメージです。

①ToDoコントローラの編集

※教材参考

②api.phpへ追記

Route::get('/todo','TodoController@get');
Route::post('/todo','TodoController@post');
Route::delete('/todo/{id}','TodoController@delete');
Route::put('/todo/{id}','TodoController@update');

③APIのAuth実装

・Karnel.phpの編集

apiルーティングもwebと同じようにミドルウェアを適用する。web側のほぼコピペ。

※教材参考

ちょび
Karnel.phpを見るとapi側のミドルウェアの処理が初期だとだいぶ少ないことがわかります。

・ミドルウェアの作成

API側では/loginへのリダイレクトではなくエラーメッセージを返させるため。

php artisan make:middleware AuthApi

Middleware/AuthApi.phpの編集

use Illuminate\Support\Facades\Auth; // 追記
// 以下編集
public function handle($request, Closure $next)
{
    if (!Auth::check()) return response("",401,["Content-type: application/json"]);
    return $next($request);
}

Karnel.phpの編集

protected $routeMiddleware = [
    // 省略
    'auth.api' => \App\Http\Middleware\AuthApi::class,
];

api.phpの編集

Route::group(["middleware" => "auth.api"],function(){
    // auth.apiはKarnel.phpで定義されている。
    Route::get('/todo','TodoController@get');
    Route::post('/todo','TodoController@post');
    Route::delete('/todo/{id}','TodoController@delete');
    Route::put('/todo/{id}','TodoController@update');
});

ここまでのソースコード

フロントの実装

①Vue.jsの構築

npm i
npm run dev
npm run watch
npm run hot // ホットリロード
ちょび
ホットリロードでhttp://localhost:8080/へアクセスできない現象が僕の場合置きました。
ちょび

C:\Windows\System32\drivers\etc\hostsを確認。

# 127.0.0.1 kubernetes.docker.internal

こいつをミュートしてみました。変わらない。。。ステイします。

②コンポーネントの読込

todo.blade.phpの編集

<div class="row justify-content-center">
  <h2>TODO アプリケーション</h2>
  <example-component></example-component>
</div>
ちょび
Laravel5.8の方がVue.jsの実装楽な気がする。

③js/api.jsの作成

※ここは教材を参考に。

④ExampleComponent.vueの編集

※教材を参考に。

動作確認

①ユーザー1の画面

・ユーザー2の画面

・データベースの確認

ちょび
しっかりとユーザー毎にデータが表示・編集できることを確認できました◎

おわりに

Vue.js側の仕組みの解説は少なかったですが、実装はできたのでソースコードをこれから読み解いていこうと思います。

目指せLaravel+Vue.jsでのポートフォリオ完成。

ソースコード

参考

hosts.ics とは。削除して問題ないのか。Internet Connection Sharing チュートリアルとは関係ないけどこれみて削除

コメントを残す