基本介绍

Thymeleaf是什么

Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，可完全替代 JSP。Thymeleaf 是一个 java 类库，他是一个 xml/xhtml/html5 的模板引擎，可以作为 mvc 的web 应用的 view 层

Thymeleaf的优点

实现 JSTL、 OGNL 表达式效果，语法相似, java 程序员上手快
Thymeleaf 模版页面无需服务器渲染，也可以被浏览器运行，页面简洁。
SpringBoot 支持 FreeMarker、Thymeleaf、veocity 。

Thymeleaf的缺点

Thtmeleaf不是一个高性能的引擎，适用于单体应用，如果要做一个高并发的应用, 选择前后端分离更好

机制说明

Thymeleaf 是服务器渲染技术, 页面数据是在服务端进行渲染的
比如: manage.html 中一段 thymeleaf 代码, 是在用户请求该页面时，由thymeleaf 模板
引擎完成处理的(在服务端完成), 并将结果页面返回.
使用了 Thymeleaf , 并不是前后端分离.

Thymeleaf 语法

表达式

1、变量取值${…}：获取请求域、session 域、对象等值
2、选择变量 *{…}：获取上下文对象值
3、消息 #{…} ：获取国际化等值
4、链接 @{…} ：生成链接
5、片段表达式 ~{…} ： jsp:include 作用，引入公共页面片段

字面量

1、文本值: ‘hsp edu’ , ‘hello’ ,…数字: 10 , 7 , 36.8 , …布尔值: true , false
2、空值: null
3、变量： name，age，… 变量不能有空格

文本操作

字符串拼接: +
变量替换: |age= ${age}|

运算符

数学运算
运算符: + , – ,*, / , %
布尔运算
运算符: and , or 一元运算: ! , not
比较运算
比较: > , < , >= , <= ( gt , lt , ge , le )等式: == , != ( eq , ne )
条件运算
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)

th属性

html 有的属性，Thymeleaf 基本都有，而常用的属性大概有七八个。其中 th 属性执行的优
先级从 1~8，数字越低优先级越高

● th:text ：设置当前元素的文本内容，相同功能的还有 th:utext，两者的区别在于前
者不会转义 html 标签，后者会。优先级不高：order=7
● th:value：设置当前元素的 value 值，类似修改指定属性的还有 th:src，th:href。优先
级不高：order=6
● th:each：遍历循环元素，和 th:text 或 th:value 一起使用。注意该属性修饰的标签位
置，详细往后看。优先级很高：order=2
● th:if：条件判断，类似的还有 th:unless，th:switch，th:case。优先级较高：order=3
● th:insert：代码块引入，类似的还有 th:replace，th:include，三者的区别较大，若使
用不恰当会破坏 html 结构，常用于公共代码块提取的场景。优先级最高：order=1
● th:fragment：定义代码块，方便被 th:insert 引用。优先级最低：order=8
● th:object：声明变量，一般和*{}一起配合使用，达到偷懒的效果。优先级一般：order=4
● th:attr：修改任意属性，实际开发中用的较少，因为有丰富的其他 th 属性帮忙，类
似的还有 th:attrappend，th:attrprepend。优先级一般：order=5

迭代

我们使用th:each完成迭代，官方文档为https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#using-theach

条件运算

我们使用th:if或者th:switch，官方文档为https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#conditional-evaluation

Thymeleaf注意事项

若要使用 Thymeleaf 语法，首先要声明名称空间：xmlns:th=“http://www.thymeleaf.org”
设置文本内容 th:text，设置 input 的值 th:value，循环输出 th:each，条件判断 th:if，插入代码块 th:insert，定义代码块 th:fragment，声明变量 th:object
th:each 的用法需要格外注意，打个比方：如果你要循环一个 div 中的 p 标签，则 th:each
属性必须放在 p 标签上。若你将 th:each 属性放在 div 上，则循环的是将整个 div。
变量表达式中提供了很多的内置方法，该内置方法是用#开头，请不要与#{}消息表达式
弄混。

Thymeleaf实例运用

我们使用springboot+Thymeleaf完成一个简单的用户登录功能，实现登录失败消息回显，登录之后展示用户信息

环境准备

首先引入相关的jar包

    <parent>
        <artifactId>spring-boot-starter-parent</artifactId>
        <groupId>org.springframework.boot</groupId>
        <version>2.5.3</version>
    </parent>
    <dependencies>
        <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>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>

我们引入了thymeleaf之后，会有一个ThymeleafAutoConfiguration自动配置类

里面有一个ThymeleafProperties配置类，里面就有关于Thymeleaf的配置，可以发现，我们创建的html文件需要放在templates目录下，所以，我们创建的登录页面以及管理界面就放在resource/templates目录下

代码实现

创建User，Admin

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    private Integer id;
    private String name;
    private String password;
    private Integer age;
    private String email;
}

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Admin {
    private String username;
    private String password;
}

创建一个AdminController来处理登录

@Controller
public class AdminController {

    @RequestMapping("/login")
    public String login() {
        return "login";
    }

    @RequestMapping("/checkLogin")
    public String checkLogin(Admin admin, Model model, HttpSession session) {
        if ("qianshu".equals(admin.getPassword())) {
            session.setAttribute("admin", admin);
            return "redirect:handleManage";
        }
        model.addAttribute("errorMessage", "账号或密码错误");
        return "login";
    }

    @RequestMapping("/handleManage")
    public String handleManage(Model model, HttpSession session) {
        if (session.getAttribute("admin") != null) {
            ArrayList<User> users = new ArrayList<>();
            users.add(new User(1, "关羽~", "666666", 20, "gy@sohu.com"));
            users.add(new User(2, "张飞", "666666", 30, "zf@sohu.com"));
            users.add(new User(3, "赵云", "666666", 22, "zy@sohu.com"));
            users.add(new User(4, "马超", "666666", 28, "mc@sohu.com"));
            users.add(new User(5, "黄忠", "666666", 50, "hz@sohu.com"));
            model.addAttribute("users", users);
            return "manage";
        } else {
            model.addAttribute("errorMessage", "非法访问");
            return "login";
        }
    }
}

login页面如下

<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body bgcolor="#CED3FE">
<hr/>
<div style="text-align: center">
    <h1>用户登陆</h1>
    <form action="/checkLogin" method="post">
        <label style="color: red" th:text="${errorMessage}"></label><br/>
        用户名:<input type="text" style="width:150px" name="username"/><br/><br/>
        密 码 :<input type="password" style="width:150px" name="password"/><br/><br/>
        <input type="submit" value="登录"/>
        <input type="reset" value="重新填写"/>
    </form>
</div>
<hr/>
</body>
</html>

manage页面如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
</head>
<body bgcolor="#CED3FE">
<a href='#'>返回管理界面</a> <a href='#'>安全退出</a> 欢迎您:[[${session.admin.username}]]
<hr/>
<div style="text-align: center">
    <h1>管理雇员~</h1>
    <table border="1px" cellspacing="0" bordercolor="green" style="width:800px;margin:auto">
        <tr bgcolor="pink">
            <td>id</td>
            <td>name</td>
            <td>password</td>
            <th>age</th>
            <td>email</td>
        </tr>
        <tr th:each="user:${users}" >
            <td>[[${user.id}]]</td>
            <td>[[${user.name}]]</td>
            <td>[[${user.password}]]</td>
            <td>[[${user.age}]]</td>
            <td>[[${user.email}]]</td>
        </tr>
    </table>
    <br/>
</div>
<hr/>
</body>
</html>