thymeleaf introduction
ThymeleafIt is a modern server-side Java template engine. Unlike other templates, Thymeleafthe syntax is closer to HTML and has a high degree of scalability. For details, please visit the official website .
Features
- It supports running in a networkless environment, because it supports html prototype, and then add additional attributes in the html tag to achieve the template + data display mode. The browser will ignore undefined tag attributes when interpreting html, so the thymeleaf template can be run statically; when data is returned to the page, the Thymeleaf tag will dynamically replace the static content, so that the page is displayed dynamically. So it allows the front-end lady to view the static effect of the page in the browser, and the programmer brother to view the dynamic page effect with data on the server.
- Out of the box, in order to
Springprovide dialects, templates can be directly applied to achieve theJSTL、 OGNLexpression effect, avoidingJSTL、 OGNLthe trouble of modifying tags every day due to the application of templates . At the same time, developers can extend custom dialects. SpringBootThe official recommended template provides an optional integration module (spring-boot-starter-thymeleaf), which can quickly implement functions such as form binding, attribute editor, and internationalization.
use
First pom.xml , add a thymeleaf dependency on the template in
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>Then create a ThymeleafController jump that maps the HTTP request to the page. Two methods are written below. The first is more intuitive and elegant, the second is relatively common and has less code, and caters to struts2friends from the jump ...
- In order to simplify the writing of @RequestMapping (method = RequestMethod.XXX) after Spring 4.3, it was wrapped in a layer, which is now 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
}
}Finally src/main/resources/templates , create a index.html template file named in the directory , you can see thymeleaf that the data is dynamically bound by adding additional attributes in the label
<!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>Static effect
Double-click to open, index.html you can see the following static effect, and it does not display the contents of a bunch of tags like other templates, but renders the static page normally
dynamic effect
Type in the browser: http: // localhost: 8080 / index You can see the effect after rendering, the real dynamic separation
Tips
- Template hot deployment
When IntelliJ IDEA using the thymeleaf template in, I found that every time I modify the static page, I need to restart it to take effect. This is very unfriendly. Baidu found that it was the ghost of the default configuration. In order to improve the response speed, the template is cached by default . If yes, please in the development of the spring.thymeleaf.cache property is set to false . Press Ctrl + Shift + F9 every time you modify the static content to reload ...
- Modify the default
favicon.icoicon
By default, use springbootalways see a leaf, it is because we do not have to configure your own ico cause, the solution is very simple, only need to src/main/static/be placed under a directory called favicon.icoon it
default allocation
SpringBoot By default, the following default configuration work is done for us. Familiar with the default configuration can better solve the problem during the development process.
