SpringBoot+Thymeleaf based on HTML5 modern template engine method-javaTutorial-php.cn

Home

Java

javaTutorial

SpringBoot+Thymeleaf based on HTML5 modern template engine method

PHPz

May 12, 2023 pm 03:13 PM

html5 springboot thymeleaf

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>

Copy after login

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>

Copy after login

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>

Copy after login

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/ #添加路径前缀

Copy after login

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>

Copy after login

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";
  }

}

Copy after login

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>

Copy after login

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>

Copy after login

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn