Home > Article > Java > How to use SpringBoot+Thymeleaf based on HTML5 modern template engine

How to use SpringBoot+Thymeleaf based on HTML5 modern template engine

WBOYforward: 2023-05-15 20:28:04720browse

Get started

1.Introduce dependencies

SpringBoot provides Thymeleaf's Starter by default, just simply introduce dependencies. Can.

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

The current default version is 2.1. If you want to upgrade the version to 3.0, you can modify it like this.

  <properties>
    <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
  </properties>

In order to facilitate development, the project case uses the hot deployment tool dev-tools, so that after we modify the page, IDEA will automatically load, thereby achieving the effect of hot update.

   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <scope>runtime</scope>
    </dependency>

Note: Since IDEA turns off hot deployment by default, some settings need to be made to make it effective. Solution: First hold down Ctrl Shift Alt / then enter the Registry, and then check compiler.automake.allow.when.app.running. In addition, Build->Compiler should also check Build Project automatically.

2. Add related configuration

Thymeleaf has page caching enabled by default. When developing, caching should be turned off. In addition, we usually also specify the storage path of the page. (The default is classpath:/templates/)

application.yml 配置如下：
spring:
 thymeleaf:
  cache: false #关闭缓存
  prefix: classpath:/views/ #添加路径前缀

3. Writing HTML

Writing Thymeleaf is no different from writing HTML5 pages. The biggest change is the use of extended attributes ( th:xx) to interact with the server for data and retain the original page style, which is also the style that Thymeleaf recommends. For example, in the following simple case, after starting the project, we found that the page jumped to the link of the Jianshu, which also verified Thymeleaf's excellent ability to cover native page data.

Page code:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Thymeleaf</title>
</head>
<body>
  <h3>欢迎使用Thymeleaf!!</h3>
  <a href="http://www.baidu.com" rel="external nofollow" th:href="${info}" rel="external nofollow" >戳我有惊喜</a>
</body>
</html>

Backend code:

@Controller
public class UserController {

  @GetMapping("/")
  public String index(Model model) {
    model.addAttribute("info", "user/list");
    return "index";
  }

  @GetMapping("/user")
  public String hehe(Model model) {
    model.addAttribute("user", new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
    return "user";
  }

  @GetMapping("/user/list")
  public String userlist(Model model) {
    List<User> userList = new ArrayList<>();
    userList.add(new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
    userList.add(new User(UUID.randomUUID().toString(), "kumamon", "123456"));
    userList.add(new User(UUID.randomUUID().toString(), "admin", "admin"));
    model.addAttribute("userList", userList);
    return "userList";
  }

}

Now we try to backfill a form to display single user information.

<!-- 使用th:object 搭配*{} 可以省略对象名 -->
<form action="/" th:object="${user}" >
  <input type="hidden" name="userId" th:value="*{userId}" />
  <input type="text" name="username" th:value="*{username}" />
  <input type="text" name="password" th:value="*{password}" />
</form>

Next, we enter a more complex case, such as displaying a user list information, and traversing batches of users can be completed without writing new tags.

<h3>用户列表</h3>
<!--说明： th:each="obj,stat:${objects}" 分别代表单个实例,状态(可省略),待遍历对象-->
<div th:each="user:${userList}">
  <input type="hidden" name="userId" th:value="${user.userId}"/>
  用户姓名：<input type="text" name="password" th:value="${user.username}"/>
  登录密码：<input type="text" name="username" th:value="${user.password}"/>
</div>

The above is the detailed content of How to use SpringBoot+Thymeleaf based on HTML5 modern template engine. For more information, please follow other related articles on the PHP Chinese website!

html5 html th idea

Statement：

This article is reproduced at:yisu.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to implement springboot vue interface test definition editing functionNext article：How to implement springboot vue interface test definition editing function

See more

How to use SpringBoot+Thymeleaf based on HTML5 modern template engine

Related articles