En el proyecto, necesito hacer un Spring Boot combinado con la plantilla de front-end Thymeleaf, combinado con JPA para lograr el efecto de demostración de la paginación. Cuando lo hice, encontré algunos problemas. También revisé muchos documentos existentes en Internet y descubrí que no hay muchas implementaciones de pila completa. Así que aquí publicaré mi enfoque, todo el código y los pasos para su referencia .
1 Cree un proyecto y use pom.xml para introducir dependencias
Aquí, se creará un Maven llamado ThymeleafWithDB y se introducirán los siguientes paquetes de dependencia en 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>
En este proyecto, la tabla de inventario de existencias correspondiente se muestra a continuación.
| Nombre del campo |
Tipos de |
Descripción |
| identificación |
En t |
Clave primaria |
| nombre |
varchar |
Nombre de bienes de inventario |
| en uno |
En t |
Cantidad de inventario |
| descripción |
varchar |
Descripción de bienes de inventario |
2 escribir clase de inicio
Esta clase es bastante satisfactoria, el código es el siguiente.
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 En la clase de controlador, agregue un método para admitir la paginación
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 }
Al definir los parámetros del método en las líneas 2 y 3, dado que el parámetro pageSize que representa el pageNum de la página actual y el número de datos por página se obtiene de la solicitud de url en forma de parámetro get, es necesario agregar @RequestParam antes de Note; de lo contrario, no podrá obtener estos dos parámetros de la solicitud.
En la cuarta línea del método, se llama al método getStockListByPage del objeto stockService y los datos de la página actual se obtienen cuando se pasan los parámetros de paginación. Al mismo tiempo, para la depuración, la información de la página actual y el número de cada página también se emite en la quinta y sexta líneas.
Después de obtener los datos de la página actual, este método usa el método en la línea 9 para agregarlo al objeto modelAndView, y en la línea 10, los datos se devuelven a la vista listByPage a través de este objeto.
4 Escribir métodos de lógica empresarial
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 }
En la segunda línea de este método, el objeto Sort se usa para definir el método de clasificación de "orden ascendente por ID", y luego el objeto PageRequest en la tercera línea se usa para definir el método de paginación, donde pageNum y pageNum de Se definen los datos iniciales El valor pageSize de los datos mostrados en cada página proviene de parámetros externos.
Después de determinar el método de clasificación y paginación, en la línea 4, este método llama al método findAll del objeto de tipo PagingAndSortingRepository stockRepo para solicitar la tabla de datos de stock de MySQL de acuerdo con el método de paginación y clasificación encapsulado en el parámetro Paginable Data, y devolver los datos obtenidos. a través de la declaración de devolución en la línea 5.
5 Escribir clase Repo
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> { }
Como puede ver en el código de la línea 6, la clase Repo implementa la interfaz PagingAndSortingRepository que contiene funciones de paginación y clasificación en JPA. Dado que el método findAll llamado en StockService se ha encapsulado en la interfaz JPA, aquí En la clase StockRepo, ni siquiera es necesario escribir código.
6 Escriba los parámetros de configuración de JPA y Thymeleaf en el archivo 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
Entre ellos, en el código de las líneas 1 a 10, se dan las definiciones relevantes de JPA y MySQL, y en el código de las líneas 11 a 17, se dan los parámetros de la plantilla Thymeleaf.
Los parámetros de configuración utilizados aquí se han explicado en el artículo anterior, pero preste atención a la sangría de las líneas 2 y 11. De acuerdo con el formato de sangría del archivo de configuración yml, la hoja de tomillo en la línea 11 es en realidad la misma que la segunda línea. El jpa está en el mismo nivel, y todos pertenecen a la configuración secundaria del resorte en la línea 1.
7 Agregue la página listByPage.html para lograr el efecto de paginación
Según la configuración, el archivo debe estar ubicado en el directorio resources / templates, el código específico es el siguiente.
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>
En el elemento de atributo <div> de la línea 22 a la línea 37, se agrega el efecto de paginación. Las instrucciones específicas son las siguientes.
- En el código de la línea 25, pase el código th: href = "'/ listByPage? PageNum = 0'", en forma de parámetro url, al método listByPage de la clase del controlador, pasando un parámetro con pageNum de 0 para mostrar el datos de la página de inicio.
- Antes de mostrar el efecto de "página anterior", es necesario determinar si el objeto de existencias contiene los datos de la página anterior a través del código th: if en la línea 27. Si es así, mostrar "página anterior" a través del código en la línea 28 "Enlace, por favor preste atención a los parámetros correspondientes al enlace" página anterior "aquí, para que pueda obtener los datos de la página anterior a través de este enlace.
- El método para mostrar la "página siguiente" es muy similar al de mostrar la "página anterior". En primer lugar, th: if se utiliza para determinar si hay datos en la página siguiente, y luego se obtienen los datos en la página siguiente a través del enlace.
- En el código de la línea 34, los datos de la última página se obtienen a través del código th: href = "'/ listByPage? PageNum =' + $ {stocks.getTotalPages () - 1}". Tenga en cuenta que el pageNum en el url se usa aquí El valor del parámetro de, obtiene los datos de la última página.
8 Efecto de observación
Después de escribir, inicie el proyecto. En este momento, si ingresa http: // localhost: 8080 / listByPage en el navegador, puede ver el efecto como se muestra en la siguiente figura.
Como puede ver, hay 3 piezas de datos en cada página en la figura anterior, y el enlace de paginación correspondiente se muestra debajo de los datos. Dado que es la primera página, no hay un enlace a la "página anterior". Si hace clic en el enlace "Página siguiente" en la imagen de arriba, puede ver el efecto del salto de página, como se muestra en la imagen de abajo.
A partir de esto, no solo puede ver los cambios de datos en la página, sino también ver que en la URL, la siguiente página de datos se recupera llevando el parámetro pageNum. Y, debido a que el parámetro stocks ya contiene los datos de la "página anterior", aún puede ver el enlace correspondiente. Del mismo modo, también puede hacer clic en los enlaces "Inicio", "Siguiente" y "Última página" para observar los efectos correspondientes.