龙空技术网

SpringBoot集成thymeleaf渲染html模板

JAVA互联搬砖工人 231

前言:

如今同学们对“thymeleafcss”大致比较关注,同学们都需要剖析一些“thymeleafcss”的相关内容。那么小编也在网摘上网罗了一些关于“thymeleafcss””的相关知识,希望大家能喜欢,同学们快快来学习一下吧!

有时候我们会遇到这样的一个需求:

通过前端传入的数据渲染一个现成的打印模板出来,最后返回一个html格式的文本给前端,模板是有一个现成的,但是每次传入进来的数据是不同的,所以需要后端经过渲染出来返回渲染好的html内容给前端,这个时候我们就可以用thymeleaf来实现这个功能。 我们先建造一个模板:

html复制代码<div id="print_main_full_box">    <style>      #print_main_full_box {        width: 100%;      }      #print_main_full_box > * {        margin: 0;        padding: 0;      }      #print_main_full_box > table, td, th {        margin: 0;        padding: 0;        border: 1px solid black;        border-collapse: collapse      }      .yiban {        width: 49%;        text-align: left;        display: inline-block;        /*border-left: 1px solid black;*/      }      .jiachu {        font-weight:bold;      }      td {        font-size: 14px;      }      .center {        text-align: center;      }    </style>    <table width="100%">      <tbody>      <tr class="jiachu">        <td colspan="8" class="center" style="font-size: 16px">          <div th:text = ${company}>公司</div>          <div th:text = ${title}>出货单</div>        </td>      </tr>      <tr>        <td colspan="8" class="center">          <span th:text = ${address}>地址</span>        </td>      </tr>      <tr>        <td colspan="8">          <div class="yiban">            <span class="jiachu">客户名称:<span th:text = ${cursumerName}>客户名称</span></span>          </div>          <div class="yiban">            <span class="jiachu">订单号:</span><span th:text = ${orderNo}>订单号</span>          </div>        </td>      </tr>      <tr>        <td colspan="8">          <div class="yiban">            <span class="jiachu">送货地址:<span th:text = ${deliveryAddr}>送货地址</span></span>          </div>          <div class="yiban">            <span class="jiachu">送货日期:</span><span th:text = ${actualDeliveryDate}>送货日期</span>          </div>        </td>      </tr>      <tr>        <td colspan="8">          <div class="yiban">            <span class="jiachu">联系电话:<span th:text = ${phone}>联系电话</span></span>          </div>          <div class="yiban">            <span class="jiachu">送货单号:</span><span th:text = ${invoiceNo}>送货单号</span>          </div>        </td>      </tr>      <tr class="center">        <td colspan="8" class="jiachu">          <div>机器名称:<span th:text = ${machineName}></span></div>        </td>      </tr>      <tr class="jiachu">        <td width="5%" align="center">序号</td>        <td width="5%" align="center">内部序号</td>        <td width="25%" align="center">图号</td>        <td width="5%" align="center">单位</td>        <td width="5%" align="center">数量</td>        <td width="5%" align="center">单价</td>        <td width="5%" align="center">总价</td>        <td width="10%" align="center">备注</td>      </tr>      <tr th:each = "prod : ${prods}" data-line="5">        <td align="center"><div data-item-index style="overflow: hidden;max-height: 40px;line-height: 20px;">序号</div></td>        <td align="center"><div th:text = ${prod.selfNumber} style="overflow: hidden;max-height: 40px;line-height: 20px;">内部序号</div></td>        <td align="center"><div th:text = ${prod.chartNo} style="overflow: hidden;max-height: 40px;line-height: 20px;">图号</div></td>        <td align="center"><div th:text = ${prod.company} style="overflow: hidden;max-height: 40px;line-height: 20px;">单位</div></td>        <td align="center"><div th:text = ${prod.invoiceNumber} style="overflow: hidden;max-height: 40px;line-height: 20px;">数量</div></td>        <td align="center"><div th:text = ${prod.unitPrice} style="overflow: hidden;max-height: 40px;line-height: 20px;">单价</div></td>        <td align="center"><div th:text = ${prod.totalPrice} style="overflow: hidden;max-height: 40px;line-height: 20px;">总价</div></td>        <td align="center"><div th:text = ${prod.remarks} style="overflow: hidden;max-height: 40px;line-height: 20px;">哦呵呵</div></td>      </tr>      <tr>        <td colspan="4" align="right">总计:</td>        <td align="right"><span th:text = ${invoiceNumber}>3</span></td>        <td align="right"></td>        <td align="right"><span th:text = ${totalPrice}>3</span></td>        <td align="right"></td>      </tr>      <tr>        <td colspan="4">送货单位签章:</td>        <td colspan="4">收货单位签章:</td>      </tr>      </tbody>    </table>  </div>

这个里面是一个含有thymeleaf语法的模板,现在我们要通过传入的参数不同渲染出不一样的数据出来。 例如前端传入这样的数据:

bash复制代码{    "company":"csdner",    "title":"出货单",    "address":"中国",    "cursumerName":"客户",    "orderNo":"2432523234234234",    "deliveryAddr":"工业园",    "actualDeliveryDate":"20210526",    "phone":"18888888888",    "invoiceNo":"1567894",    "machineName":"25661615",    "prods":[        {            "selfNumber":"5555",            "chartNo":"6666",            "company":"csdner",            "invoiceNumber":"2222",            "unitPrice":"55",            "totalPrice":"555",            "remarks":"哈哈哈哈"        }    ],    "invoiceNumber":"22",    "totalPrice":"102"}

后端要渲染出渲染好之后的html文档给前端:

html复制代码<div id="print_main_full_box">    <style>      #print_main_full_box {        width: 100%;      }      #print_main_full_box > * {        margin: 0;        padding: 0;      }      #print_main_full_box > table, td, th {        margin: 0;        padding: 0;        border: 1px solid black;        border-collapse: collapse      }      .yiban {        width: 49%;        text-align: left;        display: inline-block;        /*border-left: 1px solid black;*/      }      .jiachu {        font-weight:bold;      }      td {        font-size: 14px;      }      .center {        text-align: center;      }    </style>    <table width="100%">      <tbody>      <tr class="jiachu">        <td colspan="8" class="center" style="font-size: 16px">          <div>csdner</div>          <div>出货单</div>        </td>      </tr>      <tr>        <td colspan="8" class="center">          <span>中国</span>        </td>      </tr>      <tr>        <td colspan="8">          <div class="yiban">            <span class="jiachu">客户名称:<span>客户</span></span>          </div>          <div class="yiban">            <span class="jiachu">订单号:</span><span>2432523234234234</span>          </div>        </td>      </tr>      <tr>        <td colspan="8">          <div class="yiban">            <span class="jiachu">送货地址:<span>工业园</span></span>          </div>          <div class="yiban">            <span class="jiachu">送货日期:</span><span>20210526</span>          </div>        </td>      </tr>      <tr>        <td colspan="8">          <div class="yiban">            <span class="jiachu">联系电话:<span>18888888888</span></span>          </div>          <div class="yiban">            <span class="jiachu">送货单号:</span><span>1567894</span>          </div>        </td>      </tr>      <tr class="center">        <td colspan="8" class="jiachu">          <div>机器名称:<span>25661615</span></div>        </td>      </tr>      <tr class="jiachu">        <td width="5%" align="center">序号</td>        <td width="5%" align="center">内部序号</td>        <td width="25%" align="center">图号</td>        <td width="5%" align="center">单位</td>        <td width="5%" align="center">数量</td>        <td width="5%" align="center">单价</td>        <td width="5%" align="center">总价</td>        <td width="10%" align="center">备注</td>      </tr>      <tr data-line="5">        <td align="center"><div data-item-index style="overflow: hidden;max-height: 40px;line-height: 20px;">序号</div></td>        <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">5555</div></td>        <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">6666</div></td>        <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">csdner</div></td>        <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">2222</div></td>        <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">55</div></td>        <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">555</div></td>        <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">哈哈哈哈</div></td>      </tr>      <tr>        <td colspan="4" align="right">总计:</td>        <td align="right"><span>22</span></td>        <td align="right"></td>        <td align="right"><span>102</span></td>        <td align="right"></td>      </tr>      <tr>        <td colspan="4">送货单位签章:</td>        <td colspan="4">收货单位签章:</td>      </tr>         </tbody>    </table>  </div>

好了,需求说完,开始实战:

第一步,我们是需要一个thymeleaf的模板,让在项目中引入一个工具类:

添加依赖:

xml复制代码 <!-- Thymeleaf 模板引擎 -->        <dependency>            <groupId>org.thymeleaf</groupId>            <artifactId>thymeleaf</artifactId>            <version>3.0.9.RELEASE</version>        </dependency>  		<dependency>            <groupId>ognl</groupId>            <artifactId>ognl</artifactId>            <version>3.1.12</version>        </dependency>

这是一个 Maven 项目的 dependencies 配置,用于声明项目所依赖的库。

该项目依赖了两个库:thymeleaf 和 ognl。

thymeleaf 是基于 Java 的模板引擎,在 Web 应用中经常用来将数据和 HTML 页面进行绑定。该库提供了丰富的标签和表达式语法,可以轻松地实现数据绑定和页面渲染。ognl(Object-Graph Navigation Language)是一个面向对象的表达式语言,它可以通过对象属性的名称、方法调用和 Java 表达式来访问对象的属性。在模板引擎中,ognl 主要用于获取模板中需要使用的数据,以及执行一些动态操作。

以上两个库都是 Java 语言编写的,并且在当前代码中被用作 Thymeleaf 模板引擎的依赖库。当编译或运行程序时,Maven 将自动下载并安装这些库。

第二步,创建一个工具类:

这段代码是一个静态方法,其目的是将传入的模板和参数进行渲染,并返回渲染后的结果字符串。

该方法接收两个参数:template 和 params。其中,template 是一个字符串类型的参数,表示要使用哪个模板进行渲染。params 是一个 Map 类型的参数,表示要传递给模板的参数值。

在方法内部,首先创建了一个 Context 对象,然后将传入的参数设置到该对象中。Context 是 Thymeleaf 模板引擎中的一个上下文对象,它提供了模板所需的所有数据。

最后,通过 templateEngine.process() 方法,将模板和上下文对象进行渲染,得到最终的渲染结果,并将其作为方法返回值返回。

java复制代码public class HTMLTemplateUtils {    private final static TemplateEngine templateEngine = 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 templateEngine.process(template, context);    }}
第三步:传入参数:

这段代码调用了一个名为 HTMLTemplateUtils.render() 的方法,传入了两个参数:content 和 map。

其中,content 是一个字符串类型的参数,表示模板的内容;map 是一个 Map<String, Object> 类型的参数,表示模板中所需的数据。

该方法返回一个字符串类型的结果,经过渲染后的模板内容将存储在该字符串中,可以根据需要进行输出或其他操作。

java复制代码 String output = HTMLTemplateUtils.render(content, map);

content为模板,map为前端传入的json数据

第四步,返回output,这个时候output就是我们已经渲染好的模板了

希望这篇文章能够帮助您了解如何在Spring Boot应用程序中集成Thymeleaf模板引擎,以便使用HTML/CSS/JavaScript文件动态生成Web文档。在本文中,我们简要介绍了如何在Maven项目中配置Thymeleaf,以及如何在控制器类中使用Thymeleaf来渲染HTML模板。通过这些步骤,您可以轻松地将Thymeleaf集成到您的Spring Boot应用程序,并开始使用模板引擎来映射数据并生成动态内容。

作者:掉头发的王富贵

链接:

标签: #thymeleafcss