プロジェクト構造の構築
本記事では、LayUIを用いたリストページと編集ページの表示インタフェースを実装した前回の内容をベースに、固定データではなくデータベースからリストデータを取得する方法について説明します。
1. プロジェクト構造
プロジェクト構造は拡張性と可読性を考慮して設計します。下記は主なパッケージ構成です。
com.example：メインクラスcom.example.config：設定クラス（例：Druidデータソース設定）com.example.controller：コントローラークラスcom.example.dao：データベース操作インタフェースcom.example.entity：エンティティクラスcom.example.pojo：データベーステーブルと対応するPOJOクラスcom.example.service：サービスインタフェースcom.example.service.impl：サービス実装クラスcom.example.utils：ユーティリティクラス
ログの統合
Spring Boot標準のログライブラリを除外し、Log4j2を使用します。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-logging</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-log4j2</artifactId>
</dependency>
Log4j2の設定はlog4j2.xmlファイルで行い、ログ出力先を指定します。
MyBatisの統合
MyBatisの依存を追加し、データベース接続情報をapplication.propertiesに設定します。
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.11</version>
</dependency>
application.propertiesの設定：
spring.datasource.driverClassName=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/mybatis?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456
mybatis.config-location=classpath:mybatis/mybatis-config.xml
mybatis.mapper-locations=classpath:mybatis/mapper/*.xml
PageHelperの統合
PageHelperを用いたページネーションを実装します。
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>3.4.2</version>
</dependency>
mybatis-config.xmlにPageHelperのプラグイン設定を追加：
<plugins>
<plugin interceptor="com.github.pagehelper.PageHelper">
<property name="dialect" value="mysql"/>
<property name="rowBoundsWithCount" value="true"/>
</plugin>
</plugins>
データベースのページネーション処理
12件のサンプルデータを準備し、PageHelperを用いてページネーションを実装します。
public class PageDataResult {
private Integer totals;
private List list;
private Integer code = 200;
private String msg = "";
// getter/setter
}
サービス層でのページネーション処理：
@Override
public PageDataResult getUsers(UserSearchDTO userSearch) {
PageDataResult result = new PageDataResult();
PageHelper.startPage(userSearch.getPage(), userSearch.getLimit(), true);
List<User> userList = userMapper.getUsers(userSearch);
PageInfo<User> pageInfo = new PageInfo<>(userList);
result.setTotals(pageInfo.getTotal());
result.setList(userList);
return result;
}
フロントエンドの更新
固定データをデータベースから取得したデータに置き換え、LayUIのテーブル表示を更新します。
table.render({
elem: '#user',
url: '/user/getUsers',
page: true,
response: {
countName: 'totals',
dataName: 'list'
},
cols: [[
{field: 'name', title: '名前'},
{field: 'age', title: '年齢'},
{field: 'sex', title: '性別', templet: function(d) {
return d.sex === 1 ? '男' : '女';
}}
]]
});
まとめ
Javaのプロジェクト構造を構築し、ログ、MyBatis、PageHelperを統合し、動的なページネーション表示を実現しました。今後は追加・編集・削除機能の実装と、トランザクション管理の導入を予定しています。