小村のポートフォリオサイト開発(18) ページネーションを追加する(1)
こんばんは、小村だよ!
今日も下記のポートフォリオサイトを構築していくよ
- サイト:Little Village
前回storeを作成したので、今回はその機能を増やしていくよ!
よろしくね!!!
目次
- Entry取得時にページネーションを追加する
- ページ切替処理を追加する
記録
Entry取得時にページネーションを追加する
現状はシンプルに、
api/entries
にアクセスするとDBの全件を取得しますこのままだと今後記事が増えた時に読み込みが大変ですね!
というわけでページネーションを追加していこうと思います。
-
- この参考サイトもシンプルでいいですね
では早速実装していきましょう!
ページネーション用のクラスを作成し、デフォルト値を設定します。
あとは
view
にpagination_class = EntryViewPagination
を加えれば完成UIからAPIを呼び出すと下記のようになります
responseに
count
,next
,previous
,results
が加わりました!返り値が変わったためデータを正しく取得できず、UIがエラーとなってますね
正しく取得してあげましょう!
データの格納場所が
request.data
からrequest.data.results
に移動しました。これで取得するレコード数がPaginationで定義した数になりましたね。
- 3件だけだと上に寄ってる感がすごいな……
ページ切替処理を追加する
ではページを切り替えられるようにしていきましょう
まず、storeのentry.jsに
page
を用意して、pageの値を取得、セットするgettars
,mutation
,actions
を用意しますそれから
fetchEntries
ではurlを引数に取るようにしましょうか
次はコンポーネント側でstoreの
page
を読み書きできるようにしますcomputedに
page:{get(){},set(){}}
を記述することで実現できますあとはこのpageの値に応じてURLを変更する
getFetchUrl
を用意して<v-pagenation>
を操作時に再読み込みする処理を追加すれば完成!
わーい!
ちゃんとページの切替できてますね!
おわりに
まだページ遷移処理は少し残ってます
具体的には、ページネーション数をレコード数に応じて変化させたり
ソート順も降順にしたいですね。最新の記事が手前に欲しい
そのあたりを次回にやりたいとおもいます!
それでは!ちゃおちゃお~~~!