springboot-thymeleaf
一、概要
官方网站
Thymeleaf是一种用于Web和独立环境的现代服务器端的Java模板引擎。
什么是模板引擎: HTML标签+模板语法+数据 渲染 生成浏览器能识别的特定的格式的文档(HTML)
目前可以处理的模板类型包括：HTML5、XML、TEXT、JavaScript、CSS等
特点：
- 可以直接在浏览器打开看到页面的静态效果
- 也可以在程序运行后看到动态页面效果
- 跟spring boot很好的集成
- 在Web和非Web环境下都可以正常工作
三个核心组件：
- ITemplateResolver：用于设置模板引擎，例如模板的存放目录，模板的后缀（html、html），是否开启模板缓存等等。
- TemplateEngine：用于解析模板。
- IContext：用于保存模板中需要的一些变量。例如要把变量传递到模板中，就可以先把变量放入IContext的实现类中，然后在模板中获取该变量的值。
二、简单实用
1、pom添加以下依赖
org.springframework.boot
spring-boot-starter-thymeleaf
2、配置thymeleaf
spring:
mvc:
static-path-pattern: /**
thymeleaf:
# 模板存放的路径 默认就是当前设置的,可以自己修改
prefix: classpath:/templates/
# 是否使用缓存 默认开启
cache: false
# 后缀
suffix: .html
# 编码
encoding: UTF-8
# 支持的模型
mode: HTML5
servlet:
content-type: text/html
3、控制层
# 注意 不要使用RestController注解
@Controller
public class IndexController {
@RequestMapping("/")
public String index(ModelMap model) {
model.addAttribute("user", new User(1, "绿帽批发商"));
return "index";
}
}
4、index.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>SpringBoot模版渲染title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
head>
<body>
<p th:text="${user.uid}">p>
<p th:text="${user.username}">p>
body>
html>
三、基础语法
1、简介
Thymeleaf允许自定义语法。它还自带了一些标准方言，这些标准方言可以满足我们大部分的需求。
2、标准方言语法
大多数Thymeleaf属性允许将它们的值设置为或包含表达式，由于它们使用的方言，我们将其称为标准表达式。这些表达式可以有五种类型:
${...}: 变量表达式。@{...}: 链接 (URL) 表达式。*{...}: 选择表达式。#{...}: 消息 (i18n) 表达式。~{...}: 片段表达式。
3、变量表达式
说明
当后台传输对象或者变量到前端，前端可以通过变量表达式来获取后台传递过来的值
栗子
4、链接(URL)表达式
说明
链接表达式在构建URL并向其添加有用的上下文和会话信息(通常称为URL重写的过程)
栗子
@{/account/login}
带参数的URL
动态路径
带参数的
绝对路径
完整路径
4、常用标签
| 关键字 | 功能介绍 | 案例 |
|---|---|---|
th:id |
替换id |
|
th:text |
文本替换 | |
th:utext |
支持html的文本替换 |
|
th:object |
替换对象 | |
th:value |
属性赋值 | |
th:with |
变量赋值运算 | |
th:style |
设置样式 | th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''" |
th:onclick |
点击事件 | th:onclick="'getCollect()'" |
th:each |
属性赋值 | tr th:each="user,userStat:${users}"> |
th:if |
判断条件 | |
th:unless |
和th:if判断相反 |
Login |
th:href |
链接地址 | Login /> |
th:switch |
多路选择 配合th:case 使用 | |
th:case |
th:switch的一个分支 |
|
th:fragment |
布局标签，定义一个代码片段，方便其它地方引用 | |
th:include |
布局标签，替换内容到引入的文件 | /> |
th:replace |
布局标签，替换整个标签到引入的文件 | |
th:selected |
selected选择框 选中 |
th:selected="(${xxx.id} == ${configObj.dd})" |
th:src |
图片类地址引入 | |
th:inline |
定义js脚本可以使用变量 |
|