JAVA后台数据使用thymeleaf渲染html页面

最新推荐文章于 2024-06-14 23:45:00 发布

大头程序员不头大

最新推荐文章于 2024-06-14 23:45:00 发布

阅读量5.1k

点赞数 1

分类专栏： JAVA后端文章标签： java html5

本文链接：https://blog.csdn.net/qq_38784203/article/details/124035791

版权

JAVA后端专栏收录该内容

48 篇文章 4 订阅

订阅专栏

一、前言

本篇介绍如何使用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>