SpringBoot & Semantic UI React のページネーションサンプル

  • Semantic UI React を UI フレームワークとした React with TypeScript で実装されたフロントサイド
  • ORM に MyBatis を利用した SpringBoot3 で実装されたサーバーサイド

上記構成を1つのリポジトリに入れ込んだページネーションのサンプルプログラムを作成しました。

Sematic UI React の Pagination コンポーネントを利用してページネーションを実装していて、ページネーションでページ遷移を行った時に、サーバサイドのAPIをコールして画面描画に必要なデータだけを取得して、フロント側で再描画する仕組みです。サーバーサイドでは、MyBatis の Mapper を利用して SQLクエリを発行した上で、必要データを抽出して、RestController 経由で JSON に変換してフロントサイドに返す仕組みを実装しています。

https://github.com/shinroh/pagenation-sample-in-springboot-and-react