【Laravel9×Vue3】本の貸し出しシステム２（書籍の表示機能）

2023年 01月 25日

タグ：

Laravel

Vue

DBにある書籍データをフロントエンドで表示する機能を作成する

まず初めに今ある書籍の情報を表示するという、基本的な機能を作成していきます。

流れとしては

1.DBとモデル、ダミーデータを作る

2.コントローラーを作る

3.APIのルーティングを指定する

4.フロントエンドからAPIに対してリクエストを投げる

という流れになります。

bookモデルの作成とデータベースの設定

モデルを作成するコマンドに、--migrationオプションを付けることで、モデルとマイグレーションファイルを同時に作成できます。（便利）

php artisan make:model Book --migration

Laravel9 では、作成したモデルはapp/Modelsフォルダに追加されます。

まずはモデルを作成し

app/Models/Book.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    // 主キー名を変更するので明記する
    protected $primaryKey = 'book_id';

    // 入力可能な列名の指定
    protected $fillable = [
        'title',
        'author',
        'publisher',
        'ISBN',
        'summary',
        'genre',
        'available'
    ];
}

create_books_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBooksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('books', function (Blueprint $table) {
            $table->increments('book_id');
            $table->string('title');
            $table->string('author');
            $table->string('publisher');
            $table->string('ISBN');
            $table->string('summary');
            $table->string('gunre');
            $table->boolean('available');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('books');
    }
}

シードファイルの作成

シードを作成します。

php artisan make:seeder BooksTableSeeder

シードファイルを編集

database/seeders/BooksTableSeeder

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;

class BooksTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $param = [
            'title' => 'スッキリわかるJava入門 第3版',
            'author' => '中山 清喬',
            'publisher' => 'インプレス',
            'ISBN' => '978-4295007807',
            'summary' => '発売から8年であっという間に総計40万部到達した大人気シリーズの原点。
            「どうして? 」「なぜそうなる? 」が必ずわかるJava入門書史上最強の定番書!
            読みやすさ、使いやすさをさらに磨いた増補改訂版登場!',
            'gunre' => 'Java',
            'available' => true,
        ];
        DB::table('books')->insert($param);

        $param = [
            'title' => '独習JavaScript 新版',
            'author' => 'CodeMafia 外村 将大',
            'publisher' => '翔泳社',
            'ISBN' => '978-4798160276',
            'summary' => 'JavaScript“標準教科書"が人気講師の書き下ろしで新登場!
            初心者から経験者まで。上達するために
            「押さえておきたい基礎知識」総ざらい',
            'gunre' => 'JavaScript',
            'available' => true,
        ];
        DB::table('books')->insert($param);

        $param = [
            'title' => 'キタミ式イラストIT塾 基本情報技術者 令和04年',
            'author' => 'きたみ りゅうじ',
            'publisher' => '技術評論社',
            'ISBN' => '978-4297124519',
            'summary' => '絵解きでわかるキタミ式',
            'gunre' => '基本情報',
            'available' => true,
        ];
        DB::table('books')->insert($param);
    }
}

このBooksTablseSeederを登録します。

seeds/DatabaseSeeder.php

<?php
namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    public function run()
    {
        $this->call(BooksTableSeeder::class);
    }
}

最後にデータベースの設定を忘れず行ってください。(.envファイル)

完了したら、マイグレーションを実行します。

マイグレーションの実行

php artisan migrate --seed

データベースにダミーデータが投入されていることを確認しましょう。

コントローラの設定

次にコントローラを作成します。

このBookControllerは、indexアクションでテーブルの本のリストを全て表示するという簡単な実装とします。

BookControllerの作成

php artisan make:controller BookController

app/Http/Controllers/BookController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
// 追加
use App\Models\Book;

class BookController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $books = Book::all();
        // eloquantをそのままreturnすると、jsonに変換してくれる。
        return $books;
    }
}

ルーティングを設定する

フロントエンドからは非同期処理を利用したAPI通信を利用して、データベースのデータを受け渡しします。

Laravel側では、コントローラでAPIのエンドポイント(データを送るためのルーティング)を作成します。

routesフォルダにあるapi.phpという、デフォルトで作成されているファイルに記述します。

routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

// Laravel8から使うコントローラのuseが必要
use App\Http\Controllers\BookController;

// Laravel8から書き方が変更された
// apiに対応したrestfulにしておく
Route::apiResource('/books',BookController::class);

ルーティングが完了しているか確認します

php artisan route:list

  POST            _ignition/execute-solution ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolu…
  GET|HEAD        _ignition/health-check ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckControll…
  POST            _ignition/update-config ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigContr…
  GET|HEAD        api/books .............................................. books.index › BookController@index
  POST            api/books .............................................. books.store › BookController@store
  GET|HEAD        api/books/{book} ......................................... books.show › BookController@show
  PUT|PATCH       api/books/{book} ..................................... books.update › BookController@update
  DELETE          api/books/{book} ................................... books.destroy › BookController@destroy
  GET|HEAD        api/user .................................................................................. 
  GET|HEAD        sanctum/csrf-cookie ..... sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show

api/bookにアクセスして、APIを表示できるか確認してください。

フロントエンド（Vue）からaxiosでAPIを取得する

ここからはVue（フロントエンド）側の設定になります。

axiosをという外部ライブラリを利用してこのAPIのデータを取得します。

axiosはこの環境ではデフォルトでインストールされています。

(package.jsonを確認)

App.vueに記述しても良いですが、今後のことも考えて別のコンポーネントに分けておきます。

別のコンポーネントをBookList.vueとします。

App.vue

<template>
    <div>
        <h1>Hello World</h1>
        <BookList />
    </div>
</template>

<script>
import BookList from './components/BookList.vue';

export default {
    name: 'App',
    components:{
        BookList
    }
}
</script>

BookList.vue

<template>
    <ul v-for="Book in Books" class="list-group">
        <li class="list-group-item">{{ Book.title }}</li>
    </ul>
</template>
<script>
import axios from "axios";

export default {
    name: 'BookList',
    data(){
      return {
        Books:''
      }
    },
    async mounted() {
        const url = "/api/books";
        const response = await axios.get(url);
        console.log(response.data);
        this.Books= response.data;
    }
}
</script>

トップページにアクセスして、Vue側で取得できているか確認してください。