SpringBoot集成thymeleaf渲染html模板的步驟詳解
更新時間：2023年06月12日 10:28:19 作者：掉頭發(fā)的王富貴
這篇文章主要給大家詳細介紹了SpringBoot集成thymeleaf如何使實現html模板的渲染，文中有詳細的代碼示例，具有一定的參考價值,需要的朋友可以參考下
有時候我們會遇到這樣的一個需求：
通過前端傳入的數據渲染一個現成的打印模板出來，最后返回一個html格式的文本給前端，模板是有一個現成的，但是每次傳入進來的數據是不同的，所以需要后端經過渲染出來返回渲染好的html內容給前端，這個時候我們就可以用thymeleaf來實現這個功能。 我們先建造一個模板：
<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語法的模板，現在我們要通過傳入的參數不同渲染出不一樣的數據出來。 例如前端傳入這樣的數據：
{
"company":"csdner",
"title":"出貨單",
"address":"中國",
"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>中國</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>工業(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">聯系電話：<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>好了，需求說完，開始實戰(zhàn)：
第一步，我們是需要一個thymeleaf的模板，讓在項目中引入一個工具類：
添加依賴：
<!-- 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 主要用于獲取模板中需要使用的數據，以及執(zhí)行一些動態(tài)操作。
以上兩個庫都是 Java 語言編寫的，并且在當前代碼中被用作 Thymeleaf 模板引擎的依賴庫。當編譯或運行程序時，Maven 將自動下載并安裝這些庫。
第二步，創(chuàng)建一個工具類：
這段代碼是一個靜態(tài)方法，其目的是將傳入的模板和參數進行渲染，并返回渲染后的結果字符串。
該方法接收兩個參數：template 和 params。其中，template 是一個字符串類型的參數，表示要使用哪個模板進行渲染。params 是一個 Map 類型的參數，表示要傳遞給模板的參數值。
在方法內部，首先創(chuàng)建了一個 Context 對象，然后將傳入的參數設置到該對象中。Context 是 Thymeleaf 模板引擎中的一個上下文對象，它提供了模板所需的所有數據。
最后，通過 templateEngine.process() 方法，將模板和上下文對象進行渲染，得到最終的渲染結果，并將其作為方法返回值返回。
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> 類型的參數，表示模板中所需的數據。
該方法返回一個字符串類型的結果，經過渲染后的模板內容將存儲在該字符串中，可以根據需要進行輸出或其他操作。
String output = HTMLTemplateUtils.render(content, map);
content為模板，map為前端傳入的json數據
第四步，返回output，這個時候output就是我們已經渲染好的模板了
希望這篇文章能夠幫助您了解如何在Spring Boot應用程序中集成Thymeleaf模板引擎，以便使用HTML/CSS/JavaScript文件動態(tài)生成Web文檔。在本文中，我們簡要介紹了如何在Maven項目中配置Thymeleaf，以及如何在控制器類中使用Thymeleaf來渲染HTML模板。通過這些步驟，您可以輕松地將Thymeleaf集成到您的Spring Boot應用程序，并開始使用模板引擎來映射數據并生成動態(tài)內容。
到此這篇關于SpringBoot集成thymeleaf渲染html模板的步驟詳解的文章就介紹到這了,更多相關SpringBoot thymeleaf渲染html內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文介紹了如何在IntelliJ IDEA中使用Maven模板創(chuàng)建一個Web項目,并詳細說明了如何配置web.xml、創(chuàng)建springmvc-servlet.xml和application.properties文件,以及如何使用Maven打包生成WAR文件并部署到Tomcat服務器,感興趣的朋友跟隨小編一起看看吧2025-01-01
SpringBoot時區(qū)問題解決以及徹底解決時差問題
這篇文章主要給大家介紹了關于SpringBoot時區(qū)問題解決以及徹底解決時差問題的相關資料,spring?boot作為微服務簡易架構,擁有其自身的特點,快速搭建架構,簡單快捷,需要的朋友可以參考下2023-08-08
下面小編就為大家?guī)硪黄猨ava反射深入剖析。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
在本篇文章中小編給各位分享了關于如何提高java代碼的重用性的相關知識點內容，有需要的朋友們參考下。2019-07-07
java 配置MyEclipse Maven環(huán)境具體實現步驟
這篇文章主要介紹了 java 配置MyEclipse Maven環(huán)境具體實現步驟的相關資料,具有一定的參考價值，需要的朋友可以參考下2016-11-11
SpringBoot整合SpringSecurity和JWT和Redis實現統(tǒng)一鑒權認證
Spring Security是一個可以為Java應用程序提供全面安全服務的框架,同時它也可以輕松擴展以滿足自定義需求,本文主要介紹了SpringBoot整合SpringSecurity和JWT和Redis實現統(tǒng)一鑒權認證,感興趣的可以了解一下2023-11-11
SpringBoot高版本修改為低版本時測試類報錯的解決方案
這篇文章主要介紹了SpringBoot高版本修改為低版本時測試類報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-09-09
這篇文章主要為大家詳細介紹了java如何解析/讀取xml文件的方法，感興趣的小伙伴們可以參考一下2016-03-03
Java開發(fā)之spring security實現基于MongoDB的認證功能
這篇文章主要介紹了Java開發(fā)之spring security實現基于MongoDB的認證功能,結合實例形式分析了spring security在非JDBC環(huán)境下的自定義認證服務實現技巧,需要的朋友可以參考下2017-11-11
責任鏈是行為型設計模式的一種，通過前一個處理者記錄下一個處理者的方式形成一條處理鏈?？蛻舳嗽谡{用時只需要將請求傳遞到責任上即可，無需關注鏈路中的具體的傳遞過程。而鏈路中內部的處理，是按照前一個處理者記錄的下一個處理者依次執(zhí)行2023-01-01