SpringBoot前端 —— thymeleaf 简单理解
文章目录
- 前置操作
- Model、ModelMap、ModelAndView
- 注意点
- 具体配置
-
- 基本内容样式
- 表达式
-
- 简单表达式
- 常用的内置对象
- 常用的内置方法
- 三元运算、条件表达式
- 默认表达式
- 字符串连接、拼接
- 布尔操作
- 语法
-
- th:text
- th:utext
- th:id
- th:action
- th:method
- th:name
- th:field
- th:object
- th:src
- th:value
- th:attr
- th:href
- th:attrappend、th:attrprepend
- th:classappend、th:styleappend
- th:switch、th:case
- th:fragment、th:insert 、th:replace、th:include
- th:inline
-
- th:inline=“text” 文本内联
- th:inline=“javascript” 脚本内联
- th:inline=“none” 禁止内联
- th:each
- th:remove
- th:with
- th:block
- th:if
- th:unless
- th:onclick
- th:style
- 常见用法
-
- 输入框中显示用户姓名
- 下拉选择月份
- 链接
- 判断条件
- 循环
- 页面引用
- 时间格式化
- 拼接
- 显示html内容
本文集各家之长，自学整理，若有错误，欢迎留言指出！！！
前置操作
1、创建工程
2、在pom.xml中加入thymeleaf
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
3、修改项目为热部署，打开pom.xml，加入下面依赖，最后重启一次项目
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-devtoolsartifactId>
dependency>
4、在resoures文件夹下分别创建templates（主要放html文件）和static（主要放css、js文件）文件夹
5、在application.yml配置thymeleaf（这样配置后，在代码中返回到那个页面就不用写过多的前缀和后缀了，达到简化效果）
spring:
thymeleaf:
cache: false # 模板热部署、禁用 thymeleaf 缓存
mode: HTML5
suffix: .html
prefix: classpath:/templates/
encoding: UTF-8
servlet:
content-type: text/html
mvc:
static-path-pattern: /static/** # 添加static文件夹下其他文件夹可访问
6、引入css文件(必须要在标签中加上rel属性)
<link th:href="@{/static/css/index.css}" type="text/css" rel="stylesheet">
7、引入js文件
<script type="text/javascript" th:src="@{/js/jquery.js}">script>
Model、ModelMap、ModelAndView
- Model
一般来说，可以用Model来接收各种类型的数据，如果使用来接收一组数据List，那么这个时候的Model实际上是ModelMap - ModelMap
主要用于传递控制方法处理数据到结果页面，也就是说我们把结果页面上需要的数据放到ModelMap对象中即可，他的作用类似于request对象的setAttribute方法的作用：用来在一个请求过程中传递处理的数据
ModelMap或者Model通过addAttribute方法向页面传递参数 - ModelAndView
指模型和视图的集合，既包含 模型 又包含 视图
Model和 ModelMap 无需用户自己创建，而且需要return 返回指定的页面路径
public String listCategory2(Model model) {
// 接收查询的信息
List<Category> cs2= categoryService.list();
// 封装了查询的数据
model.addAttribute("test", cs2);
//重要！！需要给出返回model跳转的路径
return "listCategory2";
}
ModelAndView的实例是需要我们手动new的，这也是和ModelMap的一个区别。
而且，ModelAndView 可以自己寻址，只需要return 返回其对象即可。
public ModelAndView listCategory(){
//创建一个模型视图对象
ModelAndView mav = new ModelAndView();
//获取到查询的数据
List<Category> cs= categoryService.list();
// //将数据放置到ModelAndView对象view中,第二个参数可以是任何java类型
mav.addObject("cs", cs);
// 放入jsp路径
mav.setViewName("listCategory");
//返回ModelAndView对象mav
return mav;
}
注意点
一、 若要使用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标签上。若你将th:each属性放在div上，则循环的是将整个div。
四、 变量表达式中提供了很多的内置方法，该内置方法是用#开头，请不要与#{}消息表达式弄混。
五、th:insert，th:replace，th:include 三种插入代码块的效果相似，但区别很大。
示例概览：
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 语法title>
head>
<body>
<h2>ITDragon Thymeleaf 语法h2>
<p th:text="${thText}" />
<p th:utext="${thUText}" />
<input type="text" th:value="${thValue}" />
<div th:each="message : ${thEach}">
<p th:text="${message}" />
div>
<div>
<p th:text="${message}" th:each="message : ${thEach}" />
div>
<p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}">p>
<div th:insert="~{grammar/common::thCommon}">div>
<div th:object="${thObject}">
<p>ID: <span th:text="*{id}" />p>
<p>TH: <span th:text="*{thName}" />p>
<p>DE: <span th:text="*{desc}" />p>
div>
body>
html>
@RequestMapping("thymeleaf")
public String thymeleaf(ModelMap map) {
map.put("thText", "th:text 设置文本内容 加粗");
map.put("thUText", "th:utext 设置文本内容 加粗");
map.put("thValue", "thValue 设置当前元素的value值");
map.put("thEach", Arrays.asList("th:each", "遍历列表"));
map.put("thIf", "msg is not null");
map.put("thObject", new ThObject(1L, "th:object", "用来偷懒的th属性"));
return "grammar/thymeleaf";
}
具体配置
基本内容样式
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>首页title>
<link rel="shortcut icon" th:href="@{/favicon.ico}"/>
<link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet"/>
head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<div id="wrapper">
<h1 th:text="${msg}">h1>
div>
<script th:src="@{/static/js/jquery.min.js}">script>
<script th:src="@{/static/js/bootstrap.min.js}">script>
body>
html>
表达式
(本部分内容绝大部分转载自：https://blog.csdn.net/xiaojin21cen/article/details/102935872)
简单表达式
${...}变量表达式：有丰富的内置方法，使其更强大，更方便*{...}选择变量表达式：使用频率最高，其功能也是非常的丰富。选择表达式首先使用th：object来绑定后台传来的的user对象，然后使用*来代表这个对象，后面{}中的值是此对象中的属性#{...}消息表达式：一般用于国际化的场景，结构：th:text="#{msg}"@{...}链接url表达式：静态资源的引用、form表单的请求，凡是链接都可以用@{...}~{...}代码块表达式：~{模版名::片段名}、~{模版名::#id}
常用的内置对象
ctx：上下文对象。vars：上下文变量。locale：上下文的语言环境。request：（仅在web上下文）的 HttpServletRequest 对象。response：（仅在web上下文）的 HttpServletResponse 对象。session：（仅在web上下文）的 HttpSession 对象。servletContext：（仅在web上下文）的 ServletContext 对象
// java 代码将用户名放在session中
session.setAttribute("userinfo",username);
// Thymeleaf通过内置对象直接获取
th:text="${session.userinfo}"
常用的内置方法
strings：字符串格式化方法，常用的Java方法它都有。比如：equals，equalsIgnoreCase，length，trim，toUpperCase，toLowerCase，indexOf，substring，replace，startsWith，endsWith，contains，containsIgnoreCase等numbers：数值格式化方法，常用的方法有：formatDecimal等bools：布尔方法，常用的方法有：isTrue，isFalse等arrays：数组方法，常用的方法有：toArray，length，isEmpty，contains，containsAll等lists，sets：集合方法，常用的方法有：toList，size，isEmpty，contains，containsAll，sort等maps：对象方法，常用的方法有：size，isEmpty，containsKey，containsValue等dates：日期方法，常用的方法有：format，year，month，hour，createNow等
<h3>#strings h3>
<div th:if="${not #strings.isEmpty(itdragonStr)}" >
<p>Old Str : <span th:text="${itdragonStr}"/>p>
<p>toUpperCase : <span th:text="${#strings.toUpperCase(itdragonStr)}"/>p>
<p>toLowerCase : <span th:text="${#strings.toLowerCase(itdragonStr)}"/>p>
<p>equals : <span th:text="${#strings.equals(itdragonStr, 'itdragonblog')}"/>p>
<p>equalsIgnoreCase : <span th:text="${#strings.equalsIgnoreCase(itdragonStr, 'itdragonblog')}"/>p>
<p>indexOf : <span th:text="${#strings.indexOf(itdragonStr, 'r')}"/>p>
<p>substring : <span th:text="${#strings.substring(itdragonStr, 2, 8)}"/>p>
<p>replace : <span th:text="${#strings.replace(itdragonStr, 'it', 'IT')}"/>p>
<p>startsWith : <span th:text="${#strings.startsWith(itdragonStr, 'it')}"/>p>
<p>contains : <span th:text="${#strings.contains(itdragonStr, 'IT')}"/>p>
div>
<h3>#numbers h3>
<div>
<p>formatDecimal 整数部分随意，小数点后保留两位，四舍五入: <span th:text="${#numbers.formatDecimal(itdragonNum, 0, 2)}"/>p>
<p>formatDecimal 整数部分保留五位数，小数点后保留两位，四舍五入: <span th:text="${#numbers.formatDecimal(itdragonNum, 5, 2)}"/>p>
div>
<h3>#bools h3>
<div th:if="${#bools.isTrue(itdragonBool)}">
<p th:text="${itdragonBool}">p>
div>
<h3>#arrays h3>
<div th:if="${not #arrays.isEmpty(itdragonArray)}">
<p>length : <span th:text="${#arrays.length(itdragonArray)}"/>p>
<p>contains : <span th:text="${#arrays.contains(itdragonArray, 5)}"/>p>
<p>containsAll : <span th:text="${#arrays.containsAll(itdragonArray, itdragonArray)}"/>p>
div>
<h3>#lists h3>
<div th:if="${not #lists.isEmpty(itdragonList)}">
<p>size : <span th:text="${#lists.size(itdragonList)}"/>p>
<p>contains : <span th:text="${#lists.contains(itdragonList, 0)}"/>p>
<p>sort : <span th:text="${#lists.sort(itdragonList)}"/>p>
div>
<h3>#maps h3>
<div th:if="${not #maps.isEmpty(itdragonMap)}">
<p>size : <span th:text="${#maps.size(itdragonMap)}"/>p>
<p>containsKey : <span th:text="${#maps.containsKey(itdragonMap, 'thName')}"/>p>
<p>containsValue : <span th:text="${#maps.containsValue(itdragonMap, '#maps')}"/>p>
div>
<h3>#dates h3>
<div>
<p>format : <span th:text="${#dates.format(itdragonDate)}"/>p>
<p>custom format : <span th:text="${#dates.format(itdragonDate, 'yyyy-MM-dd HH:mm:ss')}"/>p>
<p>day : <span th:text="${#dates.day(itdragonDate)}"/>p>
<p>month : <span th:text="${#dates.month(itdragonDate)}"/>p>
<p>monthName : <span th:text="${#dates.monthName(itdragonDate)}"/>p>
<p>year : <span th:text="${#dates.year(itdragonDate)}"/>p>
<p>dayOfWeekName : <span th:text="${#dates.dayOfWeekName(itdragonDate)}"/>p>
<p>hour : <span th:text="${#dates.hour(itdragonDate)}"/>p>
<p>minute : <span th:text="${#dates.minute(itdragonDate)}"/>p>
<p>second : <span th:text="${#dates.second(itdragonDate)}"/>p>
<p>createNow : <span th:text="${#dates.createNow()}"/>p>
div>
@RequestMapping("varexpressions")
public String varexpressions(ModelMap map) {
map.put("itdragonStr", "itdragonBlog");
map.put("itdragonBool", true);
map.put("itdragonArray", new Integer[]{
1,2,3,4});
map.put("itdragonList", Arrays.asList(1,3,2,4,0));
Map itdragonMap = new HashMap();
itdragonMap.put("thName", "${#...}");
itdragonMap.put("desc", "变量表达式内置方法");
map.put("itdragonMap", itdragonMap);
map.put("itdragonDate", new Date());
map.put("itdragonNum", 888.888D);
return "grammar/varexpressions";
}
三元运算、条件表达式
a? b:c # 如果a为true，则输出b，否则输入c。 相当于 (if else)
a? b # 如果a为true，则输出b，否则输入'' 。 相当于 a? b:''
默认表达式
${a}?: b 相当于 ${a} ? ${a}:b
如果 a不为空时，输出a的值，否则输入b的值。
字符串连接、拼接
- 通过
' '和+拼接字符串 ； | a,b,c|拼接字符串（推荐）；
变量：[[${hello}]]
<div th:text="'哈哈，'+${hello}+'，'+${name}+'！'" >div>
<div th:text="|哈哈，${hello}，${name}！|" >div>
布尔操作
- and,or 二元操作符
- !,not 非（一元操作符）
语法
th:text
可对表达式或变量求值，并将结果显示在其被包含的 html 标签体内替换原有html文本
文本连接：用“+”符号，若是变量表达式也可以用“|”符号
优先级不高：order=7
th:utext
相比于th:text的纯文本显示，th:utext支持html的文本显示。
<p th:utext="${htmlcontent}">contentp>
th:id
div id声明，类似html标签中的id属性。
div>
th:action
定义后台控制器路径，类似action属性。
<form id="login-form" th:action="@{/login}">...form>
th:method
设置请求的方法
<form id="from" th:action="@{/login}" th:method="post">...form>
th:name
设置表单名称
<input th:type="text" th:id="${user.age}" th:name="${user.age}"/>
th:field
常用于表单字段绑定。通常与th:object一起使用。 属性绑定、集合绑定。
th:field取值时，后台不能用reques.setAttribute()来传值，可以用model.addAttribute()来传值；而这两种方式th:value都可以接收。
使用th:field属性可以在页面初始化的时候给对应的元素生成id。
<form id="login-form" th:action="@{/login}" th:object="${loginBean}">
<input type="text" value="" th:field="*{username}">input>
<input type="text" value="" th:field="*{user[0].username}">input>
form>
th:object
用于表单数据对象绑定，将表单绑定到后台controller的一个JavaBean参数。常与th:field一起使用进行表单数据绑定
声明变量，一般和*{}一起配合使用，达到偷懒的效果。
优先级一般：order=4
<form id="login-form" th:action="@{/login}" th:object="${loginBean}">...form>
th:src
用于外部资源引入，类似于