Spring-Boot integra Thymeleaf

SpringBoot não recomenda o uso de jsp, mas suporta algumas outras tecnologias de mecanismo de template, a recomendação oficial é usar Thymeleaf

Thymeleaf

Thymeleaf é um mecanismo de template semelhante ao Velocity e FreeMarker, que pode substituir completamente o JSP. Comparado com outros mecanismos de modelo, ele tem os seguintes quatro recursos extremamente atraentes:

  • Combinação de dinâmico e estático: o Thymeleaf pode ser executado em ambientes em rede e não em rede, ou seja, permite aos artistas visualizar o efeito estático da página no navegador e também permite ao programador visualizar o efeito da página dinâmica com dados no servidor. Isso ocorre porque ele suporta protótipos html e, em seguida, adiciona atributos adicionais às tags html para obter a exibição de modelo + dados. O navegador ignora atributos de tag indefinidos ao interpretar html, de modo que o modelo thymeleaf pode ser executado estaticamente; quando os dados são retornados à página, a tag Thymeleaf substituirá dinamicamente o conteúdo estático para tornar a página exibida dinamicamente.
  • Fora da caixa: fornece dois dialetos, padrão e padrão de primavera, e pode aplicar modelos diretamente para obter efeitos de expressão JSTL e OGNL, evitando o problema de definir modelos, alterar jstl e alterar tags todos os dias. Ao mesmo tempo, os desenvolvedores também podem estender e criar dialetos personalizados.
  • Suporte multi-dialeto: Thymeleaf fornece dialetos padrão de primavera e um módulo opcional que é perfeitamente integrado com SpringMVC, que pode implementar rapidamente vinculação de formulário, editor de atributo, internacionalização e outras funções.
  • Perfeitamente integrado com SpringBoot, SpringBoot fornece a configuração padrão do Thymeleaf e define o resolvedor de visualização para o Thymeleaf, podemos operar o Thymeleaf como antes de usar jsp. Quase não há diferença no código, ou seja, há uma diferença na sintaxe do modelo.

Vamos usar um caso para integrar Thymeleaf

Escreva o controlador

Escreva um controlador, retorne os dados do usuário, coloque-os no modelo e renderize-os na página no futuro

import com.sunyuqi.domain.User;
import com.sunyuqi.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

@Controller
public class MybatisController {
    
    

    @Autowired
    private UserMapper userMapper;

    @GetMapping("/query")
    public String queryUserList(Model model){
    
    
        List<User> users = userMapper.queryUserList();
        model.addAttribute("users",users);
        return "index";
    }
}

Apresentando o lançador

Apresente diretamente o iniciador:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

SpringBoot irá registrar automaticamente um resolvedor de visualização para Thymeleaf

Semelhante ao InternalViewResolver que analisa JSP, o Thymeleaf também determinará a localização do arquivo de modelo com base no prefixo e sufixo:
Insira a descrição da imagem aqui

  • Prefixo padrão:classpath:/templates/
  • Sufixo padrão:.html

Páginas estáticas

De acordo com o documento acima, o modelo é colocado na pasta de modelos no caminho de classe por padrão, e criamos um novo arquivo html nele:
Insira a descrição da imagem aqui

Escreva um modelo html para renderizar os dados no modelo:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        table {
     
     border-collapse: collapse; font-size: 14px; width: 80%; margin: auto}
        table, th, td {
     
     border: 1px solid darkslategray;padding: 10px}
    </style>
</head>
<body>
<div style="text-align: center">
    <span style="color: darkslategray; font-size: 30px">欢迎光临!</span>
    <hr/>
    <table class="list">
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}">1</td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
            <td th:text="${user.sex}"></td>
        </tr>
    </table>
</div>
</body>
</html>

Observe, altere o namespace de html para: xmlns:th="http://www.thymeleaf.org"haverá um prompt de sintaxe

Sintaxe da folha do timel:

  • $ {} `: Isso é semelhante a el expression, mas na verdade é a sintaxe de ognl, que é mais poderosa do que el expression
  • th-Instrução: th-é realizada usando atributos personalizados em Html5. Se não for H5, pode ser usado em seu data-th-lugar
    • th:each: Semelhante a c:foreachpercorrer uma coleção, mas com uma sintaxe mais concisa
    • th:text: O texto na etiqueta da declaração
      • Por exemplo <td th-text='${user.id}'>1</td>, se user.id tiver um valor, ele substituirá o padrão 1
      • Se não houver valor, o padrão 1 em td será exibido. Esta é a razão pela qual o thymeleaf pode combinar dinâmico e estático. A falha na análise do modelo não afetará o efeito de exibição da página, porque o valor padrão será exibido!

Cache de modelo

O Thymeleaf armazenará em cache o modelo após analisá-lo pela primeira vez, o que melhora muito a capacidade de processamento simultâneo.

Desligue o cache requer configuração

spring.thymeleaf.cache=false

Acho que você gosta

Origin blog.csdn.net/weixin_42494845/article/details/108411408
Recomendado
Clasificación