在Spring Boot中使用Thymeleaf模板引擎

时间:2022-11-17 17:40:55

官网关于thymeleaf的介绍已经很详细了!总结起来就一句话:thymeleaf使得同一个页面模板对前端和后端都很友好(双赢),对于前端来说它就是一个静态页面,对于后端来说它便是动态页面!

thymeleaf是怎么做到这一点的呢? 其实thmeleaf提供了一堆侵入性很小的标签给后端人员使用,这些标签的插入位置全部都作为html标签的属性存在。对于浏览器来说这些非HTML标准属性在渲染的时候会被浏览器自动忽略,因此对于前端人员来说它就是一个静态页面;而后端通过thymeleaf引擎渲染的时候这些标签就会被识别,因此对于后端人员来说它又是动态页面!

下面通过一个简单的例子介绍如何在Spring Boot项目中使用thymeleaf。

thymeleaf的配置


1、在pom.xml文件中添加依赖:

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

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

其中,spring-boot-starter-web用于支持web开发,spring-boot-starter-thymeleaf用于支持thymeleaf模板引擎。

2、配置属性

其实完全可以直接使用,不用配置。但是Spring Boot官方文档建议在开发时将缓存关闭,那就在application.properties文件中加入下面这行就行了:

spring.thymeleaf.cache=false

一个简单的例子


1、编写User类

package com.tao.springboot.domain;

public class User {

    private String name;
    private int age;

    public User(String name, int age) {
        super();
        this.name = name;
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

}

2、编写Controller类

package com.tao.springboot.web.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.tao.springboot.domain.User;

@Controller
@RequestMapping("/user")
public class UserController {

    @RequestMapping(value = "/list", method = RequestMethod.GET)
    public String userList(Model model) throws Exception {
         model.addAttribute("title", "用户列表");
         model.addAttribute("hello","Hello, Spring Boot!");
         List<User> userList = new ArrayList<>();
         userList.add(new User("小明", 25));
         userList.add(new User("小黄", 23));
         model.addAttribute("userList", userList);

         return "/user/list";
    }
}

3、创建thymeleaf模板文件

thymeleaf在Spring Boot中默认的模板配置路径为:src/main/resources/templates,因此我们在resources文件夹下面创建一个templates文件夹,然后创建/user/list.html文件:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8" />
<title th:text="${title}">标题</title>
</head>
<body>
    <h1 th:text="${hello}">hello</h1>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr th:each="user : ${userList}">
            <td th:text="${user.name}">小明</td>
            <td th:text="${user.age}">20</td>
        </tr>
    </table>

    <select>
        <option th:each="user : ${userList}" th:value="${user.name}" th:text="${user.name}">我是默认值</option>
    </select>

</body>
</html>

4、启动程序

在浏览器中输入http://localhost:8080/user/list,访问成功:
在Spring Boot中使用Thymeleaf模板引擎