小村のポートフォリオサイト開発(18) ページネーションを追加する(1)

  • こんばんは、小村だよ!

  • 今日も下記のポートフォリオサイトを構築していくよ

  • 前回storeを作成したので、今回はその機能を増やしていくよ!

  • よろしくね!!!



目次

  1. Entry取得時にページネーションを追加する
  2. ページ切替処理を追加する



記録

Entry取得時にページネーションを追加する

  • 現状はシンプルに、api/entriesにアクセスするとDBの全件を取得します

  • このままだと今後記事が増えた時に読み込みが大変ですね!

  • というわけでページネーションを追加していこうと思います。

  • 参考:シンプルブログ、記事一覧ページの作成③

    • この参考サイトもシンプルでいいですね
  • では早速実装していきましょう!


f:id:kom314_prog:20210906211151p:plain
  • ページネーション用のクラスを作成し、デフォルト値を設定します。

  • あとはviewpagination_class = EntryViewPaginationを加えれば完成

  • UIからAPIを呼び出すと下記のようになります


f:id:kom314_prog:20210906211415p:plain
  • responseにcount,next,previous,resultsが加わりました!

  • 返り値が変わったためデータを正しく取得できず、UIがエラーとなってますね

  • 正しく取得してあげましょう!


f:id:kom314_prog:20210906213400p:plain
  • データの格納場所がrequest.dataからrequest.data.resultsに移動しました。

  • これで取得するレコード数がPaginationで定義した数になりましたね。


f:id:kom314_prog:20210906213818p:plain
  • 3件だけだと上に寄ってる感がすごいな……



ページ切替処理を追加する

  • ではページを切り替えられるようにしていきましょう

  • まず、storeのentry.jsにpageを用意して、pageの値を取得、セットするgettars,mutation,actionsを用意します

  • それからfetchEntriesではurlを引数に取るようにしましょうか

f:id:kom314_prog:20210906223914p:plain


  • 次はコンポーネント側でstoreのpageを読み書きできるようにします

  • computedにpage:{get(){},set(){}}を記述することで実現できます

  • あとはこのpageの値に応じてURLを変更するgetFetchUrlを用意して

  • <v-pagenation>を操作時に再読み込みする処理を追加すれば完成!

f:id:kom314_prog:20210906224244p:plain


f:id:kom314_prog:20210906224323p:plain


f:id:kom314_prog:20210906224401p:plain
  • わーい!

  • ちゃんとページの切替できてますね!



おわりに

  • まだページ遷移処理は少し残ってます

  • 具体的には、ページネーション数をレコード数に応じて変化させたり

  • ソート順も降順にしたいですね。最新の記事が手前に欲しい

  • そのあたりを次回にやりたいとおもいます!

  • それでは!ちゃおちゃお~~~!