序言:
Thymeleaf 是Java服务端的模板引擎,与传统的JSP不同,前者可以使用浏览器直接打开,因为可以忽略掉拓展属性,相当于打开原生页面,给前端人员也带来一定的便利。如果你已经厌倦了JSP+JSTL的组合,Thymeleaf或许是个不错的选择!本工程传送门:SpringBoot-Web-Thymeleaf
开始使用
1.引入依赖
SpringBoot默认提供了Thymeleaf的Starter,只需简单引入依赖即可。
1
2
3
4
|
< dependency >
< groupId >org.springframework.boot</ groupId >
< artifactId >spring-boot-starter-thymeleaf</ artifactId >
</ dependency >
|
目前默认版本是2.1,如果想升级版本到3.0,可以这样修改。
1
2
3
4
|
< properties >
< thymeleaf.version >3.0.7.RELEASE</ thymeleaf.version >
< thymeleaf-layout-dialect.version >2.0.0</ thymeleaf-layout-dialect.version >
</ properties >
|
为了方便开发,项目案例采用了热部署工具dev-tools ,这样我们在修改页面之后,IDEA会自动加载,从而达到实现热更新的效果。
1
2
3
4
5
|
< dependency >
< groupId >org.springframework.boot</ groupId >
< artifactId >spring-boot-devtools</ artifactId >
< scope >runtime</ scope >
</ dependency >
|
注:由于IDEA默认关闭了热部署,需要做一些设置才能使其生效。解决方法:首先按住Ctrl+Shift+Alt+/ 然后进入 Registry ,然后勾选compiler.automake.allow.when.app.running 即可。另外,Build->Compiler 也要勾选上Build Project automatically .
2. 添加相关配置
Thymeleaf默认开启了页面缓存,在开发的时候,应该关闭缓存。此外,通常我们还会指定页面的存放路径。(默认是classpath:/templates/)
1
2
3
4
5
|
application.yml 配置如下:
spring:
thymeleaf:
cache: false #关闭缓存
prefix: classpath:/views/ #添加路径前缀
|
3.编写HTML
编写Thymeleaf和书写HTML5页面没有什么不同,最大的转变就是使用拓展属性(th:xx)去跟服务端进行数据交互,保留原始页面风格,也是Thymeleaf的推崇的风格。例如下面这个简单的案例,启动项目,我们发现页面跳转的是简书的连接,这一点也验证了Thymeleaf覆盖原生页面数据的极佳能力。
页面代码:
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
< html xmlns:th = "http://www.thymeleaf.org" >
< head >
< title >Thymeleaf</ title >
</ head >
< body >
< h2 >欢迎使用Thymeleaf!!</ h2 >
< a href = "http://www.baidu.com" rel = "external nofollow" th:href = "${info}" rel = "external nofollow" >戳我有惊喜</ a >
</ body >
</ html >
|
后端代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
@Controller
public class UserController {
@GetMapping ( "/" )
public String index(Model model) {
model.addAttribute( "info" , "user/list" );
return "index" ;
}
@GetMapping ( "/user" )
public String hehe(Model model) {
model.addAttribute( "user" , new User(UUID.randomUUID().toString(), "yizhiwazi" , "20170928" ));
return "user" ;
}
@GetMapping ( "/user/list" )
public String userlist(Model model) {
List<User> userList = new ArrayList<>();
userList.add( new User(UUID.randomUUID().toString(), "yizhiwazi" , "20170928" ));
userList.add( new User(UUID.randomUUID().toString(), "kumamon" , "123456" ));
userList.add( new User(UUID.randomUUID().toString(), "admin" , "admin" ));
model.addAttribute( "userList" , userList);
return "userList" ;
}
}
|
现在我们尝试回填一个表单,展示单个用户信息。
1
2
3
4
5
6
|
<!-- 使用th:object 搭配*{} 可以省略对象名 -->
< form action = "/" th:object = "${user}" >
< input type = "hidden" name = "userId" th:value = "*{userId}" />
< input type = "text" name = "username" th:value = "*{username}" />
< input type = "text" name = "password" th:value = "*{password}" />
</ form >
|
接下来,我们进入一个更复杂的案例,例如展示一个用户列表信息,不需要编写新的标签,就可以完成对批量用户的遍历。
1
2
3
4
5
6
7
|
< h2 >用户列表</ h2 >
<!--说明: th:each="obj,stat:${objects}" 分别代表单个实例,状态(可省略),待遍历对象-->
< div th:each = "user:${userList}" >
< input type = "hidden" name = "userId" th:value = "${user.userId}" />
用户姓名:< input type = "text" name = "password" th:value = "${user.username}" />
登录密码:< input type = "text" name = "username" th:value = "${user.password}" />
</ div >
|
好了,Thymeleaf简单介绍到这里,更多详细说明,可阅读Thymeleaf 官方指南 3.0
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:http://www.jianshu.com/p/8dc48fa74e7e?utm_source=tuicool&utm_medium=referral