見出し画像

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

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

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

画像4

モデルの作成

$ 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に😕⚠️

スクリーンショット 2020-01-03 13.57.13

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

$ composer dump-autoload
$ php artisan db:seed

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

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

スクリーンショット 2020-01-04 0.54.38

コントローラの作成

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

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

上記コマンドでコントローラを生成すると、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は一旦完成です!

スクリーンショット 2020-01-03 19.37.06

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

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

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

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


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

息抜きのコーヒー代にさせて頂きます!!♡

ありがとうございます〜!
2
フロントエンドエンジニアです。 日々勉強しながらがんばってます₍ ᐢ. ̫ .ᐢ ₎
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。