一.基本介绍

1.Thymeleaf 是什么

2.Thymeleaf 的优点

3. Thymeleaf 的缺点

二.Thymeleaf 机制说明

三.Thymeleaf 语法

1. 表达式

1. 表达式一览

2. 字面量

3. 文本操作

2.运算符

1. 数学运算

2. 布尔运算

3. 比较运算

4. 条件运算

3.th 属性

4.迭代

5.条件运算

6.使用 Thymeleaf -th 属性需要注意点

四.Thymeleaf 综合案例

1.需求说明

2.需求说明

3.代码实现

一.基本介绍

1.Thymeleaf 是什么

1. Thymeleaf 是一个跟 Velocity 、 FreeMarker 类似的模板引擎，可完全替代 JSP

2. Thymeleaf 是一个 java 类库，他是一个 xml/xhtml/html5 的模板引擎，可以作为 mvc 的 web 应用的 view 层

2.Thymeleaf 的优点

1. 实现 JSTL 、 OGNL 表达式效果，语法相似 , java 程序员上手快

2. Thymeleaf 模版页面无需服务器渲染，也可以被浏览器运行，页面简洁。

3. SpringBoot 支持 FreeMarker 、 Thymeleaf 、 veocity 。

3. Thymeleaf 的缺点

1. Thymeleaf: Thymeleaf is a modern server-side Java template engine for both web and

standalone environments

2. 缺点 : 并不是一个高性能的引擎，适用于单体应用

3. 说明：如果要做一个高并发的应用 , 选择前后端分离更好，但是作为 SpringBoot 推

荐的模板引擎，在工作中使用到 , 也能搞定

二.Thymeleaf 机制说明

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

2. 比如 : manage.html 中一段 thymeleaf 代码 , 是在用户请求该页面时，有 thymeleaf 模板

引擎完成处理的 ( 在服务端完成 ), 并将结果页面返回 .

3. 因此使用了 Thymeleaf , 并不是前后端分离

三.Thymeleaf 语法

1. 表达式

1. 表达式一览

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

2. 字面量

文本值 : 'hsp edu' , 'hello' ,… 数字 : 10 , 7 , 36.8 , … 布尔值 : true , false

空值 : null

变量： name ， age ， .... 变量不能有空格

3. 文本操作

文本操作

字符串拼接 : +

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

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

4.迭代

5.条件运算

6.使用 Thymeleaf -th 属性需要注意点

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 综合案例

1.需求说明

说明 : 使用 SpringBoot + Thymeleaf 完成简单的用户登录 - 列表功能

2.需求说明

说明 : 使用 SpringBoot + Thymeleaf 完成简单的用户登录 - 思路分析 / 图解

3.代码实现

1. 创建项目 , 项目名使用 04-springboot-usersys, 老韩还是使用灵活创建项目的方式 .

2. 说明一下，要支持 Thymeleaf, 需要加入 thymeleaf-starter, 在 pom.xml 配置

3. 引入 starter-Thymeleaf , 项目会自动完成配置, 程序员按照规则开发即可

4. 创建 index.html 和 manage.html 和静态图片到指定目录，从准备好的拷贝即可 , 注意

我将 html 文件放到 templates/ 目录下 , 该目录 , 不能直接访问

============login.html==============

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>login</title>
</head>
<body bgcolor="#CED3FE">
<hr/>
<div style="text-align: center"><h1>用户登陆</h1><form action="#" method="post"><label style="color: red"></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>
<hr/>
<img src="data:images/logo.png"/>
</body>
</html>

==============manage.html========================

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>管理后台</title>
</head>
<body bgcolor="#CED3FE">
<img src="data:images/1.GIF"/>
<a href='#'>返回管理界面</a> <a href='#'>安全退出</a> 欢迎您:XXX
<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>pwd</td><td>email</td><td>job</td><td>salary</td></tr><tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td></tr></table><br/>
</div>
<hr/>
<img src="data:images/logo.png"/>
</body>
</html>

1.bean/Admin.java

@Data
public class Admin {private String name;private String password;
}

2.bean/User.java

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

3.controller/IndexController.java 默认进入登录页面

@Controller
public class IndexController {//编写方法，转发到登录页面@GetMapping(value = {"/", "/login"})public String login() {/*** 解读* 1. 因为我们引入了starter-thymeleaf* 2. 这里就会直接使用视图解析到 thymeleaf下的模板文件adminLogin.html*/return "adminLogin";}
}

4.controller/AdminController.java 处理登录请求完成测试

@Controller
@Slf4j
public class AdminController {//响应用户的登录请求@PostMapping("/login")public String login(Admin admin, HttpSession session, Model model) {//验证用户是否合法if (StringUtils.hasText(admin.getName()) && "666".equals(admin.getPassword())) {//将登录用户保存到sessionsession.setAttribute("loginAdmin", admin);//合法, 重定向到manage.html//请小伙伴回忆,java web, 不使用请求转发是防止刷新页面会重复提交//这里老师为什么是写的 manage.html, 因为这样可以更加明确的表示到哪个页面//manage.html表示要去找 方法的映射路径为 manage.htmlreturn "redirect:/manage.html";} else {//不合法，就重新登录, 请求转发model.addAttribute("msg", "账号/用户错误");return "adminLogin";}}//处理用户的请求到 manage.html@GetMapping("/manage.html")public String mainPage(Model model, HttpSession session) {//这里老师暂时使用在方法验证，后面我们统一使用拦截器来验证log.info("进入mainPage()");//可以这里集合-模拟用户数据, 放入到request域中，并显示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"));//将数据放入到request域model.addAttribute("users", users);return "manage"; //这里才是我们的视图解析到 /templates/manage.html//Object loginAdmin = session.getAttribute("loginAdmin");//if(null != loginAdmin) {//说明成功登录过//    //可以这里集合-模拟用户数据, 放入到request域中，并显示//    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"));////    //将数据放入到request域//    model.addAttribute("users", users);////    return "manage"; //这里才是我们的视图解析到 /templates/manage.html//} else {//    //这里就返回登录页，并给出提示//    model.addAttribute("msg","你没有登录/请登录");//    return "adminLogin";//请求转发到adminLogin.html//}}
}

5.修改 manage.html , 显示用户列表

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

6. 修改 login.html , 显示登录错误信息和提交 action

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>管理后台</title>
</head>
<body bgcolor="#CED3FE">
<img src="data:images/1.GIF"/>
<a href='#'>返回管理界面</a>　　<a href='#' th:href="@{/}">安全退出</a> 　　欢迎您:[[${session.loginAdmin.name}]]
<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>pwd</td><td>email</td><td>age</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.password}">c</td><td th:text="${user.email}">d</td><td th:text="${user.age}">e</td></tr></table><br/>
</div>
<hr/>
<img src="data:images/logo.png"/>
</body>
</html>

服务器渲染技术--＞Thymeleaf相关推荐

服务器渲染技术-Thymeleaf
1.基本介绍 Thymeleaf 是什么 Thymeleaf是一个现代的服务器端Java模板引擎,适用于Web和独立环境,能够处理HTML,XML,JavaScript,CSS甚至纯文本 Thymel ...
服务器渲染技术-JSP
服务器渲染技术-JSP 1.为什么需要 JSP 1.程序员在开发过程中,发现 servlet 做界面非常不方便 2.引出 JSP 技术,JSP 公式 jsp=html+java 片段+标签+javas ...
服务器渲染技术jsp
服务器渲染技术服务器渲染技术 JSP基本介绍运行原理常用指令和标签常用脚本 JSP 注释 JSP 内置对象 JSP 域对象 pageContext request session applic ...
SpringBoot下的模板技术Thymeleaf详解
Thymeleaf是一个流行的模板引擎,该模板引擎采用Java语言开发. 模板引擎是一个技术名词,是跨领域跨平台的概念,在Java语言体系下有模板引擎,在C#.PHP语言体系下也有模板引擎,在Java ...
前端后分离深入分析 ——浏览器渲染和服务器渲染区别
1.为什么会有服务器渲染与客户端渲染? 首先理解服务器和浏览器客户端之间传递的是什么--HTML,CSS,JavaScript的文件以及数据载体json(xml)等文件,而文件都是静态,之所以动态是应 ...
高并发图片实时渲染技术在阿里妈妈的大规模应用
个性化推荐已经广泛应用到新媒体.电商.游戏等领域,当你打开手机淘宝的时候,淘宝会根据你的浏览和购买等历史行为,提供个性化的商品推荐.那么,这些形式多样.风格各异的个性化商品展示是怎样最终呈现到APP中 ...
react服务端渲染技术
Webpack和react的项目一般打包出来的文件会包括 js css 文件, 在html里也就只需要用标签引入这几个文件就可以在客户端抓到JS信息之后动态渲染HTML,可是再右键点击显示网页源代码的 ...
基于服务器端的三维渲染技术
Martin等人根据渲染发生在客户端还是服务器端,将三维渲染分为基于客户端的渲染,基于服务器端的渲染和基于混合端的渲染. 基于客户端的渲染基于服务器端的渲染基于混合端的渲染渲染端客户端服 ...
单页面SPA(如react，vue)网站的服务器渲染SSR之SEO大杀器rendertron(超详细配置+避坑)
单页面网站,比如vue.recat框架的网站,一般都是直接从服务器推送index.html,再根据自身路由通过js在客户端浏览器渲染出完整的html页面. 但是搜索引擎的爬虫可没有这么智能(实际上go ...

服务器渲染技术--＞Thymeleaf

一.基本介绍

1.Thymeleaf 是什么

2.Thymeleaf 的优点

3. Thymeleaf 的缺点

二.Thymeleaf 机制说明

三.Thymeleaf 语法

1. 表达式

1. 表达式一览

2. 字面量

3. 文本操作

2.运算符

1. 数学运算

2. 布尔运算

3. 比较运算

4. 条件运算

3.th 属性

4.迭代

5.条件运算

6.使用 Thymeleaf -th 属性需要注意点

四.Thymeleaf 综合案例

1.需求说明

2.需求说明

3.代码实现

服务器渲染技术--＞Thymeleaf相关推荐

最新文章

热门文章