快捷導(dǎo)航

SpringBoot集成thymeleaf渲染html模板的步驟詳解

更新時(shí)間：2023年06月12日 10:28:19 作者：掉頭發(fā)的王富貴

這篇文章主要給大家詳細(xì)介紹了SpringBoot集成thymeleaf如何使實(shí)現(xiàn)html模板的渲染，文中有詳細(xì)的代碼示例，具有一定的參考價(jià)值,需要的朋友可以參考下

有時(shí)候我們會(huì)遇到這樣的一個(gè)需求：
第一步，我們是需要一個(gè)thymeleaf的模板，讓在項(xiàng)目中引入一個(gè)工具類(lèi)：
第二步，創(chuàng)建一個(gè)工具類(lèi)：
第三步：傳入?yún)?shù)：
第四步，返回output，這個(gè)時(shí)候output就是我們已經(jīng)渲染好的模板了

有時(shí)候我們會(huì)遇到這樣的一個(gè)需求：

通過(guò)前端傳入的數(shù)據(jù)渲染一個(gè)現(xiàn)成的打印模板出來(lái)，最后返回一個(gè)html格式的文本給前端，模板是有一個(gè)現(xiàn)成的，但是每次傳入進(jìn)來(lái)的數(shù)據(jù)是不同的，所以需要后端經(jīng)過(guò)渲染出來(lái)返回渲染好的html內(nèi)容給前端，這個(gè)時(shí)候我們就可以用thymeleaf來(lái)實(shí)現(xiàn)這個(gè)功能。我們先建造一個(gè)模板：

<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">客戶名稱(chēng)：<span th:text = ${cursumerName}>客戶名稱(chēng)</span></span>
          </div>
          <div class="yiban">
            <span class="jiachu">訂單號(hào)：</span><span th:text = ${orderNo}>訂單號(hào)</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">聯(lián)系電話：<span th:text = ${phone}>聯(lián)系電話</span></span>
          </div>
          <div class="yiban">
            <span class="jiachu">送貨單號(hào)：</span><span th:text = ${invoiceNo}>送貨單號(hào)</span>
          </div>
        </td>
      </tr>
      <tr class="center">
        <td colspan="8" class="jiachu">
          <div>機(jī)器名稱(chēng):<span th:text = ${machineName}></span></div>
        </td>
      </tr>
      <tr class="jiachu">
        <td width="5%" align="center">序號(hào)</td>
        <td width="5%" align="center">內(nèi)部序號(hào)</td>
        <td width="25%" align="center">圖號(hào)</td>
        <td width="5%" align="center">單位</td>
        <td width="5%" align="center">數(shù)量</td>
        <td width="5%" align="center">單價(jià)</td>
        <td width="5%" align="center">總價(jià)</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;">序號(hào)</div></td>
        <td align="center"><div th:text = ${prod.selfNumber} style="overflow: hidden;max-height: 40px;line-height: 20px;">內(nèi)部序號(hào)</div></td>
        <td align="center"><div th:text = ${prod.chartNo} style="overflow: hidden;max-height: 40px;line-height: 20px;">圖號(hào)</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;">數(shù)量</div></td>
        <td align="center"><div th:text = ${prod.unitPrice} style="overflow: hidden;max-height: 40px;line-height: 20px;">單價(jià)</div></td>
        <td align="center"><div th:text = ${prod.totalPrice} style="overflow: hidden;max-height: 40px;line-height: 20px;">總價(jià)</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">總計(jì)：</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>

這個(gè)里面是一個(gè)含有thymeleaf語(yǔ)法的模板，現(xiàn)在我們要通過(guò)傳入的參數(shù)不同渲染出不一樣的數(shù)據(jù)出來(lái)。例如前端傳入這樣的數(shù)據(jù)：

{
    "company":"csdner",
    "title":"出貨單",
    "address":"中國(guó)",
    "cursumerName":"客戶",
    "orderNo":"2432523234234234",
    "deliveryAddr":"工業(yè)園",
    "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文檔給前端：

<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>中國(guó)</span>
        </td>
      </tr>
      <tr>
        <td colspan="8">
          <div class="yiban">
            <span class="jiachu">客戶名稱(chēng)：<span>客戶</span></span>
          </div>
          <div class="yiban">
            <span class="jiachu">訂單號(hào)：</span><span>2432523234234234</span>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="8">
          <div class="yiban">
            <span class="jiachu">送貨地址：<span>工業(yè)園</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">聯(lián)系電話：<span>18888888888</span></span>
          </div>
          <div class="yiban">
            <span class="jiachu">送貨單號(hào)：</span><span>1567894</span>
          </div>
        </td>
      </tr>
      <tr class="center">
        <td colspan="8" class="jiachu">
          <div>機(jī)器名稱(chēng):<span>25661615</span></div>
        </td>
      </tr>
      <tr class="jiachu">
        <td width="5%" align="center">序號(hào)</td>
        <td width="5%" align="center">內(nèi)部序號(hào)</td>
        <td width="25%" align="center">圖號(hào)</td>
        <td width="5%" align="center">單位</td>
        <td width="5%" align="center">數(shù)量</td>
        <td width="5%" align="center">單價(jià)</td>
        <td width="5%" align="center">總價(jià)</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;">序號(hào)</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">總計(jì)：</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>

好了，需求說(shuō)完，開(kāi)始實(shí)戰(zhàn)：

第一步，我們是需要一個(gè)thymeleaf的模板，讓在項(xiàng)目中引入一個(gè)工具類(lèi)：

添加依賴：

 <!-- 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>

這是一個(gè) Maven 項(xiàng)目的 dependencies 配置，用于聲明項(xiàng)目所依賴的庫(kù)。

該項(xiàng)目依賴了兩個(gè)庫(kù)：thymeleaf 和 ognl。

thymeleaf 是基于 Java 的模板引擎，在 Web 應(yīng)用中經(jīng)常用來(lái)將數(shù)據(jù)和 HTML 頁(yè)面進(jìn)行綁定。該庫(kù)提供了豐富的標(biāo)簽和表達(dá)式語(yǔ)法，可以輕松地實(shí)現(xiàn)數(shù)據(jù)綁定和頁(yè)面渲染。
ognl（Object-Graph Navigation Language）是一個(gè)面向?qū)ο蟮谋磉_(dá)式語(yǔ)言，它可以通過(guò)對(duì)象屬性的名稱(chēng)、方法調(diào)用和 Java 表達(dá)式來(lái)訪問(wèn)對(duì)象的屬性。在模板引擎中，ognl 主要用于獲取模板中需要使用的數(shù)據(jù)，以及執(zhí)行一些動(dòng)態(tài)操作。

以上兩個(gè)庫(kù)都是 Java 語(yǔ)言編寫(xiě)的，并且在當(dāng)前代碼中被用作 Thymeleaf 模板引擎的依賴庫(kù)。當(dāng)編譯或運(yùn)行程序時(shí)，Maven 將自動(dòng)下載并安裝這些庫(kù)。

第二步，創(chuàng)建一個(gè)工具類(lèi)：

這段代碼是一個(gè)靜態(tài)方法，其目的是將傳入的模板和參數(shù)進(jìn)行渲染，并返回渲染后的結(jié)果字符串。

該方法接收兩個(gè)參數(shù)：template 和 params。其中，template 是一個(gè)字符串類(lèi)型的參數(shù)，表示要使用哪個(gè)模板進(jìn)行渲染。params 是一個(gè) Map 類(lèi)型的參數(shù)，表示要傳遞給模板的參數(shù)值。

在方法內(nèi)部，首先創(chuàng)建了一個(gè) Context 對(duì)象，然后將傳入的參數(shù)設(shè)置到該對(duì)象中。Context 是 Thymeleaf 模板引擎中的一個(gè)上下文對(duì)象，它提供了模板所需的所有數(shù)據(jù)。

最后，通過(guò) templateEngine.process() 方法，將模板和上下文對(duì)象進(jìn)行渲染，得到最終的渲染結(jié)果，并將其作為方法返回值返回。

public class HTMLTemplateUtils {
    private final static TemplateEngine templateEngine = new TemplateEngine();
    /**
     * 使用 Thymeleaf 渲染 HTML
     * @param template  HTML模板
     * @param params 參數(shù)
     * @return  渲染后的HTML
     */
    public static String render(String template, Map<String, Object> params){
        Context context = new Context();
        context.setVariables(params);
        return templateEngine.process(template, context);
    }
}

第三步：傳入?yún)?shù)：

這段代碼調(diào)用了一個(gè)名為 HTMLTemplateUtils.render() 的方法，傳入了兩個(gè)參數(shù)：content 和 map。

其中，content 是一個(gè)字符串類(lèi)型的參數(shù)，表示模板的內(nèi)容；map 是一個(gè) Map<String, Object> 類(lèi)型的參數(shù)，表示模板中所需的數(shù)據(jù)。

該方法返回一個(gè)字符串類(lèi)型的結(jié)果，經(jīng)過(guò)渲染后的模板內(nèi)容將存儲(chǔ)在該字符串中，可以根據(jù)需要進(jìn)行輸出或其他操作。

 String output = HTMLTemplateUtils.render(content, map);

content為模板，map為前端傳入的json數(shù)據(jù)

第四步，返回output，這個(gè)時(shí)候output就是我們已經(jīng)渲染好的模板了

希望這篇文章能夠幫助您了解如何在Spring Boot應(yīng)用程序中集成Thymeleaf模板引擎，以便使用HTML/CSS/JavaScript文件動(dòng)態(tài)生成Web文檔。在本文中，我們簡(jiǎn)要介紹了如何在Maven項(xiàng)目中配置Thymeleaf，以及如何在控制器類(lèi)中使用Thymeleaf來(lái)渲染HTML模板。通過(guò)這些步驟，您可以輕松地將Thymeleaf集成到您的Spring Boot應(yīng)用程序，并開(kāi)始使用模板引擎來(lái)映射數(shù)據(jù)并生成動(dòng)態(tài)內(nèi)容。

到此這篇關(guān)于SpringBoot集成thymeleaf渲染html模板的步驟詳解的文章就介紹到這了,更多相關(guān)SpringBoot thymeleaf渲染html內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: