No projeto, preciso fazer um Spring Boot combinado com o modelo de front-end Thymeleaf, combinado com JPA para obter o efeito de demonstração de paginação. Quando fiz isso, encontrei alguns problemas. Também verifiquei muitos documentos existentes na Internet e descobri que não há muitas implementações full-stack. Portanto, aqui postarei minha abordagem, todo o código e etapas para sua referência .
1 Crie um projeto e use pom.xml para introduzir dependências
Aqui, um Maven denominado ThymeleafWithDB será criado e os seguintes pacotes de dependência serão introduzidos em 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>
Neste projeto, a tabela de inventário de estoque correspondente é mostrada abaixo.
| Nome do campo |
Tipos de |
Descrição |
| identificação |
int |
Chave primária |
| nome |
varchar |
Nome de estoque de mercadorias |
| num |
int |
Quantidade de estoque |
| Descrição |
varchar |
Descrição das mercadorias em estoque |
2 escrever classe de inicialização
Esta classe é bastante satisfatória, o código é o seguinte.
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 Na classe do controlador, adicione um método para oferecer suporte à paginação
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 }
Ao definir os parâmetros do método nas linhas 2 e 3, uma vez que o parâmetro pageSize que representa o pageNum da página atual e o número de dados por página é obtido da solicitação de url na forma de um parâmetro get, é necessário adicionar @RequestParam before Note, caso contrário, você não poderá obter esses dois parâmetros da solicitação.
Na quarta linha do método, o método getStockListByPage do objeto stockService é chamado e os dados na página atual são obtidos quando os parâmetros de paginação são passados. Ao mesmo tempo, para depuração, as informações da página atual e o número de cada página também são reproduzidas na 5ª e 6ª linhas.
Depois de obter os dados da página atual, esse método usa o método da linha 9 para adicioná-lo ao objeto modelAndView e, na linha 10, os dados são retornados à exibição listByPage por meio desse objeto.
4 Escrevendo métodos de lógica de negócios
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 }
Na segunda linha deste método, o objeto Sort é usado para definir o método de classificação de "ordem crescente por ID" e, em seguida, o objeto PageRequest na terceira linha é usado para definir o método de paginação, onde o pageNum e o pageNum de os dados iniciais são definidos.O valor pageSize dos dados exibidos em cada página vem de parâmetros externos.
Depois de determinar o método de classificação e paginação, na linha 4, este método chama o método findAll do objeto do tipo PagingAndSortingRepository stockRepo para solicitar a tabela de dados de estoque do MySQL de acordo com o método de paginação e classificação encapsulado no parâmetro Dados pagináveis e retornar os dados obtidos por meio da instrução de retorno na linha 5.
5 Escreva classe 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 você pode ver no código da linha 6, a classe Repo implementa a interface PagingAndSortingRepository que contém funções de paginação e classificação em JPA. Como o método findAll chamado em StockService foi encapsulado na interface JPA, aqui, na classe StockRepo, você nem mesmo precisa escrever código.
6 Grave os parâmetros de configuração de JPA e Thymeleaf no arquivo 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 eles, no código das linhas 1 a 10, as definições relevantes de JPA e MySQL são fornecidas, e no código das linhas 11 a 17, os parâmetros do modelo Thymeleaf.
Os parâmetros de configuração usados aqui foram explicados no artigo anterior, mas preste atenção ao recuo da 2ª e 11ª linhas. De acordo com o formato de recuo do arquivo de configuração yml, o thymeleaf na 11ª linha é na verdade o mesmo que a linha 2. O jpa está no mesmo nível e todos eles pertencem à configuração secundária da mola na linha 1.
7 Adicione a página listByPage.html para obter o efeito de paginação
De acordo com a configuração, o arquivo deve ser colocado no diretório resources / templates.O código específico é o seguinte.
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>
No elemento de atributo <div> da linha 22 à linha 37, é adicionado o efeito da paginação.As instruções específicas são as seguintes.
- No código da linha 25, passe o código: href = "'/ listByPage? PageNum = 0'", na forma de parâmetro url, para o método listByPage da classe do controlador, passando um parâmetro com pageNum de 0 para exibir o dados da página inicial.
- Antes de exibir o efeito da "página anterior", é necessário determinar se o objeto de ações contém os dados da página anterior até o dia: se o código na linha 27. Em caso afirmativo, exibir a "página anterior" através do código na linha 28 "Link, preste atenção aos parâmetros correspondentes ao link" página anterior "aqui, para que você possa obter os dados da página anterior através deste link.
- O método de exibição da "próxima página" é muito semelhante ao de exibição da "página anterior". Em primeiro lugar, th: if é usado para determinar se há dados na próxima página, e então os dados na próxima página são obtidos através do link.
- No código da linha 34, os dados da última página são obtidos através do código th: href = "'/ listByPage? PageNum =' + $ {stocks.getTotalPages () - 1}". Observe que o pageNum no url é usado aqui O valor do parâmetro de, obtém os dados da última página.
8 efeito de observação
Depois de escrever, inicie o projeto Neste momento, se você inserir http: // localhost: 8080 / listByPage no navegador, você pode ver o efeito conforme mostrado na figura abaixo.
Como você pode ver, há 3 dados em cada página da figura acima, e o link de paginação correspondente é exibido abaixo dos dados. Como é a primeira página, não há link para a "página anterior". Se você clicar no link "Próxima Página" da imagem acima, poderá ver o efeito do salto de página, conforme mostrado na imagem abaixo.
A partir disso, você pode não apenas ver as mudanças de dados na página, mas também ver que na URL, a próxima página de dados é recuperada carregando o parâmetro pageNum. E, como os estoques de parâmetros já contêm os dados da "página anterior", você ainda pode ver o link correspondente. Da mesma forma, você também pode clicar nos links "Home", "Next" e "Last Page" para observar os efeitos correspondentes.