参考资料
1.https://www.cnblogs.com/itdragon/p/8724291.html
2.https://www.cnblogs.com/jerry126/p/11531310.html
1.Thymeleaf简介
官方网站:https://www.thymeleaf.org/index.html
Thymeleaf是用来开发Web和独立环境项目的现代服务器端Java模板引擎。
Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - HTML。可以在直接浏览器中正确显示,并且可以作为静态原型,从而在开发团队中实现更强大的协作。
借助Spring Framework的模块,可以根据自己的喜好进行自由选择,可插拔功能组件,Thymeleaf是现代HTML5 JVM Web开发的理想选择 - 尽管它可以做的更多。
Spring官方支持的服务的渲染模板中,并不包含jsp。而是Thymeleaf和Freemarker等,而Thymeleaf与SpringMVC的视图技术,及SpringBoot的自动化配置集成非常完美,几乎没有任何成本,你只用关注Thymeleaf的语法即可。
2.特点
特点:
- 动静结合:Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。
- 开箱即用:它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
- 多方言支持:Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。
- 与SpringBoot完美整合,SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器,我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别,就是在模板语法上有区别。
3.环境准备
我们来创建一个module,为学习Thymeleaf做准备:
3.1.创建module
使用spring 脚手架创建:
勾选web和Thymeleaf的依赖:
项目结构:
pom:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.leyou.demo</groupId>
<artifactId>thymeleaf-demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>thymeleaf-demo</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.6.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
3.2.默认配置
不需要做任何配置,启动器已经帮我们把Thymeleaf的视图器配置完成:
而且,还配置了模板文件(html)的位置,与jsp类似的前缀+ 视图名 + 后缀风格:
- 默认前缀:
classpath:/templates/
- 默认后缀:
.html
所以如果我们返回视图:users
,会指向到 classpath:/templates/users.html
Thymeleaf默认会开启页面缓存,提高页面并发能力。但会导致我们修改页面不会立即被展现,因此我们关闭缓存:
# 关闭Thymeleaf的缓存
spring.thymeleaf.cache=false
另外,修改完毕页面,需要使用快捷键:Ctrl + Shift + F9
来刷新工程。
3.3.快速开始
我们准备一个controller,控制视图跳转:
@Controller
public class HelloController {
@GetMapping("show1")
public String show1(Model model){
model.addAttribute("msg", "Hello, Thymeleaf!");
return "hello";
}
}
新建一个html模板:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<h1 th:text="${msg}">大家好</h1>
</body>
</html>
注意,把html 的名称空间,改成:xmlns:th="http://www.thymeleaf.org"
会有语法提示
启动项目,访问页面:
4.语法
Thymeleaf的主要作用是把model中的数据渲染到html中,因此其语法主要是如何解析model中的数据。从以下方面来学习:
- 变量
- 方法
- 条件判断
- 循环
- 运算
- 逻辑运算
- 布尔运算
- 比较运算
- 条件运算
- 其它
4.1.变量
变量案例
我们先新建一个实体类:User
public class User {
String name;
int age;
User friend;// 对象类型属性
}
然后在模型中添加数据
@GetMapping("show2")
public String show2(Model model){
User user = new User();
user.setAge(21);
user.setName("Jack Chen");
user.setFriend(new User("李小龙", 30));
model.addAttribute("user", user);
return "show2";
}
语法说明:
Thymeleaf通过${}
来获取model中的变量,注意这不是el表达式,而是ognl表达式,但是语法非常像。
示例:
我们在页面获取user数据:
<h1>
欢迎您:<span th:text="${user.name}">请登录</span>
</h1>
效果:
感觉跟el表达式几乎是一样的。不过区别在于,我们的表达式写在一个名为:th:text
的标签属性中,这个叫做指令
动静结合
指令:
Thymeleaf崇尚自然模板
,意思就是模板是纯正的html代码,脱离模板引擎,在纯静态环境也可以直接运行。现在如果我们直接在html中编写 ${}
这样的表达式,显然在静态环境下就会出错,这不符合Thymeleaf的理念。
Thymeleaf中所有的表达式都需要写在指令
中,指令是HTML5中的自定义属性,在Thymeleaf中所有指令都是以th:
开头。因为表达式${user.name}
是写在自定义属性中,因此在静态环境下,表达式的内容会被当做是普通字符串,浏览器会自动忽略这些指令,这样就不会报错了!
现在,我们不经过SpringMVC,而是直接用浏览器打开页面看看:
- 静态页面中,
th
指令不被识别,但是浏览器也不会报错,把它当做一个普通属性处理。这样span
的默认值请登录
就会展现在页面 - 如果是在Thymeleaf环境下,
th
指令就会被识别和解析,而th:text
的含义就是替换所在标签中的文本内容,于是user.name
的值就替代了span
中默认的请登录
指令的设计,正是Thymeleaf的高明之处,也是它优于其它模板引擎的原因。动静结合的设计,使得无论是前端开发人员还是后端开发人员可以完美契合。
向下兼容
但是要注意,如果浏览器不支持Html5怎么办?
如果不支持这种th:
的命名空间写法,那么可以把th:text
换成 data-th-text
,Thymeleaf也可以兼容。
escape
另外,th:text
指令出于安全考虑,会把表达式读取到的值进行处理,防止html的注入。
例如,<p>你好</p>
将会被格式化输出为$lt;p$gt;你好$lt;/p$lt;
。
如果想要不进行格式化输出,而是要输出原始内容,则使用th:utext
来代替.
ognl表达式的语法糖
刚才获取变量值,我们使用的是经典的对象.属性名
方式。但有些情况下,我们的属性名可能本身也是变量,怎么办?
ognl提供了类似js的语法方式:
例如:${user.name}
可以写作${user['name']}
4.2.自定义变量th:object
场景
看下面的案例:
<h2>
<p>Name: <span th:text="${user.name}">Jack</span>.</p>
<p>Age: <span th:text="${user.age}">21</span>.</p>
<p>friend: <span th:text="${user.friend.name}">Rose</span>.</p>
</h2>
我们获取用户的所有信息,分别展示。
当数据量比较多的时候,频繁的写user.
就会非常麻烦。
因此,Thymeleaf提供了自定义变量来解决:
示例:
<h2 th:object="${user}">
<p>Name: <span th:text="*{name}">Jack</span>.</p>
<p>Age: <span th:text="*{age}">21</span>.</p>
<p>friend: <span th:text="*{friend.name}">Rose</span>.</p>
</h2>
- 首先在
h2
上 用th:object="${user}"
获取user的值,并且保存 - 然后,在
h2
内部的任意元素上,可以通过*{属性名}
的方式,来获取user中的属性,这样就省去了大量的user.
前缀了
4.3.方法
ognl表达式中的方法调用
ognl表达式本身就支持方法调用,例如:
<h2 th:object="${user}">
<p>FirstName: <span th:text="*{name.split(' ')[0]}">Jack</span>.</p>
<p>LastName: <span th:text="*{name.split(' ')[1]}">Li</span>.</p>
</h2>
- 这里我们调用了name(是一个字符串)的split方法。
Thymeleaf内置对象
Thymeleaf中提供了一些内置对象,并且在这些对象中提供了一些方法,方便我们来调用。获取这些对象,需要使用#对象名
来引用。
- 一些环境相关对象
对象 | 作用 |
---|---|
#ctx | 获取Thymeleaf自己的Context对象 |
#requset | 如果是web程序,可以获取HttpServletRequest对象 |
#response | 如果是web程序,可以获取HttpServletReponse对象 |
#session | 如果是web程序,可以获取HttpSession对象 |
#servletContext | 如果是web程序,可以获取HttpServletContext对象 |
- Thymeleaf提供的全局对象:
对象 | 作用 |
---|---|
#dates | 处理java.util.date的工具对象 |
#calendars | 处理java.util.calendar的工具对象 |
#numbers | 用来对数字格式化的方法 |
#strings | 用来处理字符串的方法 |
#bools | 用来判断布尔值的方法 |
#arrays | 用来护理数组的方法 |
#lists | 用来处理List集合的方法 |
#sets | 用来处理set集合的方法 |
#maps | 用来处理map集合的方法 |
- 举例
我们在环境变量中添加日期类型对象
@GetMapping("show3")
public String show3(Model model){
model.addAttribute("today", new Date());
return "show3";
}
在页面中处理
<p>
今天是: <span th:text="${#dates.format(today,'yyyy-MM-dd')}">2018-04-25</span>
</p>
效果:
4.4 字面值
有的时候,我们需要在指令中填写基本类型如:字符串、数值、布尔等,并不希望被Thymeleaf解析为变量,这个时候称为字面值。
-
字符串字面值
使用一对
'
引用的内容就是字符串字面值了:<p> 你正在观看 <span th:text="'thymeleaf'">template</span> 的字符串常量值. </p>
th:text
中的thymeleaf并不会被认为是变量,而是一个字符串
-
数字字面值
数字不需要任何特殊语法, 写的什么就是什么,而且可以直接进行算术运算
<p>今年是 <span th:text="2018">1900</span>.</p> <p>两年后将会是 <span th:text="2018 + 2">1902</span>.</p>
-
布尔字面值
布尔类型的字面值是true或false:
<div th:if="true"> 你填的是true </div>
这里引用了一个
th:if
指令,跟vue中的v-if
类似
4.5 拼接
我们经常会用到普通字符串与表达式拼接的情况:
<span th:text="'欢迎您:' + ${user.name} + '!'"></span>
字符串字面值需要用''
,拼接起来非常麻烦,Thymeleaf对此进行了简化,使用一对|
即可:
<span th:text="|欢迎您:${user.name}!|"></span>
与上面是完全等效的,这样就省去了字符串字面值的书写。
4.6 运算
需要注意:${}
内部的是通过OGNL表达式引擎解析的,外部的才是通过Thymeleaf的引擎解析,因此运算符尽量放在${}
外进行。
-
算术运算
支持的算术运算符:
+ - * / %
<span th:text="${user.age}"></span> <span th:text="${user.age}%2 == 0"></span>
-
比较运算
支持的比较运算:
>
,<
,>=
and<=
,但是>
,<
不能直接使用,因为xml会解析为标签,要使用别名。注意
==
and!=
不仅可以比较数值,类似于equals的功能。可以使用的别名:
gt (>), lt (<), ge (>=), le (<=), not (!). Also eq (==), neq/ne (!=).
-
条件运算
- 三元运算
<span th:text="${user.sex} ? '男':'女'"></span>
三元运算符的三个部分:conditon ? then : else
condition:条件
then:条件成立的结果
else:不成立的结果
其中的每一个部分都可以是Thymeleaf中的任意表达式。
-
默认值
有的时候,我们取一个值可能为空,这个时候需要做非空判断,可以使用
表达式 ?: 默认值
简写:
<span th:text="${user.name} ?: '二狗'"></span>
当前面的表达式值为null时,就会使用后面的默认值。
注意:
?:
之间没有空格。
4.7 循环
循环也是非常频繁使用的需求,我们使用th:each
指令来完成:
假如有用户的集合:users在Context中。
<tr th:each="user : ${users}">
<td th:text="${user.name}">Onions</td>
<td th:text="${user.age}">2.41</td>
</tr>
- ${users} 是要遍历的集合,可以是以下类型:
- Iterable,实现了Iterable接口的类
- Enumeration,枚举
- Interator,迭代器
- Map,遍历得到的是Map.Entry
- Array,数组及其它一切符合数组结果的对象
在迭代的同时,我们也可以获取迭代的状态对象:
<tr th:each="user,stat : ${users}">
<td th:text="${user.name}">Onions</td>
<td th:text="${user.age}">2.41</td>
</tr>
stat对象包含以下属性:
- index,从0开始的角标
- count,元素的个数,从1开始
- size,总元素个数
- current,当前遍历到的元素
- even/odd,返回是否为奇偶,boolean值
- first/last,返回是否为第一或最后,boolean值
4.8 逻辑判断
有了if和else
,我们能实现一切功能_。
Thymeleaf中使用th:if
或者 th:unless
,两者的意思恰好相反。
<span th:if="${user.age} < 24">小鲜肉</span>
如果表达式的值为true,则标签会渲染到页面,否则不进行渲染。
以下情况被认定为true:
- 表达式值为true
- 表达式值为非0数值
- 表达式值为非0字符
- 表达式值为字符串,但不是
"false"
,"no"
,"off"
- 表达式不是布尔、字符串、数字、字符中的任何一种
其它情况包括null都被认定为false
4.9 分支控制switch
这里要使用两个指令:th:switch
和 th:case
<div th:switch="${user.role}">
<p th:case="'admin'">用户是管理员</p>
<p th:case="'manager'">用户是经理</p>
<p th:case="*">用户是别的玩意</p>
</div>
需要注意的是,一旦有一个th:case成立,其它的则不再判断。与java中的switch是一样的。
另外th:case="*"
表示默认,放最后。
页面:
4.10.JS模板
模板引擎不仅可以渲染html,也可以对JS中的进行预处理。而且为了在纯静态环境下可以运行,其Thymeleaf代码可以被注释起来:
<script th:inline="javascript">
const user = /*[[${user}]]*/ {};
const age = /*[[${user.age}]]*/ 20;
console.log(user);
console.log(age)
</script>
-
在script标签中通过
th:inline="javascript"
来声明这是要特殊处理的js脚本 -
语法结构:
const user = /*[[Thymeleaf表达式]]*/ "静态环境下的默认值";
因为Thymeleaf被注释起来,因此即便是静态环境下, js代码也不会报错,而是采用表达式后面跟着的默认值。
看看页面的源码:
我们的User对象被直接处理为json格式了,非常方便。
控制台:
4.11模板的制作与引用
4.11.1导航栏模板
对于页面的导航栏和底部的展示栏,每个页面可能都存在一份,可以把相同的部分抽取出来做成一个模板,在各个页面中引入
导航栏模板的制作
th:fragment
<nav th:fragment="menu(n)" class="ui inverted">
<div class="ui container">
<!-- 导航组件 stackable: 为了响应手机的移动端,含义为可以堆叠 -->
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">后台管理</h2>
<!--给导航添加url-->
<a href="#" th:href="@{/admin/blogs}" class="m-item"
<!--当n的值为1的时候,就会给class添加active的属性-->
th:classappend="${n==1}?'active'">
<i class="home icon"></i>博客
</a>
</div>
</div>
</nav>
导航栏模板的引用
th:replace
<!--
admin/ : 是指模板所在的路径
_fragments: 是模板的文件名称 全称是_fragments.html
menu() : 是模板的名称,括号中的1是指传入的参数,当参数为1的时候,模板会添加active的属性
-->
<nav th:replace="admin/_fragments :: menu(1)" class="ui segment">
</nav>
4.11.2head模板
模板的制作
<head th:fragment="head(title)">
<meta charset="UTF-8">
<!-- 移动端的预览设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title th:replace="${title}">博客详情</title>
<link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
<!-- 引入中文排版的css -->
<link rel="stylesheet" href="../../static/css/typo.css" th:href="@{/css/typo.css}">
</head>
模板的引用
<head th:replace="admin/_fragments :: head(~{::title})">
<title>博客管理</title>
</head>
4.11.3 js模板
由于js文件都是单独引入的,没有一个标签把
<th:block th:fragment="script">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn./npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="../static/js/zzsc.js" th:src="@{/js/zzsc.js}"></script>
</th:block>
引入
script 为模板的片段名称
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<!--/*/</th:block>/*/-->
4.12 静态资源的引用
入引用本地静态文件的话,需要加上 th:href=“@{/路径}“或者th:src=”@{/路径}”,否在引用失效
引入js文件
<script src="../../static/lib/layui/layui.all.js" charset="utf-8" th:src="@{/lib/layui/layui.all.js}"></script>
引入css文件和静态图片
<link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
<img src="../../static/images/jojo.png" th:src="@{/images/jojo.png}" alt="" class="ui ">
4.13请求的发送
表单提交的POST请求
th:action=“@{/请求路径}”
<form id="blog-form" action="#" th:object="${blog}" th:action="@{/admin/blogs}" method="POST" class="ui form">
<!--文件上传成功之后图片地址的回调,放置到隐藏域当中-->
<input type="hidden" name="firstPicture" id="blogImg" th:value="*{firstPicture}">
</form>
// 发送局部请求的方法
function postData() {
$("#comment-container").load(/*[[@{/comments}]]*/"",{
// 把输入框(input标签)中的内容提交给name属性,然后发送给后端
"parentComment.id" : $("[name='parentComment.id']").val(),
"blog.id" : $("[name='blog.id']").val(),
"nickname": $("[name='nickname']").val(),
"email" : $("[name='email']").val(),
"content" : $("[name='content']").val()
},function (responseTxt, statusTxt, xhr) {
// 提交成功之后的回调,清除输入框中输入的数据
clearContent();
});
}
// 清除输入框输入的数据
function clearContent() {
$("[name='content']").val('');
$("[name='parentComment.id']").val(-1);
// 清除输入款中的提示信息,把输入框中的消息给替换为 请输入评论信息
$("[name='content']").attr("placeholder", "请输入评论信息...");
}
普通的GET请求
<!--点击a标签,发送get请求,挑战页面-->
<a href="#" th:href="@{/types/-1}">跳转</a>
获取参数放到get请求中
<a href="#" th:href="@{/admin/blogs/{id}/input(id=${blog.id})}" class="ui ">编辑</a>
4.14接收后端的提示信息
<!--
文章增加成功或者失败的提示
只有当message不为空的时候,下面的div标签才会显示
-->
<div class="ui success message" th:unless="${#strings.isEmpty(message)}">
<i class="close icon"></i>
<div class="header">提示:</div>
<p th:text="${message}">恭喜,操作成功!</p>
</div>
后端的处理
public interface RedirectAttributes extends Model
// 删除博客(删除博客的同时,把博客下面的评论同步删除)
@GetMapping("/blogs/{id}/delete")
public String deleteBlog(@PathVariable Long id,RedirectAttributes attributes){
blogService.deleteBlog(id);
// 用在重定向到前端页面的时候使用
attributes.addFlashAttribute("message", "博客删除成功");
return "redirect:/admin/blogs";
}
4.15 常用的th标签
关键字 | 功能介绍 | 案例 |
---|---|---|
th:id | 替换id | <input th:id="'xxx' + ${collect.id}"/> |
th:text | 文本替换 | <p th:text="${collect.description}">description</p> |
th:utext | 支持html的文本替换 | <p th:utext="${htmlcontent}">content</p> |
th:object | 替换对象 | <div th:object="${session.user}"> |
th:value | 属性赋值 | <input th:value = "${user.name}" /> |
th:with | 变量赋值运算 | <div th:with="isEvens = ${prodStat.count}%2 == 0"></div> |
th:style | 设置样式 | <div th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"></div> |
th:onclick | 点击事件 | <td th:onclick = "'getCollect()'"></td> |
th:each | 属性赋值 | <tr th:each = "user,userStat:${users}"> |
th:if | 判断条件 | <a th:if = "${userId == collect.userId}"> |
th:unless | 和th:if判断相反 | <a th:href="@{/login} th:unless=${session.user != null}">Login</a> |
th:href | 链接地址 | <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> |
th:switch | 多路选择配合th:case使用 | <div th:switch="${user.role}"> |
th:fragment | th:switch的一个分支 | <p th:case = "'admin'">User is an administrator</p> |
th:includ | 布局标签,替换内容到引入的文件 | <head th:include="layout :: htmlhead" th:with="title='xx'"></head> |
th:replace | 布局标签,替换整个标签到引入的文件 | <div th:replace="fragments/header :: title"></div> |
th:selectd | selected选择框选中 | th:selected="(${xxx.id} == ${configObj.dd})" |
th:src | 图片类地址引入 | <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /> |
th:inline | 定义js脚本可以使用变量 | <script type="text/javascript" th:inline="javascript"> |
th:action | 表单提交的地址 | <form action="subscribe.html" th:action="@{/subscribe}"> |
th:remove | 删除某个属性 | <tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。 |
th:attr | 设置标签属性,多个属性可以用逗号分隔 | 比如 th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。 |
4.16 th:value
input输入框的属性值
<!--如果session中有值的话,就算input输入框没有输入的话,输入框也会显示用户名,用户名从session中获取-->
<input type="text" name="nickname" placeholder="姓名" th:value="${session.user}!=null ? ${session.user.nickname}">
<!--原理同上-->
<input type="text" name="email" placeholder="邮箱" th:value="${session.user}!=null ? ${session.user.email}">
效果
4.17 th:filed
th:filed
- 下拉列表中 th:field 改为 th:value 会造成数据无法绑定.下拉列表无法显示指定的初始值
- th:field需要有th:object指定前台传过来的参数,否则浏览器在解析的时候会出现错误
- 常用于表单字段绑定。通常与th:object一起使用。 属性绑定、集合绑定
<div class="main-content" th:object="${formdata}">
<div id="kensaku" class="row">
<div class="form-group" style="width:83.5%">
<label class="col-cs-1 control-label no-padding-right"> 社員: </label>
<div class="col-cs-3">
<!--
此处*{shainCd} 和 ${c.value} 的值 若一致,则下拉列表显示社员名称
若把 th:field="*{shainCd}" 替换为 th:value="*{shainCd}" 则下拉列表失效
-->
<SELECT id="shainCd" th:field="*{shainCd}" name="shainCd">
<!--
shainList 为后台返回到前台的社员列表
value为社员编号,例如 1
text为社员名称,例如 张三
之所以用 th:utext 不用 th:text的原因是 要显示html格式
-->
<option th:each="c:*{shainList}"
th:value="${c.value}" th:utext="${c.text}">
</option>
</SELECT>
</div>
</div>
</div>
</div>
后台概要
// 下拉列表类
public class SelectItem {
// 下拉列表编号,例如1
private String value;
// 下拉列表值,例如 张三
private String text;
public SelectItem(String value, String text) {
this.value = value;
this.text = text;
}
// 静态方法
public static SelectItem emptyItem() {
return new SelectItem("", "");
}
public static SelectItem item() {
return new SelectItem(" ", "なし");
}
public static SelectItem zeroitem() {
return new SelectItem("0", "なし");
}
}
// service层获取社员列表的方法
public List<SelectItem> getShainList(boolean hasBlankRow) {
// 具体业务省略
List<SelectItem> shoninshaList = new ArrayList<SelectItem>();
// 如果为true的话,则添加一列空白的下拉列表
if (hasBlankRow) {
shoninshaList.add(SelectItem.emptyItem());
}
return shoninshaList;
}
@RequestMapping("/index")
public ModelAndView index(S015001Form form) {
// 社員リストの取得
form.setShainList(commonListService.getShainList(true));
return this.backView("S015001", form);
}
当th:field用在input标签时,th:field属性会将参数名作为id和name的值,并将th:field属性的值作为value的值
<input th:field="*{name}"/>
<!--经过解析之后会变为-->
<input id="name" name="name" value="hello!">
4.18 th:if
只有当条件满足,值为1的时候,才会显示编辑按钮,否则不显示
<div class="col-cs-1" style="float: left;" th:if="*{editNaisenJohoRole} eq '1'" >
<button class="btn btn-success btn-sm input-rad" type="button" onclick="showEdit()">
<i class="fa fa-external-link bigger-110"></i>
編集
</button>
</div>
5. Elvis运算符的使用
Elvis运算(?:)可以理解成简单的判断是否为null的三元运算的简写
-
如果值为null则显示默认值,
-
如果不为null 则显示原有的值。
<!--Elvis运算符的使用-->
<span th:text="${null} ?: '只有为null的时候才会显示'"></span>
<!--结果页面-->
<span>只有为null的时候才会显示</span>
<span th:text="${'hello'} ?: '值不是null,我不会显示'"></span>
<!--结果页面-->
<span>hello</span>
Elvis运算符的一种特殊简写操作,当显示的值为null的时候,不进行任何处理
<span th:text="${null} ?: _">我还是原来的值</span>
<!--结果页面-->
<span>我还是原来的值</span>
6. 三元表达式
<p th:value="${'jmw' eq 'jmw' ? '帅哥':'丑男'}"
th:text="${'jft' eq 'ljk' ? '帅哥':'丑男'}"></p>
<!--结果页面-->
<p value="帅哥">丑男</p>
7. HTML内联操作
-
[[…]]对应于th:text
-
[(…)]对应于th:utext
⭕java
@GetMapping("/test")
public ModelAndView locale(Map map){
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("test");
Student student = new Student();
student.setName("jiamingwei");
student.setTest("<p style=\"color: red\">123</p>");
modelAndView.addObject("formdata", student);
return modelAndView;
}
⭕html
<form th:object="${formdata}">
<!--相当于th:text-->
<div>[[*{name}]]</div>
<!--结果页面-->
<div>jiamingwei</div>
<!--相当于th:utext-->
<div>[(*{test})]</div>
<!--结果页面-->
<div><p style="color: red">123</p></div>
</form>
8. JS内联操作
script 标签上声明 th:inline="javascript"
然后我们就可以 script 标签中使用内联操作了
注意:
- 只能在html的script标签中JS中使用内联语法,不能在纯js文件中使用
<script th:inline="javascript">
var formdata = [[${formdata}]];
</script>