首先我们要在pom.xml中分别导入两个坐标依赖,一个是Thymeleaf的引擎模板,一个是Freemarker的引擎模板:
<!-- 导入Thymeleaf模板引擎 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- 导入freemarker -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
随后,我们需要在application.yml文件中指定我们模板引擎的文件路径,比如前缀、后缀、编码格式等…
server:
port: 8085
servlet:
context-path: /hello
app:
appid: 10
com:
ysw:
socail:
qq:
appid: qqappid
appsecret: qqappsecret
spring:
datasource:
url: jdbc:mysql:///test?useUnicode=true&characterEncoding=utf-8
username: root
password: 123456
type: com.alibaba.druid.pool.DruidDataSource
# 开发的时候先关闭缓存
freemarker:
cache: false
template-loader-path: classpath:/static/
encoding: UTF-8
check-template-location: true
content-type: text/html; charset=utf-8
expose-request-attributes: true
expose-session-attributes: true
request-context-attribute: request
suffix: .ftl
thymeleaf:
cache: false
prefix: classpath:/templates/
suffix: .html
mode: HTML5
encoding: UTF-8
servlet:
content-type: text/html; charset=utf-8
mybatis:
mapper-locations: classpath:com/ysw/dao/*.xml
首先我们来看一下Thymeleaf模板引擎中的html文件是如何定义内容的:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 模板引擎是可以直接预览的,并且是静态访问的 -->
<h3>这里是thymeleaf的html</h3>
<p>this is thymeleaf</p>
<span th:text="${username}"></span>
</body>
</html>
这里可以看到,我们无非就是在标签里面嵌套使用了【th:text="${username}"】
,这个${username}
是通过后台进行设置的一个属性值,有点类似于我们的jsp文件。我们来看一下我们模板引擎是处于resources的templates目录下的,当然也可以指定到static目录下(如果要指定到static目录下的话就需要在application.yml
文件中指定好文件目录的前缀)。
再来看一下Freemarker模板引擎(都是定义以.ftl结尾的文件,并且格式跟jsp很像)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>这里是freemarker的html</h3>
<p>this is freemarker</p>
<span>${username}</span>
</body>
</html>
最后我们来看一下Controller层的代码:
package com.ysw.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
//模板引擎的控制器,这里不用RestController,因为这里是不用返回Json格式的
@Controller
@RequestMapping("/tem")
public class TemplateController {
/**
* 模板引擎限制死了返回值必须是String
* 并且必须有一个参数,并且参数是ModelMap
* @return
*/
//返回值是视图名,参数列表是ModelMap
@RequestMapping("/ftl")
public String freemarker(HttpServletRequest request){
//设置参数的方式不唯一,但是默认的话使用的是ModelMap
// ModelMap map
// map.addAttribute("username","adams-freemarker");
System.out.println("freemarker");
//设置参数
request.setAttribute("username","adams-freemarker-request");
//这里可以指定static目录下的,也可以指定templates目录下的(indexMarker.ftl / index.ftl)
return "freemarker/index";
}
@RequestMapping("/thy")
public String thymeleaf(ModelMap map){
map.addAttribute("username","adams-thymeleaf");
return "thymeleaf/index";
}
}
最后,我们只需要在Controller层的方法中返回一个String类型的路径,比如我们在application.yml
文件中指定好了前缀路径,所以只需要指定该路径下我们的模板引擎文件是处于哪个文件夹中的哪个文件名即可。
注意,如果我们想使用Thymeleaf实现一个foreach循环遍历的效果的话我们可以参考如下部分的demo案例:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 模板引擎是可以直接预览的,并且是静态访问的 -->
<h3>这里是thymeleaf的html</h3>
<p>this is thymeleaf</p>
<span th:text="${username}"></span>
<span th:text="${users}"></span>
<table border="1">
<tr>
<th>id</th>
<th>username</th>
<th>password</th>
<th>name</th>
</tr>
<tr th:each="user,userStatus:${users}">
<td th:text="${user.id}"></td>
<td th:text="${userStatus.index + user.username}"></td>
<td th:text="${user.password}"></td>
<td th:text="${user.name}"></td>
</tr>
</table>
</body>
</html>
这里的${users}
对象是controlller层传过来的一个集合对象,然后通过像Java那样的foreach循环的方式来进行遍历的操作。然后还定义了一个userStatus
的遍历对象,可以用于返回index下标之类的数据内容。接下来我们看一下controller层的代码:
@RequestMapping("/thy")
public String thymeleaf(ModelMap map){
map.addAttribute("username","adams-thymeleaf");
List<User> users = new ArrayList<User>();
for (int i = 0; i < 10; i++) {
users.add(new User(i,"username"+i,"password"+i,"name"+i));
}
map.addAttribute("users",users);
return "thymeleaf/index";
}