一、前言

本篇介绍如何使用thymeleaf从后台获取数据后渲染至html页面上。

二、使用方法
1、注入依赖

<!-- Thymeleaf 模板引擎 -->
<dependency>
   <groupId>org.thymeleaf</groupId>
   <artifactId>thymeleaf</artifactId>
   <version>3.0.9.RELEASE</version>
</dependency>

2、新建渲染工厂工具类


import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;
import java.util.Map;
 
/**
 * @author Ray
 */
public class HTMLTemplateUtils {
 
    private final static TemplateEngine engine=new TemplateEngine();
 
    /**
     * 使用 Thymeleaf 渲染 HTML
     * @param template  HTML模板
     * @param params 参数
     * @return  渲染后的HTML
     */
    public static String render(String template,Map<String,Object> params){
        Context context = new Context();
        context.setVariables(params);
        return engine.process(template,context);
    }

3、测试以上工具类

public class Test {
    public static void main(String[] args) {
        String template = "<p th:text='${title}'></p>";
        HashMap<String, Object> map = new HashMap<>();
        map.put("title","hello world");
        String render = HTMLTemplateUtils.render(template, map);
        System.out.println("渲染之后的字符串是:"+render);
    }
}

4、新建前端Html示例页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 th:text="${name}">工程项目</h1>
<ul>
    <li th:each="item: ${array}" th:text="${item}">项目名称</li>
</ul>
</body>
</html>

5、将后台数据渲染至Html页面上


public class HTMLTest2 {
 
    public static void main(String[] args) throws IOException {
        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
        //模板所在目录，从resources目录开始的相对路径。
        resolver.setPrefix("");
        //模板文件后缀
        resolver.setSuffix(".html");
        TemplateEngine engine = new TemplateEngine();
        engine.setTemplateResolver(resolver);
 
        //构造上下文(Model)
        List<String> array = new ArrayList<>();
        array.add("AA");
        array.add("BB");
        array.add("CC");
        Context context = new Context();
        context.setVariable("name", "工程名称");
        context.setVariable("array", array);
 
        //渲染模板
        FileWriter writer = new FileWriter("src/main/resources/result.html");
        engine.process("example",context,writer);
        writer.flush();
        writer.close();
    }
}

6、在resources目录下生成result.html文件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>工程名称</h1>
<ul>
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
</ul>
</body>
</html>
# java # html5
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB Ustore存储引擎解读

avatar 华为开发者空间

如何在鲲鹏平台上快速上手应用开发？鲲鹏DevKit给你答案

鲲鹏DevKit针对不同的业务场景，提供了应用迁移和系统迁移两套解决方案，帮忙开发者快速从X86平台迁移至鲲鹏平台，通过详细的迁移建议降低迁移门槛，可视化展示迁移进度，打消鲲鹏平台开发的顾虑。

avatar 华为开发者空间
cover

华为云HCSD校园沙龙走进东北大学软件学院

avatar 华为开发者空间