このプロジェクトでは、ページングのデモンストレーション効果を実現するために、SpringBootをThymeleafフロントエンドテンプレートと組み合わせてJPAと組み合わせて作成する必要があります。それを行ったとき、いくつかの問題が見つかりました。また、インターネット上の既存のドキュメントをたくさんチェックしたところ、フルスタックの実装があまりないことがわかりました。ここでは、私のアプローチ、すべてのコード、および参照用の手順を投稿します。 。
1プロジェクトを作成し、pom.xmlを使用して依存関係を導入します
ここでは、ThymeleafWithDBという名前のMavenが作成され、次の依存関係パッケージがpom.xmlに導入されます。
1 <dependencies>
2 <dependency>
3 <groupId>org.springframework.boot</groupId>
4 <artifactId>spring-boot-starter-web</artifactId>
5 </dependency>
6 <dependency>
7 <groupId>org.springframework.boot</groupId>
8 <artifactId>spring-boot-starter-thymeleaf</artifactId>
9 </dependency>
10 </dependencies>
このプロジェクトでは、対応する在庫在庫テーブルを以下に示します。
| フィールド名 |
の種類 |
説明 |
| id |
int |
主キー |
| 名前 |
varchar |
在庫品名 |
| 1つに |
int |
在庫数量 |
| 説明 |
varchar |
在庫品の説明 |
2スタートアップクラスを書く
このクラスは非常に満足のいくもので、コードは次のとおりです。
1 package prj;
2 import org.springframework.boot.SpringApplication;
3 import org.springframework.boot.autoconfigure.SpringBootApplication;
4 @SpringBootApplication
5 public class SpringBootApp {
6 public static void main(String[] args) {
7 SpringApplication.run(SpringBootApp.class, args);
8 }
9 }
3コントローラークラスに、ページングをサポートするメソッドを追加します
1 @RequestMapping("/listByPage")
2 public ModelAndView listByPage(@RequestParam(value = "pageNum", defaultValue = "0") int pageNum,
3 @RequestParam(value = "pageSize", defaultValue = "3") int pageSize) {
4 Page<Stock> stocks=stockService.getStockListByPage(pageNum, pageSize);
5 System.out.println("total page:" + stocks.getTotalPages());
6 System.out.println("current Page：" + pageNum);
7 ModelAndView modelAndView = new ModelAndView("listByPage");
8 //传递参数
9 modelAndView.addObject("stocks",stocks);
10 return modelAndView;
11 }
2行目と3行目でメソッドのパラメーターを定義する場合、現在のページのpageNumとページあたりのデータ数を表すpageSizeパラメーターは、getパラメーターの形式でurlリクエストから取得されるため、追加する必要があります。注の前に@RequestParamを指定しないと、リクエストからこれら2つのパラメーターを取得できません。
メソッドの4行目では、stockServiceオブジェクトのgetStockListByPageメソッドが呼び出され、ページングパラメーターが渡されたときに現在のページのデータが取得されます。同時に、デバッグのために、現在のページの情報と各ページの番号も5行目と6行目に出力されます。
現在のページのデータを取得した後、このメソッドは9行目のメソッドを使用してそれをmodelAndViewオブジェクトに追加し、10行目でデータはこのオブジェクトを介してlistByPageビューに返されます。
4ビジネスロジックメソッドの記述
1 public Page<Stock> getStockListByPage(int pageNum, int pageSize) {
2 Sort sort = new Sort(Sort.Direction.ASC , "ID");
3 Pageable pageable = PageRequest.of(pageNum, pageSize, sort);
4 Page<Stock> stocks = stockRepo.findAll(pageable);
5 return stocks;
6 }
このメソッドの2行目では、Sortオブジェクトを使用して「IDによる昇順」の並べ替えメソッドを定義し、3行目のPageRequestオブジェクトを使用してページングメソッドを定義しています。開始データが定義されます。各ページに表示されるデータのpageSize値は、外部パラメーターから取得されます。
並べ替えとページングのメソッドを決定した後、4行目で、このメソッドはPagingAndSortingRepositoryタイプのオブジェクトstockRepoのfindAllメソッドを呼び出して、パラメーターpageable Dataにカプセル化されたページングと並べ替えのメソッドに従ってMySQLストックデータテーブルを要求し、取得したデータを返します。 5行目のreturnステートメントを介して。
5レポクラスを書く
1 package prj.repo;
2 import org.springframework.data.repository.PagingAndSortingRepository;
3 import org.springframework.stereotype.Component;
4 import prj.model.Stock;
5 @Component
6 public interface StockRepo extends PagingAndSortingRepository<Stock, Integer> { }
6行目のコードからわかるように、RepoクラスはJPAのページング関数と並べ替え関数を含むPagingAndSortingRepositoryインターフェイスを実装しています。StockServiceで呼び出されるfindAllメソッドはJPAインターフェイスにカプセル化されているため、ここではStockRepoクラスで次のようになります。コードを書く必要さえありません。
6JPAとThymeleafの構成パラメーターをapplication.ymlファイルに書き込みます
1 spring:
2 jpa:
3 show-sql: true
4 hibernate:
5 dll-auto: validate
6 datasource:
7 url: jdbc:mysql://localhost:3306/stock?serverTimezone=GMT
8 username: root
9 password: 123456
10 driver-class-name: com.mysql.jdbc.Driver
11 thymeleaf:
12 enabled: true
13 content-type: text/html
14 check-template-location: true
15 cache: false
16 prefix: classpath:/templates/
17 suffix: .html
その中で、1行目から10行目までのコードには、JPAとMySQLの関連する定義が示され、11行目から17行目までのコードには、Thymeleafテンプレートのパラメーターが示されています。
ここで使用する構成パラメーターは、前の記事で実際に説明したものですが、2行目と11行目のインデントに注意してください。yml構成ファイルのインデント形式によると、11行目のthymeleafは実際にはと同じです。 2行目。jpaは同じレベルにあり、すべて1行目のspringの子構成に属しています。
7 listByPage.htmlページを追加して、ページングの効果を実現します
構成に応じて、ファイルをresources / templatesディレクトリに配置する必要があります。具体的なコードは次のとおりです。
1 <!DOCTYPE html>
2 <html lang="en" xmlns:th="http://www.thymeleaf.org">
3 <head>
4 <meta charset="UTF-8">
5 <title>库存列表</title>
6 </head>
7 <body>
8 <table border="2">
9 <tr>
10 <td>库存编号</td>
11 <td>库存货物</td>
12 <td>数量</td>
13 <td>描述</td>
14 </tr>
15 <tr th:each="stock : ${stocks}">
16 <td th:text="${stock.ID}"></td>
17 <td th:text="${stock.name}"></td>
18 <td th:text="${stock.num}"></td>
19 <td th:text="${stock.description}"></td>
20 </tr>
21 </table>
22 <div>
23 <ul>
24 <li>
25 <a th:href="'/listByPage?pageNum=0'">首页</a>
26 </li>
27 <li th:if="${stocks.hasPrevious()}">
28 <a th:href="'/listByPage?pageNum=' + ${stocks.previousPageable().getPageNumber()}" th:text="上一页"></a>
29 </li>
30 <li th:if="${stocks.hasNext()}">
31 <a th:href="'/listByPage?pageNum=' + ${stocks.nextPageable().getPageNumber()}" th:text="下一页"></a>
32 </li>
33 <li>
34 <a th:href="'/listByPage?pageNum=' + ${stocks.getTotalPages() - 1}">尾页</a>
35 </li>
36 </ul>
37 </div>
38 </body>
39 </html>
22行目から37行目までの<div>属性要素に、ページングの効果が追加されています。具体的な手順は次のとおりです。
- 25行目のコードで、th：href = "'/ listByPage？pageNum = 0'"コードをurlパラメーターの形式でコントローラークラスのlistByPageメソッドに渡し、pageNumが0のパラメーターを渡してホームページデータ。
- 「前のページ」の効果を表示する前に、stocksオブジェクトに前のページのデータが含まれているかどうかを27行目のth：ifコードで確認する必要があります。含まれている場合は、28行目のコードで「前のページ」を表示します。 「リンク、ここの「前のページ」リンクに対応するパラメータに注意してください。このリンクから前のページのデータを取得できます。
- 「次のページ」の表示方法は「前のページ」の表示方法と非常によく似ています。まず、th：ifを使用して次のページにデータがあるかどうかを判断し、次に次のページのデータを取得します。リンクを介して。
- 34行目のコードでは、最後のページのデータはコードth：href = "'/ listByPage？pageNum =' + $ {stocks.getTotalPages（）-1}"を介して取得されています。ここではurlが使用されます。のパラメータ値は、最後のページのデータを取得します。
8観察効果
書き込み後、プロジェクトを開始します。このとき、ブラウザにhttp：// localhost：8080 / listByPageと入力すると、下図のような効果が見られます。
ご覧のとおり、上図の各ページには3つのデータがあり、データの下に対応するページングリンクが表示されています。最初のページであるため、「前のページ」へのリンクはありません。上の写真の「次のページ」リンクをクリックすると、下の写真に示すように、ページジャンプの効果を確認できます。
これにより、ページ上のデータの変更を確認できるだけでなく、URLで、pageNumパラメーターを指定してデータの次のページが取得されることも確認できます。また、パラメータstocksにはすでに「前のページ」データが含まれているため、対応するリンクを引き続き表示できます。同様に、「ホーム」、「次へ」、「最後のページ」のリンクをクリックして、対応する効果を確認することもできます。