Laravel 5.6 + Vue.js で、SPA開発(4) ページング機能 #Laravel #vue.js #SPA #PHP

index:

概要:

前回のSPA(SinglePageApplication) 構成で、Laravel 5 +vue.js
の関連となります。

ページング機能の実装になります。

環境

php7.1
Laravel 5.6
Vue.js

参考

https://qiita.com/naga3/items/b37316150c1dc45b5688

参考の設定

resource など、一部のフォルダです。
github.com

追加した、一覧画面

実装など

・表の作成
php.exe artisan make:migration create_books_table --create=books
php.exe artisan migrate

https://github.com/kuc-arc-f/spa1_ver3/blob/master/database/migrations/2019_04_15_073043_create_books_table.php

・モデルの作成
php.exe artisan make:model Book

・データの登録、数件登録しておきます。

・ api.php
https://github.com/kuc-arc-f/spa1_ver3/blob/master/routes/api.php

=> ページ内の、件数指定　の場合。

    Route::get('/books', function(Request $request) {
        return App\Book::paginate(4);
    });

・app.js
/books/ の追加。
https://github.com/kuc-arc-f/spa1_ver3/blob/master/resources/assets/js/app.js

       { path: '/books/'              , component: require('./components/Books/index.vue') },

・Vueコンポーネント
Books/Index.vue

https://github.com/kuc-arc-f/spa1_ver3/blob/master/resources/assets/js/components/Books/Index.vue