【springboot】13、Thymeleaf

不念不忘少年蓝@ 2023-09-23 13:59 81阅读 0赞

### 文章目录 ###

*  基本介绍
 *   *  Thymeleaf是什么
     *  Thymeleaf的优点
     *  Thymeleaf的缺点
 *  机制说明
 *  Thymeleaf 语法
 *   *  表达式
     *  字面量
     *  文本操作
     *  运算符
     *  th属性
     *  迭代
     *  条件运算
 *  Thymeleaf注意事项
 *  Thymeleaf实例运用
 *   *  环境准备
     *  代码实现
     *  测试
 *  总结

# 基本介绍 #

## Thymeleaf是什么 ##

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

## Thymeleaf的优点 ##

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

## Thymeleaf的缺点 ##

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

# 机制说明 #

1.  Thymeleaf 是服务器渲染技术, 页面数据是在服务端进行渲染的
2.  比如: manage.html 中一段 thymeleaf 代码, 是在用户请求该页面时，由thymeleaf 模板  
    引擎完成处理的(在服务端完成), 并将结果页面返回.
3.  使用了 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\}|

## 运算符 ##

1.  数学运算  
    运算符: + , - ,\*, / , %
2.  布尔运算  
    运算符: and , or 一元运算: ! , not
3.  比较运算  
    比较: > , < , >= , <= ( gt , lt , ge , le )等式: == , != ( eq , ne )
4.  条件运算  
    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][https_www.thymeleaf.org_doc_tutorials_3.0_usingthymeleaf.html_using-theach]  
![在这里插入图片描述][b69ca76f6fb743fea7964db866d3b513.png]

## 条件运算 ##

我们使用th:if或者th:switch，官方文档为[https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html\#conditional-evaluation][https_www.thymeleaf.org_doc_tutorials_3.0_usingthymeleaf.html_conditional-evaluation]  
![在这里插入图片描述][809bd9ea978e465d890656642d8035e7.png]  
![在这里插入图片描述][e5b1555e9ccf423bbc767fecffef774e.png]

# Thymeleaf注意事项 #

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

# 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自动配置类  
![在这里插入图片描述][3c11aa774cdd4ab4882cb43856d44dc3.png]

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

![ThymeleafProperties][]  
![在这里插入图片描述][b931862d87c34446ab131fdf4cae86f6.png]

## 代码实现 ##

创建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>

## 测试 ##

我们启动项目，访问[http://localhost:8080/login][http_localhost_8080_login]  
![在这里插入图片描述][ef1559974e76467ca8483c2790097420.png]  
输入错误的密码(我人物qianshu就是正确的密码，用户名随意)。  
![在这里插入图片描述][f7ff217546b2405398243e519f5916b7.png]

输入正确的密码(qianshu)，跳转到管理界面  
![在这里插入图片描述][f9f557e4b4844eae8eb32a18fd06d00e.png]

如果我们没有登录就直接访问，显示如下  
![在这里插入图片描述][eee2550f8f3f4b8c84b7045a25fedb93.png]  
到此，功能就基本完成了

# 总结 #

现在基本都是前后端分离了，这些内容了解一下就好，如果以后用到，那么直接去查官方文档即可，也比较简单

[https_www.thymeleaf.org_doc_tutorials_3.0_usingthymeleaf.html_using-theach]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#using-theach
[b69ca76f6fb743fea7964db866d3b513.png]: https://img-blog.csdnimg.cn/b69ca76f6fb743fea7964db866d3b513.png
[https_www.thymeleaf.org_doc_tutorials_3.0_usingthymeleaf.html_conditional-evaluation]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#conditional-evaluation
[809bd9ea978e465d890656642d8035e7.png]: https://img-blog.csdnimg.cn/809bd9ea978e465d890656642d8035e7.png
[e5b1555e9ccf423bbc767fecffef774e.png]: https://img-blog.csdnimg.cn/e5b1555e9ccf423bbc767fecffef774e.png
[3c11aa774cdd4ab4882cb43856d44dc3.png]: https://img-blog.csdnimg.cn/3c11aa774cdd4ab4882cb43856d44dc3.png
[ThymeleafProperties]: https://img-blog.csdnimg.cn/952debdbafad4f3f88e5258dec9e1c91.png
[b931862d87c34446ab131fdf4cae86f6.png]: https://img-blog.csdnimg.cn/b931862d87c34446ab131fdf4cae86f6.png
[http_localhost_8080_login]: http://localhost:8080/login
[ef1559974e76467ca8483c2790097420.png]: https://img-blog.csdnimg.cn/ef1559974e76467ca8483c2790097420.png
[f7ff217546b2405398243e519f5916b7.png]: https://img-blog.csdnimg.cn/f7ff217546b2405398243e519f5916b7.png
[f9f557e4b4844eae8eb32a18fd06d00e.png]: https://img-blog.csdnimg.cn/f9f557e4b4844eae8eb32a18fd06d00e.png
[eee2550f8f3f4b8c84b7045a25fedb93.png]: https://img-blog.csdnimg.cn/eee2550f8f3f4b8c84b7045a25fedb93.png