服务器渲染技术-Thymeleaf

1.基本介绍

官方在线文档：Read online 文档下载：Thymeleaf 3.1 PDF, EPUB, MOBI

Thymeleaf 是什么

Thymeleaf是一个现代的服务器端Java模板引擎，适用于Web和独立环境，能够处理HTML，XML，JavaScript，CSS甚至纯文本
Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，可完全替代 JSP
Thymeleaf 是一个 Java 类库，是一个xml/ xhtml/ html5的模板引擎，可以作为 mvc 的 web 应用的 view 层

Thymeleaf 的优点

实现 JSTL、OGNL 表达式效果，语法类似，上手快
Thymeleaf 模板页面无需服务器渲染，也可以被浏览器运行，页面简洁
SpringBoot 支持 FreeMarker、Thymeleaf、Veocity

Thymeleaf 的缺点

Thymeleaf 并不是一个高性能的引擎，适用于单体应用
如果要做一个高并发的应用，选择前后分离更好，比如 Vue + SpringBoot

2.Thymeleaf机制

Thymeleaf 是服务器渲染技术，页面数据是在服务端进行渲染的

例如：某个页面被请求，其中有一段Thymeleaf代码，则 thymeleaf 模板引擎完成处理之后（在服务端完成），才会将页面结果返回。因此使用Thymeleaf，并不是前后端分离。

3.语法

3.1表达式

1.表达式一览

表达式名称	语法	用途
变量取值	`${...}`	获取请求域、session域、对象等值
选择变量	`*{...}`	获取上下文对象值
消息	`#{...}`	获取国际化等值
链接	`@{...}`	生成链接
片段表达式	`~{...}`	jsp:include 作用，引入公共页面片段

2.字面量

文本值：'jack', 'hello', ...

数字：10, 5, 36.8, ...

布尔值：true，false

空值：null

变量：name, age, ...(变量名不能有空格)

3.文本操作

字符串拼接：+

变量替换：|age=${age}|

3.2运算符

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)

3.3th属性

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

th:fragment

声明代码块，方便被 th:insert 引用。优先级为 order=8
th:text

设置当前元素的文本内容，相同功能的还有 th:utext，两者的区别在于前者不会转义 html 标签，而后者会。优先级为 order=7
th:value

设置当前元素的 value 值，类似修改指定属性的还有 th:src，th:href。优先级为 order=6
th:attr

修改任意属性，实际开发中使用较少，因为有丰富的其他th属性帮忙，类似的还有th:attrappend，th:attrprepend。优先级为 order=5
th:object

声明变量，一般和 *{} 一起配合使用，达到偷懒效果。优先级 order=4
th:if

条件判断，类似的还有 th:unless，th:switch，th:case。优先级为 order=3
th:each

遍历循环元素，和 th:text 或 th:value 一起使用。注意该属性修饰的标签位置。优先级为 order=2
th:insert

代码块引入，类似的还有 th:replace，th:include。三者的区别较大，若使用不当会破坏html结构，当用于公共代码块提取的场景，优先级为 order=1

3.4迭代

教程：使用百里香叶 (thymeleaf.org)

在前端页面中，总是出现需要遍历集合中的元素以展示所有信息的场景。Thymeleaf标准方言为我们提供了一个有用的属性：th:each。

假设后台控制器添加了一个商品列表的属性 prods。然后，我们使用 th:each 在模板中使用来遍历产品列表：

<!DOCTYPE html>

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

  <head>

    <title>Good Thymes Virtual Grocery</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" media="all"

          href="../../../css/gtvg.css" th:href="@{/css/gtvg.css}" />

  </head>

  <body>

    <h1>Product list</h1>

    <table>

      <tr>

        <th>NAME</th>

        <th>PRICE</th>

        <th>IN STOCK</th>

      </tr>

      <tr th:each="prod : ${prods}">

        <td th:text="${prod.name}">Onions</td>

        <td th:text="${prod.price}">2.41</td>

        <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>

      </tr>

    </table>

    <p>

      <a href="../home.html" th:href="@{/}">Return to home</a>

    </p>

  </body>

</html>

prod : ${prods} 属性的含义为：循环 ${prods} 属性的每一个元素。${prods} 为被迭代变量，prod 为迭代变量，即当前循环的元素。

需要注意的是，prod 为迭代变量的作用域为 <tr>元素，可用于其内部标记 <td>。

3.5条件运算

例如：

<a href="comments.html"

   th:href="@{/product/comments(prodId=${prod.id})}"

   th:if="${not #lists.isEmpty(prod.comments)}">view</a>

这将创建一个指向评论页面（带有 URL ）的链接，并将参数设置为产品的参数，但前提是产品有任何评论。/product/comments prodId id

还有一种方法可以使用 Java 中的等效开关结构有条件地显示内容：switch-case-default

<div th:switch="${user.role}">

  <p th:case="'admin'">User is an administrator</p>

  <p th:case="#{roles.manager}">User is a manager</p>

  <p th:case="*">User is some other thing</p>

</div>

3.6注意事项

使用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标签上。若你将其放在div上，循环的将是整个div
变量表达式中提供了很多的内置方法，该内置方法是用#开头，不要和#{}混淆。

4.综合案例

需求：使用 SpringBoot+Thymeleaf 完成简单的用户登录-列表功能。
1. 如果没有登录就访问管理页面，提示非法访问，需要登录
2. 如果登录成功，显示登录名称，以及用户列表
3. 为了简化，这里就不连数据库了，使用Javabean代替数据

注意：这里的thymeleaf的templates目录不能直接访问，是因为SpringBoot默认可以访问的静态资源路径没有templates，因此除了上面请求转发到资源的方法外，也可以配置静态资源的访问路径：

spring:

  web:

    resources:

      static-locations: [classpath:/static/,classpath:/templates/]

或者在配置类中配置（略）。

4.1代码实现

（1）创建 SpringBoot 项目，引入基本的库文件

<!--导入SpringBoot父工程-->

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

    <!--lombok-->

    <dependency>

        <groupId>org.projectlombok</groupId>

        <artifactId>lombok</artifactId>

    </dependency>

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-configuration-processor</artifactId>

    </dependency>

    <!--引入thymeleaf-starter：项目会自动完成配置,相关类会自动注入容器中-->

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-thymeleaf</artifactId>

    </dependency>

</dependencies>

（2）创建 login.html 和 manage.html 和静态图片到指定目录（templates目录，该目录不能直接访问）

<!DOCTYPE html>

<!--引入命名空间-->

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title>登录</title>

</head>

<body bgcolor="#CED3FE">

<div style="text-align: center">

    <h1>用户登录</h1>

    <hr/>

    <img src="data:images/login.jpg" width="35"/>

    <!--th:action="@{/login}"可以替换#-->

    <form action="#" th:action="@{/login}" method="post">

        <label style="color: red" th:text="${msg}"></label><br/>

        用户名：<input type="text" style="width: 150px" name="name"/><br/><br/>

        密 码：<input type="password" style="width: 150px" name="password"/><br/><br/>

        <input type="submit" value="登录"/>

        <input type="reset" value="重新填写"/>

    </form>

</div>

</body>

</html>

manage.html

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title>管理后台</title>

</head>

<body bgcolor="#CED3FE">

<a href="#" th:href="@{/}">安全退出</a>

<!--行内取法，使用双层中括号-->

欢迎您：[[${session.loginAdmin.name}]]

<hr/>

<h1>管理雇员</h1>

<div style="position: center ">

    <table border="1px" cellspacing="0" bordercolor="green" style="width: 700px">

        <tr bgcolor="pink">

            <td>id</td>

            <td>name</td>

            <td>age</td>

            <td>pwd</td>

            <td>email</td>

        </tr>

        <!--循环展示-->

        <tr bgcolor="#ffc0cb" th:each="user:${users}">

            <td th:text="${user.id}">a</td>

            <td th:text="${user.name}">b</td>

            <td th:text="${user.age}">c</td>

            <td th:text="${user.password}">d</td>

            <td th:text="${user.email}">e</td>

        </tr>

    </table>

    <br/>

</div>

<hr/>

</body>

</html>

（3）Javabean

Admin.java

package com.li.thymeleaf.bean;

import lombok.Data;

/**

 * @author 李

 * @version 1.0

 */

@Data

public class Admin {

    private String name;

    private String password;

}

User.java

package com.li.thymeleaf.bean;

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

/**

 * @author 李

 * @version 1.0

 */

@Data

@AllArgsConstructor

@NoArgsConstructor

public class User {

    private Integer id;

    private String name;

    private Integer age;

    private String password;

    private String email;

}

（4）控制器Controller

IndexController

package com.li.thymeleaf.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

/**

 * @author 李

 * @version 1.0

 */

@Controller

public class IndexController {

    //编写方法，转发到登录页

    @GetMapping(value = {"/", "/login"})

    public String login() {

        //因为我们引入了starter-thymeleaf，这里会直接

        //使用视图解析到thymeleaf模板文件下的adminLogin.html

        return "adminLogin";

    }

}

AdminController

package com.li.thymeleaf.controller;

import com.li.thymeleaf.bean.Admin;

import com.li.thymeleaf.bean.User;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.util.StringUtils;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PostMapping;

import javax.servlet.http.HttpSession;

import java.util.ArrayList;

import java.util.List;

/**

 * @author 李

 * @version 1.0

 */

@Controller

public class AdminController {

    /**

     * 响应用户登录请求

     *

     * @param admin   自定义对象参数

     * @param session 将获取的admin信息放入session中（登录成功）

     * @param model   model的数据会自动放入request域中传给下一个页面（登录失败）

     * @return

     */

    @PostMapping("/login")//从请求方式区分，不会冲突

    public String login(Admin admin, HttpSession session, Model model) {

        //验证用户是否合法

        if (StringUtils.hasText(admin.getName()) && "666".equals(admin.getPassword())) {//合法

            //将登陆用户保存到session中

            session.setAttribute("loginAdmin", admin);

            //应使用重定向（用请求转发刷新页面会重复提交表单），这里的重定向是到mainPage方法，而不是直接到页面。

            return "redirect:manage.html";

        } else {//不合法，返回重新登录

            model.addAttribute("msg", "用户名或密码错误!");

            return "adminLogin";

        }

    }

    //处理用户请求到manage.html

    @GetMapping("/manage.html")

    public String mainPage(Model model, HttpSession session) {

        //先校验（这里暂时使用session验证，后面可以统一使用拦截器）

        Object loginAdmin = session.getAttribute("loginAdmin");

        if (loginAdmin != null) {//说明登陆过

            //模拟用户数据

            List<User> users = new ArrayList<>();

            users.add(new User(1, "关羽", 555, "1234", "gy@qq.com"));

            users.add(new User(2, "张飞", 455, "12345", "zf@qq.com"));

            users.add(new User(3, "赵云", 344, "12346", "zy@qq.com"));

            users.add(new User(4, "马超", 300, "12347", "mc@qq.com"));

            users.add(new User(5, "黄忠", 666, "12348", "hz@qq.com"));

            //放入到request域中(model中的数据会自动放入到request域中)

            model.addAttribute("users", users);

            return "manage";//这里才是真正视图解析到 templates/manage.html

        } else {//说明没有登录过，拒绝访问manage页面

            model.addAttribute("msg", "你没有登录/请登录！");

            return "adminLogin";

        }

    }

}

（5）启动类

package com.li.thymeleaf;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

/**

 * @author 李

 * @version 1.0

 */

@SpringBootApplication

public class Application {

    public static void main(String[] args) {

        SpringApplication.run(Application.class,args);

    }

}

（6）测试

未经登录直接访问manage.html

登录测试

4.2练习

把前面接收参数相关注解、自定义转换器、处理JSON、内容协商相关代码和案例过一遍
将Thymeleaf用户管理改为妖怪列表，字段做相应的改变，进行练习
- Monster [id，name，skill，age，salary，birth]

day08-2-Thymeleaf的更多相关文章

spring boot(四)：thymeleaf使用详解
在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4. ...
Thymeleaf
1.在html顶部添加 <html xmlns:th="http://www.thymeleaf.org"> 2.url表达式 @{...} <link rel= ...
Thymeleaf 模板的使用
Thymeleaf是现代化服务器端的Java模板引擎,不同与JSP和FreeMarker,Thymeleaf的语法更加接近HTML,并且也有不错的扩展性.详细资料可以浏览官网.本文主要介绍Thymel ...
vert.x学习（三），Web开发之Thymeleaf模板的使用
在vert.x中使用Thymeleaf模板,需要引入vertx-web-templ-thymeleaf依赖.pom.xml文件如下 <?xml version="1.0" e ...
页面上使用 Thymeleaf 的内联js不当造成了 java.lang.StackOverflowError: null 问题
由于在页面上内联js使用不当,从而在从 Controller 跳转到页面时发生了以下错误: java.lang.StackOverflowError: null at org.thymeleaf.ut ...
Thymeleaf 与 Javascript
在 javascript 代码中使用 Thymeleaf 模板引擎: <script th:inline="javascript"> $("#content& ...
Thymeleaf+SpringMVC，如何从模板中获取数据
Thymeleaf+SpringMVC,如何从模板中获取数据在一个典型的SpringMVC应用中,带@Controller注解的类负责准备数据模型Map的数据和选择一个视图进行渲染.这个模型Map对 ...
Thymeleaf+Spring整合
前言这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...
thymeleaf常用标签
1. th:checked ,th:selected标签<input type="radio" value="M" name="gender&q ...
thymeleaf的常见用法
1,th:属性名="",就可以直接修改控件的属性,比如 <input th:type="button" th:name="xinxin" ...

随机推荐

将Windows系统设置为NTP服务器之NetTime
之前写过一个将Windows系统设置NTP服务器的随笔,是通过修改Windows的注册表来实现NTP服务器,现在有个更简单的方式,安装一个小插件即可将Windows设置为NTP服务器. 插件 NetT ...
文心一言 VS 讯飞星火 VS chatgpt （194）-- 算法导论14.3 2题
二.用go语言,改写 INTERVAL-SEARCH 的代码,使得当所有区间都是开区间时,它也能正确地工作. 文心一言,代码正常运行: 在Go语言中,处理开区间(open intervals)时,我们 ...
jackson、objectMapper 、JsonAlias、JsonProperty、json。序列化和反序列化研究。
总结: @JsonAlias:序列化出来是一定是真名,反序列化时可以传真名(驼峰)Json也可以传别名(下划线)Json @JsonProperty:序列化出来一定是别名,反序列化时也只能传别名Jso ...
Eclipse安装配置、卸载教程（Windows版）
Eclipse是一个开放源代码的集成开发环境(IDE),最初由IBM公司开发,现在由Eclipse基金会负责维护.它是一个跨平台的工具,可以用于开发多种编程语言,如Java.C/C++.Python. ...
了解一下基本的http代理配置
我们首先用一个简单例子了解一下基本的http代理配置 worker_processes 1; #nginx worker 数量 error_log logs/error.log; #指定错误日志文件路 ...
NC16697 [NOIP2001]Car的旅行路线
题目链接题目题目描述又到暑假了,住在城市A的Car想和朋友一起去城市B旅游.她知道每个城市都有四个飞机场,分别位于一个矩形的四个顶点上,同一个城市中两个机场之间有一条笔直的高速铁路,第I个城市中 ...
大米新闻微信小程序和Springboot新闻管理系统项目源码
介绍本项目分为大米news小程序端和springboot新闻管理系统后台项目.小程序主要用来新闻展示,后台管理系统用于提供相关新闻API. 项目源码参考:https://www.bilibili. ...
mysql插入表中的中文字符显示为乱码或问号的解决方法
mysql中文显示乱码或者问号是因为选用的编码不对或者编码不一致造成的,最简单的方法就是修改mysql的配置文件my.cnf.在[mydqld]和[client]段加入 default-charact ...
win32 - 对于32位的应用程序，LoadResource为什么不需要释放资源
原话: [此功能已过时,仅支持与16位Windows向后兼容.对于32位Windows应用程序,不必释放使用LoadResource加载的资源.如果在32或64位Windows系统上使用,此函数将返回 ...
【Android逆向】破解看雪 test1.apk
1. 获取apk,并安装至手机 apk 获取地址: https://www.kanxue.com/work-task_read-800624.htm adb install -t test1.apk ...

day08-2-Thymeleaf