简介
Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎，能够处理HTML，XML，JavaScript，CSS甚至纯文本。，可以完全替代jsp，也是spring boot官方推荐的模版引擎
Thymeleaf优势
1.可以独立运行 前后端分离的时候 前端可以直接运行模版进行样式调整
2.不破坏html整体结构，更贴向html
3.可以使用模版实现JSTL、 OGNL表达式效果
Thymeleaf简单使用
1.引入pom依赖
org.springframework.boot spring-boot-starter-thymeleaf
properties配置 根据实际需要配置
# THYMELEAF (ThymeleafAutoConfiguration)#开启模板缓存（默认值：true）spring.thymeleaf.cache=false #Check that the template exists before rendering it.spring.thymeleaf.check-template=true #检查模板位置是否正确（默认值:true）spring.thymeleaf.check-template-location=true#开启MVC Thymeleaf视图解析（默认值：true）spring.thymeleaf.enabled=true#模板编码spring.thymeleaf.encoding=UTF-8#要被排除在解析之外的视图名称列表，用逗号分隔#spring.thymeleaf.excluded-view-names=#要运用于模板之上的模板模式。另见StandardTemplate-ModeHandlers(默认值：HTML5)spring.thymeleaf.mode=HTML5#在构建URL时添加到视图名称前的前缀（默认值：classpath:/templates/）spring.thymeleaf.prefix=classpath:/templates/#在构建URL时添加到视图名称后的后缀（默认值：.html）spring.thymeleaf.suffix=.html#Thymeleaf模板解析器在解析器链中的顺序。默认情况下，它排第一位。顺序从1开始，只有在定义了额外的TemplateResolver Bean时才需要设置这个属性。#spring.thymeleaf.template-resolver-order=#可解析的视图名称列表，用逗号分隔#spring.thymeleaf.view-names=
2.新建一个Contorller
@Controllerpublic class HelloWordContorller { @RequestMapping("/helloword") public String helloWord(Model model){ List studentConfigList=new ArrayList (); for(int i=0;i<10;i++){ studentConfigList.add(new StudentConfig("小明"+i,i)); } model.addAttribute("list",studentConfigList); return "index"; }} 3.再resource/template下面新建一个html页面
Title
| 学生姓名 | 学生年龄 |
|---|---|
| 小明 | 20 |
xmlns:th="http://www.thymeleaf.org" 将静态页面转换为动态的视图，需要进行动态处理的元素将使用“th:”前缀。 访问输出
thymeleaf模版引擎跟jsp比起来是否更易读。如果写jsp的话 里面有很多自定义标签 前端人员根本也无法阅读
还有就是模版是html是可以直接运行的
4.找到模版地址
打开
所以前端是可以直接根据模版进行样式调整
常用标签
遍历
小明 20
赋值
text赋值
小明 20
html赋值
conten
value赋值
三元运算符
男
if else
已登录
th:if是条件成立才渲染 ht:unless则是条件不成立才渲染
Switch
管理员
老师
普通用户
如果登陆判断 当前用户角色 *表示default
Url
th:src
th:href
restful风格
小明 20 男 编辑
?参数传递
小明 20 男 编辑1
?多参数传递
th:style
设置背景图片
内嵌变量
- dates ： java.util.Date的功能方法类。
- calendars : 类似#dates，面向java.util.Calendar
- numbers : 格式化数字的功能方法类
- strings : 字符串对象的功能类，contains,startWiths,prepending/appending等等。
- objects: 对objects的功能类操作。
- bools: 对布尔值求值的功能方法。
- arrays：对数组的功能类方法。
- lists: 对lists功能类方法
- sets
- maps
- ...
比如格式化日期
系统时间:
根据需求查api吧 太多了
内联js
注释表示通过模版引擎渲染 将注释后面的代码将取消渲染 渲染注释里面的模版代码。便于原型显示(直接打开html页面)
模版引擎渲染结果
直接html打开效果
使用th:inline="javascript"开启 [[....]]表示内联文本
js附加代码：
/*[++]*/ 使用模版引擎渲染将正常渲染 模版引擎渲染结果
模版html直接打开结果
js移除代码
跟js添加代码一样 只是是相反 添加模版引擎渲染则渲染 普通html打开则渲染
使用thymeleaf布局
layout布局
引入pom依赖
nz.net.ultraq.thymeleaf thymeleaf-layout-dialect
后台管理系统为例子 头部 底部 菜单栏都是固定的。
1.新建一个页面都把架构复制过去 然后改中间那一块内容
缺点：
会导致我们要修改整体风格每个页面都要改，比如随着时间的迭代页面会越来越多。
2.定义好骨架 然后每个部分引用对应的页面
头部引用头部的html 菜单引用菜单的html 底部引用底部的html
缺点：
页面排版要改动的时候 比如 菜单要放到右边 也会导致每个页面都要改动
3.使用模版页面
使用模版页定义好 整体框架，然后每个页面都来引用这个模版 将内容替换到指定位置
模版页定义公共的样式引入 还有整体风格
1。首先创建一个模版页面
layout.html
Title 头部内容
定义命名空间：xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
要填充的区域：layout:fragment="content"
2.创建一个用户列表页面
用户列表 用户列表
要填充模版页的位置：layout:fragment="content"
定义命名空间 xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout"
layout:decorator="layout"为模版页路径
效果
渲染后的html
用户列表 头部用户列表
可以发现 页面使用的css 和 script 都自动替换到模版页的 head 和底部
这个时候就算我们有上万个页面 页面风格要改变也就只需要改变模版页就行了
th:include 和 th:replace
创建一个广告页advertising.html
广告 我是广告
th:fragment="advertisingContent" 引用的时候会用到
页面引用advertisingContent内容
主页 主页
th:replace="advertising :: advertisingContent" 为把advertising(页面路径)advertisingContent为哪一块内容(省略则是整个页面)
传递参数
我是广告
主页 主页
th:replacehe 和th:include用法一样 区别 th:include只引用chilren
th:replacehe 引用包含自身