Laravel + Vue.js ユーザー一覧を作成してみる（API編）

LaravelでAPIを作成し、Vue.jsでフロント側を作成してみたいと思います。このAPI編では、/user APIを作成するところまでです🙌

最終的にはこんなかんじでユーザー一覧が表示されるようにしていく！

モデルの作成

$ php artisan make:model User

モデルを作成。中身はまだ空っぽでOKです。こうしておくと、ControllerでUser::query()が使えるようになり、DBのuserテーブルが取得できます。

$ php artisan make:migration create_users_table

次に、テーブルのフィールドを定義します。Schema::createの部分に追加していきます。下記の要領でname, icon_url, created_at, updated_at あたりを追加すればOK！

       Schema::create('users', function (Blueprint $table) {
           $table->bigIncrements('id');
           $table->string('name')->comment('名前');
           $table->string('icon_url')->comment('アイコンURL')->nullable();
           $table->timestamp('failed_at')->useCurrent();
       })

シーダクラス定義

$ php artisan make:seeder DatabaseUsersSeeder

シーダーファイルにデータを定義し、データベースへ保存していきます。伊藤さんの他に4人のデータも一緒に追加しました。

    public function run()
   {
       $param = [
           'name' => '伊藤博文',
           'employee_id' => '1',
           'status' => 5,
           'team_id' => 2,
           'icon_url' => 'https://upload.wikimedia.org/wikipedia/commons/7/7d/IT%C5%8C_Hirobumi.jpg'
       ];
       DB::table('users')->insert($param);
    }

ここで、シーダーを実行しようと$ php artisan db:seed したらdoes not existに😕⚠️

シーダクラスを書き上げたら、Composerのオートローダを再生成するために、dump-autoloadコマンドを実行する必要があったそうです。

$ composer dump-autoload

データベース：シーディング 6.x Laravel

$ php artisan db:seed

これで無事に実行できました！クラス名をリネームしたときなどは必ずcomposer dump-autoloadが必要みたいですね。

ちゃんとデータベースにも登録されています😊

コントローラの作成

createやeditメソッドを含まないAPIリソースコントローラを素早く生成するには、make:controllerコマンドを実行する際、--apiスイッチを使用すると良いみたいです。

$ php artisan make:controller API/UserController --api

コントローラ 6.x Laravel

上記コマンドでコントローラを生成すると、APIディレクトリが自動生成され、その配下にUserControllerが出来ます。

use App\Models\User; //

    public function index(Request $request)
   {
       $response = array();
       $userQuery = User::query();
       $users = $userQuery->get();
       $response['users'] = $users;
       $response['message'] = 'success';
       return new JsonResponse($response);
   }

先ほど追加したUserモデルをuseします。また、indexにusersを取得する処理を追加します。

ルーティングの設定

src/routes/api.php に先ほど作成したコントローラーを設定します。

Route::get('/user', "API\UserController@index");

これで /userにアクセスした際に登録したユーザー一覧が表示されるようになりました🌟これでuser APIは一旦完成です！

Vue.jsプロジェクトを作成

長くなったので、つづきは別のnoteに書きたいと思います😊

今回作成したuser APIを取得し、Vuexでstateに保存、userページを表示したときに一覧が表示されるようにrouterの設定などもやりたいなと思います。

後半はこちら！ではでは〜！

Laravel入門を参考にしています。

PHPフレームワークLaravel入門 第2版

PHPフレームワーク Laravel実践開発