Spring Boot之Thymeleaf开发
1、Thymeleaf模板引擎
Spring Boot 提供了大量的模板引擎,包括FreeMarker\Groovy\Thymeleaf\Velocity和Mustache,Spring Boot 中推荐使用Thymeleaf作为模板引擎,因为Thymeleaf提供了完美的Spring MVC的支持。
2、Thymeleaf基础知识
Thymeleaf是一个Java类库,他说一个xml/xhtml/html5的模板引擎,可以作为MVC的web应用的View层。
Thymeleaf还提供了额外的模块与Spring MVC集成,所以我们还可以使用Thymeleaf完全替代JSP。
2.1、引入Thymeleaf
在标签中添加thymeleaf命名空间,将静态页面转换为动态的视图。
通过”@{}”引用web静态资源。
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script th:src="@{jqeury.min.js}" type="text/javascript"></script>
</body>
</html>
2.2范围model中的数据
通过”${}”访问model中的属性,这个jsp即为相似。
<div>
<h3>访问model</h3>
<span th:text="${singlePerson.name}"></span>
</div>
2.3.引入URL
Thymeleaf对于URL的处理是通过语法@{…}来处理的
<a th:href="@{https://blog.csdn.net/java_mdzy/article/category/7716138}">绝对路径</a>
<a th:href="@{/}">相对路径</a>
<a th:href="@{css/bootstrap.min.css}">Content路径,默认访问static下的css文件夹</a>
2.4使用运算符
在表达式中可以使用各类算术运算符,例如+, -, *, /, %
th:with="isEven=(${prodStat.count} % 2 == 0)"
逻辑运算符>, <, <=,>=,==,!=都可以使用,唯一需要注意的是使用<,>时需要用它的HTML转义符:
th:if="${prodStat.count} > 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"
2.5数据迭代(数据循环)
Thymeleaf的迭代和JSP的写法很相似,代码如下
<div>
<ul>
<li th:each="person:${people}">
<span th:text="${person.name}"></span>
<span th:text="${person.age}"></span>
</li>
</ul>
</div>
3、项目实战
3.1新建项目
新建Spring Boot 项目,具体请参考 初识springboot之快速搭建
3.2项目配置
添加项目依赖,在pom.xml中添加Thymeleaf依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
配置视图解析器,在application.properties中可以配置thymeleaf模板解析器属性.就像使用springMVC的JSP解析器配置一样
#thymeleaf start
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#开发时关闭缓存,不然没法看到实时页面
spring.thymeleaf.cache=false
#thymeleaf end
3.3编写demo代码
项目目录如下图所示:
各个子类代码:
新建domain目录,用于新建实体。新建Person类,代码如下
package com.crazyang.domain;
/**
* Created with IntelliJ IDEA.
*
* @Author crazyang
* @Desciption:
* @Date 2018-6-6 15:41
*/
public class Person {
private String name;
private Integer age;
public Person() {
super();
}
public Person(String name, Integer age) {
super();
this.name = name;
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
}
新建IndexController,用于控制前段请求和页面跳转。代码如下:
package com.crazyang.controller;
import com.crazyang.domain.Person;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import java.util.ArrayList;
import java.util.List;
/**
* Created with IntelliJ IDEA.
*
* @Author crazyang
* @Desciption:
* @Date 2018-6-6 14:02
*/
@Controller
public class IndexController {
private Logger logger = LoggerFactory.getLogger(IndexController.class);
/**
* 测试hello
*
* @return
*/
@RequestMapping(value = "/index", method = RequestMethod.GET)
public String hello(Model model) {
//单个用户
Person single = new Person("crazyang",66);
//多个用户List,用于Thymeleaf中迭代
List<Person> people = new ArrayList<Person>();
Person p1 = new Person("zhangsan",11);
Person p2 = new Person("lisi",16);
Person p3 = new Person("wangwu",21);
people.add(p1);
people.add(p2);
people.add(p3);
model.addAttribute("person", single);
model.addAttribute("people", people);
return "index";
}
}
index.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<div style="border: 1px gray solid ;margin: 10px">
<p th:text="'用户名!, ' + ${single.name} + '!'" >3333</p>
<p th:text="'用户年龄!, ' + ${single.age} + '!'" >3333</p>
</div>
<div style="border: 1px gray solid ;margin: 10px">
<li th:each="person:${people}">
<span th:text="${person.name}"></span>
<span th:text="${person.age}"></span>
</li>
</div>
</body>
</html>
4、运行结果
启动项目,浏览器中输入http://localhost:8080/index,结果如下图所示:
5、项目总结
本章简要介绍了Thymeleaf和Spring Boot结合使用,通过一个例子,展示了Thymeleaf使用中的简洁方便。