spring boot提供的大量的模板引擎,比如:freemarker,groovy,thymeleaf,velocity等。springboot中推荐使用Thymeleaf作为模板引擎,因为Thymeleaf对SpringMVC提供了完美的支持,可以很方便的集成。
1.Thymeleaf语法基础
Thymeleaf的语法可以参考官网:http://www.thymeleaf.org/ 进行学习,其相对比较简单,下面列举出其常用的几个语法知识:
-
命名空间
html页面中引入thymeleaf命名空间,即<html xmlns:th=http://www.thymeleaf.org></html>,此时在html模板文件中动态的属性使用th:命名空间修饰
-
引用静态资源文件,
引入一些CSS和JS文件,语法格式为“@{}”,如@{/xxx.js }会引入/static目录下的/xxx.js文件
-
访问spring-mvc中model的属性:“${}”
如${user.name}可以获取model里的user对象的name属性
-
循环
在html的标签中,加入th:each=“value:${list}”形式的属性,如<span th:each=”user:${users}”></span>可以迭代users的数据,迭代出来的对象用user表示。
-
判断
在html标签中,加入th:if=”表达式”可以根据条件显示html元素 :<span th:if="${not #lists.isEmpty(users)}"> 表示判断userd这个list是否为空
-
时间的格式化
${#dates.format(blog.publishTime,'yyyy-MM-ddHH:mm:ss')},与java的语法类似
-
字符串拼接
th:href="'/user/delete/' + ${user.id}" 或者 th:href="${'/user/delete/' + user.id}
-
在js中使用model的数据: [ [ $ { user } ] ]
2.Thymeleaf与SpringBoot集成。
我们知道,springmvc中要集成一个模板引擎的话,需要定义一个视图解析器(ViewResolver),而视图解析器有需要设置一个视图(View)。Thymeleaf为我们定义好了ThymeleafView和ThymeleafViewResolver,他提供了一个SpringTemplateEngine,用来驱动在SpringMVC下使用Thymeleaf作为模板引擎,他还提供了一个模板解析器(TemplateResolver),用来设置通用的模板引擎(prefix,suffix等)。
我们在springboot的应用里,完全不需要手工集成,springboot也为我们自动配置好了一切。可以在
org.springframework.boot.autoconfigure.thymeleaf.ThymeleafAutoConfiguration
中看到对上述的ThymeleafViewResolver,TemplateResolver,templateEngine进行了相关的配置,我们只要在项目的pom.xml中引入thymeleaf即可:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
定义bean,用来传递数据。
package com.example.demo.bean;
/**
* Created by Joker on 2017/9/8.
*/
public class Customer {
private Long customerId;
private String customerName;
private String address;
public Customer() {
}
public Customer(Long customerId, String customerName, String address) {
this.customerId = customerId;
this.customerName = customerName;
this.address = address;
}
public Long getCustomerId() {
return customerId;
}
public void setCustomerId(Long customerId) {
this.customerId = customerId;
}
public String getCustomerName() {
return customerName;
}
public void setCustomerName(String customerName) {
this.customerName = customerName;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}
编写controller
该控制器为前台返回了一个customer和一个List<Customer>,返回值“customer”是resource/templates下的html文件名:
package com.example.demo.controller;
import com.example.demo.bean.Customer;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Joker on 2017/9/8.
*/
@Controller
public class CustomerController {
@RequestMapping("/customer")
public String getData(Model model){
Customer customer=new Customer(1L,"阿里巴巴","杭州");
List<Customer> list=new ArrayList<Customer>();
list.add(new Customer(2L,"百度", "北京"));
list.add(new Customer(3L,"腾讯", "深圳"));
list.add(new Customer(4L,"华为", "中国"));
model.addAttribute("customer",customer);
model.addAttribute("customers",list);
return "customer";
}
}
编写页面(resource/templates/customer.html):
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Thymeleaf Demo</title>
<link th:href="@{/bootstrap.min.css}" rel="stylesheet"/>
</head>
<body>
<div th:if="${not #lists.isEmpty(customers)}">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">客户列表</h3>
</div>
<div class="panel-body">
<table class="table table-bordered">
<tr th:each="item:${customers}">
<td th:text="${item.customerId}"></td>
<td th:text="${item.customerName}"></td>
<td th:text="${item.address}"></td>
</tr>
</table>
</div>
</div>
</div>
<script th:inline="javascript">
var single=[[${customer}]];
console.info(single.customerName);
</script>
</body>
</html>
页面逻辑:将后台返回出来的客户列表在页面展示出来,在控制台打印出单个customer的名称。其中,使用 <link th:href="@{/bootstrap.min.css}" rel="stylesheet"/>
会引入recource/static下面对应的资源文件。使用 th:inline="javascript"可以让js访问model里面的数据。用 [ [ $ {customer} ] ]获得实际的值。
效果:在浏览器输入:http://localhost:8881/customer 可以看见输出的结果如下
如有错误,欢迎指正,不胜感激。