文章目录

  • 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">
<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">
<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", "xiaopengyou@qq");
        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>邮箱是：xiaopengyou@qq</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遍历

  1. java
Map<String,Object> map = new HashMap<>();
	map.put("name","小小");
    map.put("age","1");
    map.put("sex","男");
    model.addAttribute("map",map);
  1. 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 官网

更多推荐

SpringBoot Thymeleaf模板生成静态html页面