一。Thymleaf的介绍
免费模板页面
整合semantic ui框架
Thymeleaf是一个Java XML / XHTML / HTML5 模板引擎 ,可以在Web(基于servlet )和非Web环境中工作。 它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5,但它甚至可以在脱机环境中处理任何XML文件。 它提供完整的Spring Framework。
在Web应用程序中,Thymeleaf旨在成为JavaServer Pages (JSP)的完全替代品,并实现自然模板的概念:模板文件可以直接在浏览器中打开,并且仍然可以正确显示为网页。
Thymeleaf是开源软件、许可下 Apache许可证2.0.
springboot默认推荐的模板引擎(代替了原来的jsp)
HTML的所有标签都能用Thymleaf的前缀 th: 来代替
二。导入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
三。引入HTML命名空间
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
以后的每个HTML文件都需要加上这个引用
四。HTML文件位置
- 所有HTML默认放在Templetes文件夹下,这个文件夹相当于以前的WEB-INF文件夹,外界也无法直接访问里面的文件,需要通过controller跳转访问,而要成功跳转就必须需要Thymleaf引擎
- 定制首页可以放在资源文件下,不一定要放在Templetes下,但习惯性放在这里面,在controller层编写跳转,如:
@RequestMapping({"/","/index","index.html"})
public String toIndex(){
return "index";
}
四。常用语法(重要)
- 通过${}来获取model中的变量,注意这不是el表达式,而是ognl表达式,但是语法非常像
<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="${msg}"></p>
</body>
</html>
package com.xie.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class HtmlController {
@RequestMapping("/a")
public String a(Model model){
model.addAttribute("msg","xzx");
return "a";
}
}
- 所有可用值表达式: *{…}
比如*{name} 从可用值中查找name,如果有上下文,比如上层是object,则查object中的name属性
- 消息表达式: #{…}
常用于国际化消息中
- 链接表达式: @{…}
不管是静态资源的引用,form表单的请求,凡是链接都可以用@{…} 。这样可以动态获取项目路径,即便项目名变了,依然可以正常访问
- 片段表达式: ~{…}
统一顶部栏代码
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar"> ...</nav>
统一侧边栏代码
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">...</nav>
引用
<div th:replace="~{commons/commons::sidebar}"></div>
<div th:replace="~{commons/commons::topbar}"></div>
常用于代码块抽取,如导航栏和侧边栏
支持:~{templatename::#id}
templatename:模版名,Thymeleaf会根据模版名解析完整路径:/resources/templates/templatename.html,要注意文件的路径。
fragmentname:片段名,Thymeleaf通过th:fragment声明定义代码块,即:th:fragment=“fragmentname”
id:HTML的id选择器,使用时要在前面加上#号,不支持class选择器。
代码块表达式的使用
代码块表达式需要配合th属性(th:insert,th:replace,th:include)一起使用。
th:insert:将代码块片段整个插入到使用了th:insert的HTML标签中,
th:replace:将代码块片段整个替换使用了th:replace的HTML标签中,
th:include:将代码块片段包含的内容插入到使用了th:include的HTML标签中,
-
th属性,常用th属性如下:
1)th:text:文本替换;
2)th:utext:支持html的文本替换。
3)th:value:属性赋值
4)th:each:遍历循环元素
5)th:if:判断条件,类似的还有th:unless,th:switch,th:case
6)th:insert:代码块引入,类似的还有th:replace,th:include,常用于公共代码块提取的场景
7)th:fragment:定义代码块,方便被th:insert引用
8)th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。
9)th:attr:设置标签属性,多个属性可以用逗号分隔
<!DOCTYPE html><!--名称空间--><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>Thymeleaf 语法</title></head><body> <h2>ITDragon Thymeleaf 语法</h2> <!--th:text 设置当前元素的文本内容,常用,优先级不高--> <p th:text="${thText}" /> <p th:utext="${thUText}" /> <!--th:value 设置当前元素的value值,常用,优先级仅比th:text高--> <input type="text" th:value="${thValue}" /> <!--th:each 遍历列表,常用,优先级很高,仅此于代码块的插入--> <!--th:each 修饰在div上,则div层重复出现,若只想p标签遍历,则修饰在p标签上--> <div th:each="message : ${thEach}"> <!-- 遍历整个div-p,不推荐--> <p th:text="${message}" /> </div> <div> <!--只遍历p,推荐使用--> <p th:text="${message}" th:each="message : ${thEach}" /> </div> <!--th:if 条件判断,类似的有th:switch,th:case,优先级仅次于th:each, 其中#strings是变量表达式的内置方法--> <p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p> <!--th:insert 把代码块插入当前div中,优先级最高,类似的有th:replace,th:include,~{} :代码块表达式 --> <div th:insert="~{grammar/common::thCommon}"></div> <!--th:object 声明变量,和*{} 一起使用--> <div th:object="${thObject}"> <p>ID: <span th:text="*{id}" /></p><!--th:text="${thObject.id}"--> <p>TH: <span th:text="*{thName}" /></p><!--${thObject.thName}--> <p>DE: <span th:text="*{desc}" /></p><!--${thObject.desc}--> </div></body></html>