Thymeleaf
2020-11-25 本文已影响0人
_FireFly_
开发传统Java WEB工程时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用了。SpringBoot支持如下页面模板语言
- Thymeleaf
- FreeMarker
- Velocity
- Groovy
- JSP
上面并没有列举所有SpringBoot支持的页面模板技术。其中Thymeleaf是SpringBoot官方所推荐使用的，下面来谈谈Thymeleaf一些常用的语法规则。
添加Thymeleaf依赖
要想使用Thhymeleaf，首先要在pom.xml文件中单独添加Thymeleaf依赖。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Spring Boot默认存放模板页面的路径在src/main/resources/templates或者src/main/view/templates，这个无论是使用什么模板语言都一样，当然默认路径是可以自定义的，不过一般不推荐这样做。另外Thymeleaf默认的页面文件后缀是.html。
数据显示
在MVC的开发过程中，我们经常需要通过Controller将数据传递到页面中，让页面进行动态展示。
显示普通文本
创建一个Controller对象，在其中进行参数的传递
@Controller
public class ThymeleafController {
@RequestMapping(value = "show", method = RequestMethod.GET)
public String show(Model model){
model.addAttribute("uid","123456789");
model.addAttribute("name","Jerry");
return "show";
}
}
在SpringBoot默认的页面路径下创建show.html文件，内容如下
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>SpringBoot模版渲染</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
<p th:text="'用户ID：' + ${uid}"/>
<p th:text="'用户名称：' + ${name}"/>
</body>
</html>
可以看到在p标签中有th:text属性，这个就是thymeleaf的语法，它表示显示一个普通的文本信息。
如果我们要显示的信息是存在资源文件中的，同样可以在页面中显示，例如资源文件中定义了内容welcome.msg=欢迎{0}光临！。可以在页面中将其显示
<h2 th:text="#{welcome.msg('admin')}"/>
另外，在th:utext中还能做一些基础的数学运算
<p th:text="'数学计算：1+2=' + (1 + 2)"/>
显示带有样式的普通文本
如果我们想要传递到的页面的信息，它本身是带有CSS样式的，这个时候如何在页面中将携带的样式信息也显示出来？此时我们的控制器方法这样写。
@RequestMapping(value = "showStyle", method = RequestMethod.GET)
public String showStyle(Model model){
model.addAttribute("uid","123456789");
model.addAttribute("name","<span style='color:red'>Jerry</span>");
return "show_style";
}
此时页面中需要借助th:utext属性进行显示
<p th:utext="'用户名称：' + ${name}"/>
通过浏览器查看页面源码可以看出th:utext和th:text的区别是：th:text会对<和>进行转义，而th:utext不会转义。
显示对象
我们常常需要将一个bean信息展示在前端页面当中。
- 用于前端展示的VO类
public class User implements Serializable {
private Long uid ;
private String name ;
private Integer age ;
private Date birthday ;
private Double salary ;
//省略get/set方法
}
- 控制器方法
@RequestMapping(value = "/message/member_show", method = RequestMethod.GET)
public String memberShow(Model model) {
User vo = new User();
vo.setUid(12345678L);
vo.setName("尼古拉丁.赵四");
vo.setAge(59);
vo.setSalary(1000.00);
vo.setBirthday(new Date());
model.addAttribute("member", vo);
return "message/member_show";
}
- 页面展示
<div>
<p th:text="'用户编号：' + ${member.uid}"/>
<p th:text="'用户姓名：' + ${member.name}"/>
<p th:text="'用户年龄：' + ${member.age}"/>
<p th:text="'用户工资：' + ${member.salary}"/>
<p th:text="'出生日期：' + ${member.birthday}"/>
<p th:text="'出生日期：' + ${#dates.format(member.birthday,'yyyy-MM-dd')}"/>
</div>
<hr/>
<div th:object="${member}">
<p th:text="'用户编号：' + *{uid}"/>
<p th:text="'用户姓名：' + *{name}"/>
<p th:text="'用户年龄：' + *{age}"/>
<p th:text="'用户工资：' + *{salary}"/>
<p th:text="'出生日期：' + *{birthday}"/>
<p th:text="'出生日期：' + *{#dates.format(birthday,'yyyy-MM-dd')}"/>
</div>
上面给出了两种展现方式，一种是通过${属性}，另外一种是通过{属性}。
***关于“访问完整信息，{}访问指定对象中的属性内容， 如果访问的只是普通的内容两者没有区别
数据处理
在 thymeleaf 之中提供有相应的集合的处理方法，例如：在使用 List 集合的时候可以考虑采用 get()方法获取指定索引的数据，那么在使用 Set 集合的时候会考虑使用 contains()来判断某个数据是否存在，使用 Map 集合的时候也希望可以使用 containsKey()判断某个 key 是否存在，以及使用get()根据 key 获取对应的 value，而这些功能在之前并不具备，下面来观察如何在页面中使用此类操作
- 控制器方法向页面传递一些数据，以供操作
@RequestMapping(value = "/user/set", method = RequestMethod.GET)
public String set(Model model) {
Set<String> allNames = new HashSet<String>() ;
List<Integer> allIds = new ArrayList<Integer>() ;
for (int x = 0 ; x < 5 ; x ++) {
allNames.add("boot-" + x) ;
allIds.add(x) ;
}
model.addAttribute("names", allNames) ;
model.addAttribute("ids", allIds) ;
model.addAttribute("mydate", new java.util.Date()) ;
return "user_set" ;
}
- 数据处理
<body>
<p th:text="${#dates.format(mydate,'yyyy-MM-dd')}"/>
<p th:text="${#dates.format(mydate,'yyyy-MM-dd HH:mm:ss.SSS')}"/>
<hr/>
<p th:text="${#strings.replace('www.baidu.cn','.','$')}"/>
<p th:text="${#strings.toUpperCase('www.baidu.cn')}"/>
<p th:text="${#strings.trim('www.baidu.cn')}"/>
<hr/>
<p th:text="${#sets.contains(names,'boot-0')}"/>
<p th:text="${#sets.contains(names,'boot-9')}"/>
<p th:text="${#sets.size(names)}"/>
<hr/>
<p th:text="${#sets.contains(ids,0)}"/>
<p th:text="${ids[1]}"/>
<p th:text="${names[1]}"/>
</body>
路径处理
在传统WEB工程开发时，路径的处理操作是有点麻烦的。SpringBoot中为我们简化了路径的处理。
- 在"src/main/view/static/js"中创建一个js文件
