SpringBoot Thymeleaf模板生成静态html页面
文章目录
- SpringBoot Thymeleaf模板生成静态html页面
-
- 1 SpringBoot 整合Thymeleaf
-
- 1.1 pom.xml添加
- 1.2 application.properties 配置
- 1.3 文件目录创建如下图
- 1.4 验证
-
- 1.4.1 index.html
- 1.4.2 java controller测试类
- 1.4.2 浏览
- 2 Thymeleaf模板生成静态html页面
-
- 2.1 Thymeleaf核心对象概念
- 2.2 准备模板index.html
- 2.3 直接上createHtml代码，该代码在多模板中是通用的
- 2.4 单元测试
-
- 2.4.1 单元测试代码
- 2.4.2 单元测试执行生成user01.html文件
-
- 2.4.2.1 生成文件user01.html
- 2.4.2.2 浏览器访问
- 3 list 与 Map遍历
-
- 3.1 list 案例
- 3.2 Map遍历
- 4 其他链接
SpringBoot Thymeleaf模板生成静态html页面
1 SpringBoot 整合Thymeleaf
1.1 pom.xml添加
<!-- thymeleaf模板 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
1.2 application.properties 配置
## thymeleaf配置
# 配置模板路径
spring.thymeleaf.prefix=classpath:/templates/
# 配置模板后缀名称
spring.thymeleaf.suffix=.html
1.3 文件目录创建如下图
1.4 验证
1.4.1 index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://wwww.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<p th:text="${user.name}">这里将要显示数据，但这些文字不显示</p>
<div th:text="${user.age}">这里将要显示数据，但这些文字不显示</div>
<div th:object="${user}">
<p>姓名 <span th:text="*{name}"></span></p>
<p>年龄 <span th:text="*{age}"></span></p>
</div>
<a th:href="@{|http://127.0.0.1:8888/test/test?name=${user.name}|}">查询1</a>
<div>
<span>用户遍历案例</span>
<dev th:each="item : ${userList}">
<p>姓名 <span th:text="${item.name}"></span></p>
<p>年龄 <span th:text="${item.age}"></span></p>
</dev>
</div>
<P>内联文本：[[${user.name}]]</P>
</body>
</html>
1.4.2 java controller测试类
/**
* 注意：组件必须使用@Controller
* 如果使用@RestController 视图将被转换为json，不会调用thymeleaf模板找到指定的页面
*/
@Controller
@RequestMapping("/thymeleafTest")
public class ThymeleafTest {
@RequestMapping(value = "/index", method = RequestMethod.GET)
public String index(Model model) {
Map<String, Object> attrMap = new HashMap<>();
TbUser user = new TbUser();
user.setName("user");
user.setAge(19);
List<TbUser> userList = new ArrayList<>();
for(int i = 0; i < 5; i++) {
TbUser itemUser = new TbUser();
itemUser.setName("user" + i);
itemUser.setAge(i);
userList.add(itemUser);
}
attrMap.put("user", user);
attrMap.put("userList", userList);
model.addAllAttributes(attrMap);
// 指定返回模板名称
return "index";
}
}
1.4.2 浏览
2 Thymeleaf模板生成静态html页面
2.1 Thymeleaf核心对象概念
- Context：运行上下文
等价于Model，将动态参数传给模板进行动态映射。
当模板引擎渲染时，可以从Context上下文中获取数据用于渲染。 - TemplateResolver：模板解析器
模板解析器：用来读取模板相关的配置，例如：模板存放的位置信息，模板文件名称，模板文件的类型等等。以下代码进行了模板路径及后缀的配置。 - TemplateEngine：模板引擎
用来解析模板的引擎，需要使用到上下文、模板解析器。分别从两者中获取模板中需要的数据，模板文件。然后利用内置的语法规则解析，从而输出解析后的文件。
调用生成动态xxx.html函数：
templateEngine.process("模板名", context, writer);S
2.2 准备模板index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 模拟静态页面</title>
</head>
<body>
<h1 th:text="'名字是：' + ${name}"></h1>
<h1 th:text="'年龄是：' + ${age}"></h1>
<h1 th:text="'邮箱是：' + ${email}"></h1>
</body>
</html>
2.3 直接上createHtml代码，该代码在多模板中是通用的
/**
* 创建出一个name.html文件
* @param templateName 模板名称
* @param name 生成name.html
* @param map 模板映射参数
*/
@Override
public String createHtml(String templateName, String name, Map<String, Object> map) {
PrintWriter writer = null;
try {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
// 1. 创建模板解析目录解析器
Set<ITemplateResolver> templateResolvers = templateEngine.getTemplateResolvers();
// 无配置模板解析路径,则代码配置
if (!templateResolvers.iterator().hasNext()) {
// 2. 创建模板解析器 并设置相关属性
resolver.setPrefix(resolverPrefix);
resolver.setSuffix(resolverSuffix);
// 不允许重复设置 否则会报错
templateEngine.setTemplateResolver(resolver);
}
// 2. 模板上下文 主要存储Model参数
Context context = new Context();
if (map.size() > 0) {
context.setVariables(map);
}
// 3. 创建输出文件
File folder = new File(indexStorage, name + ".html");
//如果文件不存在,直接创建
if (!folder.exists()) {
folder.createNewFile();
}
// 5. 获取输出目标文件输出流
writer = new PrintWriter(folder, "UTF-8");
// 6. 生成静态模板参数1:template模板名称 参数2:上下文对象 参数3:目标文件输出流
templateEngine.process(templateName, context, writer);
logger.info("http path: {}", folder.getAbsolutePath());
// 返回生成文件路径
return folder.getAbsolutePath();
} catch (IOException e) {
logger.error("createHtml error {}", ExceptionUtil.getStackTrace(e));
} finally {
// flush输出流并关闭
if (writer != null) {
writer.flush();
writer.close();
}
}
}
2.4 单元测试
2.4.1 单元测试代码
@SpringBootTest(classes = Application.class)
public class ThymeleafTest {
@Autowired
private ThymeleafService thymeleafService;
@Test
public void createIndexHtmlTest() {
thymeleafService.createHtml("index", "user01" , loadModel());
}
/**
* 模拟测试数据
*
* @return
*/
public Map<String, Object> loadModel() {
Map<String, Object> map = new HashMap<>();
map.put("name", "小朋友");
map.put("age", 18);
map.put("email", "[email protected]");
return map;
}
}
2.4.2 单元测试执行生成user01.html文件
2.4.2.1 生成文件user01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 模拟静态页面</title>
</head>
<body>
<h1>名字是：小朋友</h1>
<h1>年龄是：18</h1>
<h1>邮箱是：[email protected]</h1>
</body>
</html>
2.4.2.2 浏览器访问
3 list 与 Map遍历
3.1 list 案例
<ul>
<li th:each="item: ${list}">
<!-- item为对象,filed为对象内属性 -->
<td th:text="${item.filed}"></td>
</li>
</ul>
3.2 Map遍历
- java
Map<String,Object> map = new HashMap<>();
map.put("name","小小");
map.put("age","1");
map.put("sex","男");
model.addAttribute("map",map);
- map遍历
<table class="layui-table">
<tr th:each="item:${map}">
<!-- 状态对象为当前遍历对象后缀加Stat -->
<td th:text="${itemStat.count}"></td>
<!-- 索引从0开始 -->
<td th:text="${item.index}+1"></td>
<!-- key -->
<td th:text="${item.current.key}"></td>
<!-- value -->
<td th:text="${item.current.value}"></td>
<!-- value为对象继续使用. -->
<td th:text="${item.current.value.filed}"></td>
</tr>
</table>
4 其他链接
thymeleaf 官网