springboot-4.模板引擎freemarker&thymeleaf
springboot入门篇集合
- springboot-1.简约版创建第一个应用
- springboot-2.利用接口返回数据（json）
- springboot-3.资源文件属性配置
- springboot-4.模板引擎freemarker&thymeleaf
- springboot-5.全局异常捕获
- springboot-6.整合Mybatis
- springboot-7.快速上手redis
前言
关于freemarker和thymeleaf的介绍自行查阅，本文只讲快速入门使用。
freemarker
(1)在pom文件中添加依赖项
<!-- freemarker 依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
(2)在application.yml文件中添加freemarker相关配置
spring:
http:
encoding:
force: true
charset: UTF-8
freemarker:
allow-request-override: false
cache: false
check-template-location: true
charset: UTF-8
content-type: text/html; charset=utf-8
expose-request-attributes: false
expose-session-attributes: false
expose-spring-macro-helpers: false
suffix: .ftl
template-loader-path: classpath:/templates
(3)在templates文件夹下新建一个freemarker文件夹，然后再在该文件夹下新建文件center.ftl
文件树结构：
快速创建一个网页模板进行测试，内容如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>${host}</div>
</body>
</html>
ps：其中host的值通过后台读取。
（4）在controller文件夹下新建一个freemarkerController.java文件
@Controller
public class freemarkerController {
@RequestMapping("/")
public String index(ModelMap map) {
map.addAttribute("host","ericam");
return "freemarker/center";
}
}
ps: 通过map将字符串ericam赋值给host，然后返回前端页面（可以不用写后缀ftl）
(5)预览
此时打开浏览器可以看到如下内容：
接下来着重介绍thymeleaf，它在日常项目中使用更加广泛。（ps:项目中可以同时使用freemarker和thymeleaf）
Thymeleaf
一. 快速入门使用
（1）在pom文件夹添加项目依赖
<!-- ThymeLeaf 依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
(2)在application.yml文件中添加themeleaf相关配置
spring:
thymeleaf:
cache: false # 开发时关闭缓存,不然没法看到实时页面
mode: HTML # 用非严格的 HTML
encoding: UTF-8
servlet:
content-type: text/html
(3)
在templates文件夹下新建一个themeleaf文件夹，然后再新建一个test.html
文件树：
新建一个User.java文件
文件树：
(4)编写User.java文件
为了方便测试，用户具备如下属性：
- id
- 用户名
- 年龄
- 创建时间
- 用户简介
public class User {
private String id;
private int age;
private String username;
private Date createTime;
private String desc;
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getDesc() {
return desc;
}
public void setDesc(String desc) {
this.desc = desc;
}
//请读者自行补充 构造器和 get/set方法..
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public Date getCreateTime() {
return createTime;
}
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
}
(5)新建一个themeleafController.java进行测试
@Controller
public class themeleafController {
@RequestMapping("/test")
public String test(ModelMap map)
{
User u = new User();
u.setId("123");
u.setUsername("fwf");
u.setCreateTime(new Date(2020-1900,6-1,12));
u.setDesc("ssssssssssss
");
u.setAge(18);
map.addAttribute("user",u); //这里的user对应html里的user
return "thymeleaf/test";
}
}
(6)最后我们进行编写test.html文件
<div>
<input type="text" th:id="${user.username}" th:name="${user.username}" th:value="${user.username}">
<input type="text" th:id="${user.age}" th:name="${user.age}" th:value="${user.age}">
<input type="text" th:id="${user.createTime}" th:name="${user.createTime}" th:value="${#dates.format(user.createTime,'dd/MM/yyyy')}">
<span th:utext="${user.desc}">span>
div>
ps: th:utext可以将内容作为html格式输出，而th:text则是直接输出文本。
(7)预览
二.Thymeleaf常用标签-方法
（1）上述test.html的等同写法
<div th:object="${user}">
<input type="text" th:id="*{username}" th:name="*{username}" th:value="*{username}">
div>
这样可以简化内容，使用更加广泛。
（2）表单的提交
我们在test.html里添加如下内容
<div>
<form th:action="@{/postform}" th:object="${user}" method="post" th:method="post">
<input type="text" th:field="*{username}"/>
<input type="submit"/>
form>
div>
ps:提交地址为 url/postform ,提交方法为post，提交的内容为user.username
接着在themeleafController添加如下内容
@PostMapping("/postform")
public String postform(User u) //前端传入了一个User对象
{
System.out.println(u.getUsername());
return "redirect:/test"; //重定向（等于转向/test地址
}
（3）th:if标签
<div th:if="${user.age}==18">1div>
<div th:if="${user.age} gt 18">2div>
<div th:if="${user.age} lt 18">3div>
<div th:if="${user.age} ge 18">4div>
<div th:if="${user.age} le 18">5div>
(4)th:selected标签
<select>
<option >选择框option>
<option th:selected="${user.username eq 'fwf'}">fwfoption>
select>
(5)table表单
<table>
<tr>
<th>idth>
<th>姓名th>
<th>年龄th>
<th>创建时间th>
tr>
<tr th:each="person:${userlist}">
<td th:text="${person.id}">td>
<td th:text="${person.username}">td>
<td th:text="${person.age gt 18}?大:小">td>
<td th:text="${#dates.format(person.createTime,'yyyy-MM-dd')}">td>
tr>
table>
在这里我们需要修改下themeleafController文件，为其添加一个userlist。
@RequestMapping("/test")
public String test(ModelMap map)
{
User u = new User();
u.setId("123");
u.setUsername("fwf");
u.setCreateTime(new Date(2020-1900,6-1,12));
u.setDesc("ssssssssssss
");
u.setAge(18);
map.addAttribute("user",u);
List<User> userlist = new ArrayList<>(); //添加一个userlist
userlist.add(u);
u = new User();
u.setId("234");
u.setUsername("ericam");
u.setCreateTime(new Date(2020-1900,5-1,12));
u.setAge(3);
userlist.add(u);
map.addAttribute("userlist",userlist);
return "thymeleaf/test";
}
(6)th:switch
<div th:switch="${user.username}">
<p th:case="'fwf'">111p>
<p>p>
div>
备注：常用标签的效果可以自行去测试