Spring Boot 推荐使用 Thymeleaf 来代替 JSP,Thymeleaf 模板到底是什么来头呢,下面我们来聊聊。
Thymeleaf 介绍
Thymeleaf 是一款用于渲染 XML/XHTML/HTML 5 内容的模板引擎。类似 JSP、Velocity、FreeMaker 等,它也可以轻易的与 Spring MVC 等 Web 框架进行集成作为 Web 应用的模板引擎。与其他模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。
Thymeleaf 特点
简单说,Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。相较与其他的模板引擎,它有如下三个极吸引人的特点:
对比
好了,你们说了我们已经习惯使用了什么 Velocity、FreMaker、Beetle 之类的模版,那么到底好在哪里呢?比一比吧!Thymeleaf 是与众不同的,因为它使用了自然的模板技术。这意味着 Thymeleaf 的模板语法并不会破坏文档的结构,模板依旧是有效的 XML 文档。模板还可以用作工作原型,Thymeleaf 会在运行期替换掉静态值。Velocity 与 FreeMarker 则是连续的文本处理器。
完整代码可在github下载。
https://github.com/zjh746140129/Spring-Boot2.0
项目结构截图:
1、编写用户类
package com.boot.model;
/**
* Created by zhoujh on 2018/6/25.
*/
public class User {
private String name;
private int age;
private String pass;
public User(String name, int age, String pass) {
this.name = name;
this.age = age;
this.pass = pass;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getPass() {
return pass;
}
public void setPass(String pass) {
this.pass = pass;
}
@Override
public String toString() {
return ("name=" + this.name + ",age=" + this.age + ",pass=" + this.pass);
}
}
2、编写controller
package com.boot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* Created by zhoujh on 2018/6/25.
*/
@Controller
public class HelloController {
@RequestMapping("/")
public String index(ModelMap map) {
map.addAttribute("message", "hello thymeleaf");
return "hello";
}
}
package com.boot.controller;
import com.boot.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
/**
* Created by zhoujh on 2018/6/25.
*/
@Controller
public class DemoController {
@RequestMapping("/example")
public String index(ModelMap map) {
map.addAttribute("userName", "neo");
map.addAttribute("flag", "yes");
map.addAttribute("users", getUserList());
map.addAttribute("type", "link");
map.addAttribute("pageId", "springcloud/2017/09/11");
map.addAttribute("img", "aaa.jpg");
map.addAttribute("count", 12);
map.addAttribute("date", new Date());
return "example";
}
private List getUserList(){
List list=new ArrayList();
User user1=new User("zhangsan",12,"123456");
User user2=new User("lisi",6,"123563");
User user3=new User("wangwu",66,"666666");
list.add(user1);
list.add(user2);
list.add(user3);
return list;
}
}
package com.boot.controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* Created by zhoujh on 2018/6/25.
*/
public class IndexController {
@RequestMapping("/index")
public String index() {
return "index";
}
@RequestMapping("/layout")
public String layout() {
return "layout";
}
@RequestMapping("/home")
public String home() {
return "home";
}
}
3、启动类
package com.boot;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class BootThymeleafApplication {
public static void main(String[] args) {
SpringApplication.run(BootThymeleafApplication.class, args);
}
}
4、页面HTML
一、copyright.html
Title
© 2018
二、footer.html
Title
三、header.html
Title
我是 头部
四、left.html
left
我是 左侧
五、example.html
Example
text
neo
for 循环
neo
6
213
index
内联[ [ ] ]
Hello, [[${userName}]]
内嵌变量
neo
neo
neo
userName
userName
userName
userName
六、hello.html
Hello
Hello World
七、home.html
个性化的内容
八、index.html
Index
九、layout.html
Layout
content
5、配置文件
server.port=8099
6、完整pom
4.0.0
com.boot
boot-thymeleaf
0.0.1-SNAPSHOT
jar
boot-thymeleaf
Demo project for Spring Boot
org.springframework.boot
spring-boot-starter-parent
2.0.3.RELEASE
UTF-8
UTF-8
1.8
org.springframework.boot
spring-boot-starter-thymeleaf
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-test
test
org.springframework.boot
spring-boot-starter-web
RELEASE
org.springframework.boot
spring-boot-maven-plugin
①、赋值、字符串拼接
neo
②、条件判断 If/Unless
Thymeleaf 中使用 th:if 和 th:unless 属性进行条件判断,下面的例子中,标签只有在 th:if 中条件成立时才显示
home
ityouknow
th:unless 与 th:if 恰好相反,只有表达式中的条件不成立,才会显示其内容。
也可以使用 (if) ? (then) : (else) 这种语法来判断显示的内容
③、for 循环
neo
6
213
index
iterStat 称作状态变量,属性有
④、URL
URL 在 Web 应用模板中占据着十分重要的地位,需要特别注意的是 Thymeleaf 对于 URL 的处理是通过语法 @{...} 来处理的。 如果需要 Thymeleaf 对 URL 进行渲染,那么务必使用 th:href、th:src 等属性,下面举一个例子:
link1
view
设置背景:
根据属性值改变背景:
几点说明:
- 上例中 URL 最后的 (pageId=${pageId}) 表示将括号内的内容作为 URL 参数处理,该语法避免使用字符串拼接,大大提高了可读性。
- @{...} 表达式中可以通过 {pageId} 访问 Context 中的 pageId 变量。
- @{/order} 是 Context 相关的相对路径,在渲染时会自动添加上当前 Web 应用的 Context 名字,假设 context 名字为 app,那么结果应该是 /app/order。
⑤、内联 [ [ ] ]
内联文本:[[...]] 内联文本的表示方式,使用时,必须先用在 th:inline="text/javascript/none" 激活,th:inline 可以在父级标签内使用,甚至作为 body 的标签。内联文本尽管比 th:text 的代码少,不利于原型显示。
文本内联:
内联js
Hello, [[${userName}]]
脚本内联,脚本内联可以在 js 中取到后台传过来的参数:
⑥、内嵌变量
为了模板更加易用,Thymeleaf 还提供了一系列 Utility 对象(内置于 Context 中),可以通过 # 直接访问:
- dates:java.util.Date 的功能方法类
- calendars: 类似 #dates,面向 java.util.Calendar
- numbers:格式化数字的功能方法类
- strings:字符串对象的功能类,contains、startWiths、prepending/appending 等
- objects:对 objects 的功能类操作
- bools: 对布尔值求值的功能方法
- arrays:对数组的功能类方法
- lists:对 lists 的功能类方法
- sets
- maps
下面用一段代码来举例一些常用的方法:
dates
neo
neo
neo
strings
userName
userName
userName
userName
2、常用th标签
关键字
功能介绍
案例
th:id
替换id
th:text
文本替换
description
th:utext
支html的文本替换
conten
th:object
替换对象
th:value
属性赋值
th:with
变量赋值运算
th:style
设置样式
th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick
点击事件
th:οnclick="'getCollect()'"
th:each
属性赋值
tr th:each="user,userStat:${users}">
th:if
判断条件
th:unless
和th:if判断相反
th:href
链接地址
Login />
th:switch
多路选择 配合th:case 使用
th:case
th:switch的一个分支
User is an administrator
th:fragment
布局标签,定义一个代码片段,方便其它地方引用
th:include
布局标签,替换内容到引入的文件
/>
th:replace
布局标签,替换整个标签到引入的文件
th:selected
selected选择框 选中
th:selected="(${xxx.id} == ${configObj.dd})"
th:src
图片类地址引入
th:inline
定义js脚本可以使用变量
th:action
表单提交的地址
th:remove
删除某个属性
1.all:删除包含标签和所有的子节点。2.body:不包含标记删除,但删除其所有的子节点。3.tag:包含标记的删除,但不删除它的子节点。4.all-but-first:删除所有包含标签的子节点,除了第一个。5.none:什么也不做。这个值是有用的动态评估
th:attr 设置标签属性,多个属性可以用逗号分隔 比如 th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少
还有非常多的标签,这里只列出最常用的几个,由于一个标签内可以包含多个th:x属性,其生效的优先级顺序为:
include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove。
三、实际项目演示
页面布局是最常用的功能之一,不论是前端还是后台都避免不了,使用 Thymeleaf 布局非常简单,下面来演示一下
例子1:我们做一套后台管理系统,我们把index页面需要的css、js封装成一个html,然后在页面直接通过标签引用即可
例子2:Thymeleaf 循环、标签使用