SpringBoot+Thymeleaf based on HTML5 modern template engine method

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:

nbsp;html>


  <title>Thymeleaf</title>


  <h3 id="欢迎使用Thymeleaf">欢迎使用Thymeleaf!!</h3>
  <a>戳我有惊喜</a>

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

}</user>

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

<!-- 使用th:object 搭配*{} 可以省略对象名 -->

        

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 id="用户列表">用户列表</h3>
<!--说明： th:each="obj,stat:${objects}" 分别代表单个实例,状态(可省略),待遍历对象-->
<div>
  <input>
  用户姓名：<input>
  登录密码：<input>
</div>

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!