introducción de hoja de tomillo
ThymeleafEs un moderno motor de plantillas Java del lado del servidor. A diferencia de otras plantillas, Thymeleafla sintaxis está más cerca de HTML y tiene un alto grado de escalabilidad. Para más detalles, visite el sitio web oficial .
Caracteristicas
- Admite la ejecución en un entorno sin red, ya que admite el prototipo html, y luego agrega atributos adicionales en la etiqueta html para lograr el modo de visualización de plantilla + datos. El navegador ignorará los atributos de etiqueta indefinidos al interpretar html, por lo que la plantilla de hoja de tomillo se puede ejecutar estáticamente; cuando los datos se devuelven a la página, la etiqueta de Thymeleaf reemplazará dinámicamente el contenido estático, de modo que la página se muestre dinámicamente. Por lo tanto, permite que la mujer del front-end vea el efecto estático de la página en el navegador y que el hermano programador vea el efecto dinámico de la página con datos en el servidor.
- Fuera de la caja, para
Springproporcionar dialectos, las plantillas se pueden aplicar directamente para lograr elJSTL、 OGNLefecto de expresión, evitandoJSTL、 OGNLla molestia de modificar etiquetas todos los días debido a la aplicación de plantillas . Al mismo tiempo, los desarrolladores pueden extender dialectos personalizados. SpringBootLa plantilla oficial recomendada proporciona un módulo de integración opcional (spring-boot-starter-thymeleaf), que puede implementar rápidamente funciones como enlace de formulario, editor de atributos e internacionalización.
Para utilizar
Primero pom.xml , agregue una thymeleaf dependencia en la plantilla en
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>Luego, cree un ThymeleafController salto que asigne la solicitud HTTP a la página. A continuación se escriben dos métodos. El primero es más intuitivo y elegante, el segundo es relativamente común y tiene menos código, y está dirigido a struts2amigos que saltan del pozo ...
- Para simplificar la escritura de @RequestMapping (method = RequestMethod.XXX) después de Spring 4.3, se envolvió en una capa, que ahora es GetMapping, PostMapping, PutMapping, DeleteMapping, PatchMapping
@Controller
@RequestMapping
public class ThymeleafController {
@GetMapping("/index")
public ModelAndView index() {
ModelAndView view = new ModelAndView();
// 设置跳转的视图 默认映射到 src/main/resources/templates/{viewName}.html
view.setViewName("index");
// 设置属性
view.addObject("title", "我的第一个WEB页面");
view.addObject("desc", "欢迎进入battcn-web 系统");
Author author = new Author();
author.setAge(22);
author.setEmail("[email protected]");
author.setName("唐亚峰");
view.addObject("author", author);
return view;
}
@GetMapping("/index1")
public String index1(HttpServletRequest request) {
// TODO 与上面的写法不同，但是结果一致。
// 设置属性
request.setAttribute("title", "我的第一个WEB页面");
request.setAttribute("desc", "欢迎进入battcn-web 系统");
Author author = new Author();
author.setAge(22);
author.setEmail("[email protected]");
author.setName("唐亚峰");
request.setAttribute("author", author);
// 返回的 index 默认映射到 src/main/resources/templates/xxxx.html
return "index";
}
class Author {
private int age;
private String name;
private String email;
// 省略 get set
}
}Finalmente src/main/resources/templates , cree un index.html archivo de plantilla con nombre en el directorio , puede ver thymeleaf que los datos están vinculados dinámicamente agregando atributos adicionales en la etiqueta
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!-- 可以看到 thymeleaf 是通过在标签里添加额外属性来绑定动态数据的 -->
<title th:text="${title}">Title</title>
<!-- 在/resources/static/js目录下创建一个hello.js 用如下语法依赖即可-->
<script type="text/javascript" th:src="@{/js/hello.js}"></script>
</head>
<body>
<h1 th:text="${desc}">Hello World</h1>
<h2>=====作者信息=====</h2>
<p th:text="${author?.name}"></p>
<p th:text="${author?.age}"></p>
<p th:text="${author?.email}"></p>
</body>
</html>Efecto estático
Haga doble clic para abrir, index.html puede ver el siguiente efecto estático y no muestra el contenido de un montón de etiquetas como otras plantillas, pero muestra la página estática normalmente
Efectos dinámicos
Escriba en el navegador: http: // localhost: 8080 / index Puede ver el efecto después de la representación, la separación dinámica real
Consejos
- Despliegue en caliente de plantillas
Cuando IntelliJ IDEA uso la thymeleaf plantilla en, descubrí que cada vez que modifico la página estática, necesito reiniciarla para que surta efecto. Esto es muy hostil. Baidu descubrió que era el fantasma de la configuración predeterminada. Para mejorar la velocidad de respuesta, la plantilla se almacena en caché de manera predeterminada. . En caso afirmativo, en el desarrollo de la propiedad spring.thymeleaf.cache se establece en false . Presione Ctrl + Shift + F9 cada vez que modifique el contenido estático para recargar ...
- Modificar el
favicon.icoícono predeterminado
Por defecto, el uso springbootsiempre ver una hoja, es porque no tenemos que configurar su propia causa ico, la solución es muy simple, sólo necesita src/main/static/ser incluida en un directorio llamado favicon.icoen él
Configuración por defecto
SpringBoot De manera predeterminada, el siguiente trabajo de configuración predeterminada se realiza para nosotros: estar familiarizado con la configuración predeterminada puede resolver mejor el problema durante el proceso de desarrollo.
