當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

LayUI模板引擎渲染数据

發布時間：2024/1/1 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 LayUI模板引擎渲染数据小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端模板引擎介紹

接上節Spring boot項目開發實戰——（LayUI實現前后端數據交換與定義方法渲染數據）

模板引擎能簡化開發，極大提高效率，小編之前使用過JSP和Thymeleaf，以及python的jinja2，這些是后端的模板引擎，數據的渲染都需要借助服務器，對html重新解析，在特定標識符處填入數據。

Node第一次把JavaScript帶入到后端服務器開發，js也成為后端大家族的一員，前端模板就是基于js的，模板基于js解析器使邏輯和數據之間更加清晰。

模板引擎文檔 - layui.laytpl

占位符只起一個填充數據的作用，關鍵還是模板的函數：

如果模版默認的 {{ }} 分隔符與你的其它模板（一般是服務端模板）存在沖突，你也可以重新定義分隔符

laytpl.config({open: '<%',close: '%>' });

使用模板引擎需要用script標簽包裹起來，并為script標簽添加id="demo" type="text/html"屬性聲明該段需要為模板語法。

使用script包裹有兩個意義：

使用script標簽包裹的html內部可以使用js語法，類似于java jsp中時使用<%-----%>包裹的部分可以是使用java代碼一樣；

為被包裹的部分起別名便由獲取靜態html；

聲明script內部有模板語法需要特殊解析。

使用步驟

導入模板引擎模塊

layui.use(['layer','laytpl'], function () {layer = layui.layer,laytpl = layui.laytpl; });

編寫重解析頁面和顯示區域

注意這里容易忽視，首先用<script>標簽包裹的為沖解析頁面，前端模板引擎比后端模板引擎解析復雜一些，原因在于js既是瀏覽器解析語言又是后端解析語言，所以需要區分，這里layui的實現方案使主動獲取需要解析的部分傳入模板引擎，回調函數得到頁面文件。

簡單來說，就是后端引擎能直接識別占位符模板語法，而js需要標注模板語法，并將解析模板傳入模板引擎得到最終頁面，因此該過程也是異步任務。

因此上面需要定義兩個模板，一個是待解析模板，一個使最終顯示模板。

獲取待帶解析模板傳入數值返回最終頁面

layui.use(['layer','jquery','laytpl'], function () {var $ = layui.$, //jQuery復制layer = layui.layer,laytpl = layui.laytpl;//定義數據var data = {"title":"layui模板引擎的測試!"}//獲取待解析模板let tpl = demo.innerHTML//獲取顯示區域let view = document.getElementById("sentence")//將帶解析模板和數據傳入laytpl模板引擎，返回最終頁面htmllaytpl(tpl).render(data,function(html){//將返回的html通過DOM操作賦值給顯示區域view.innerHTML = html}) });

核心部分：

//定義數據（數據可以后端獲取） var data = {"title":"layui模板引擎的測試!"}//獲取待解析模板 let tpl = demo.innerHTML //獲取顯示區域 let view = document.getElementById("sentence") //將帶解析模板和數據傳入laytpl模板引擎，返回最終頁面html laytpl(tpl).render(data,function(html){ //將返回的html通過DOM操作賦值給顯示區域 view.innerHTML = html

到此已經可以渲染數據了，另外需要注意的有一下幾點：

<div>{{d.title}}</div>占位符中的d全局未定義卻可以使用，因為這是固定寫法，所有模板處傳入的data都會直接賦值給d。例如：

//對象定義 var data = {"title":"layui模板引擎的測試!"}//數組定義 var data = [1,2,3,4,5]

待解析的模板可以為空，顯示模板一定要存在

帶解析模板為空只會什么也不顯示，但是模板為空或不存在會報錯。

3. script標簽包裹的html不會顯示其本身內容，也不影響布局，起css樣式會在最終顯示模板展現。

模板使用最多的應該是循環渲染數據和分支，layui模板的循環使用layui.each方法，分支為if。

layui模板分支和循環

后端接收數據并使用模板填充數據

場景介紹：js通過DOM想html中添加數據，但數據很多時DOM操作繁瑣，對于有些數據，結構一致，動態賦值有規律可尋，如下圖：

每一行都包含一個字符串和時間。

<div class="layuimini-notice"><div class="layuimini-notice-title" id="title">_xiao_</div><div class="layuimini-notice-extra">2019-07-11 12:57</div></div><div class="layuimini-notice"><div class="layuimini-notice-title">_xiao_</div><div class="layuimini-notice-extra">2019-07-11 12:57</div></div><div class="layuimini-notice"><div class="layuimini-notice-title">_xiao_</div><div class="layuimini-notice-extra">2019-07-05 14:28</div></div><div class="layuimini-notice"><div class="layuimini-notice-title">_xiao_</div><div class="layuimini-notice-extra">2019-07-04 11:02</div></div><div class="layuimini-notice"><div class="layuimini-notice-title">_xiao_</div><div class="layuimini-notice-extra">2019-07-05 14:28</div></div>

獲取后臺數據：

//定義ajax獲取后臺數據 function newsData(){$.ajax({type: "GET",url: "http://localhost:8080/product/newRecord",data: null,dataType: "json",success: function (data) {console.log(data)//updateSaleData(data)}}); }//定義前端模板重解析方法 //最近消費記錄 function getTpl(data){let tpl = demo.innerHTMLlet view = document.getElementById("sentence")laytpl(tpl).render(data,function(html){view.innerHTML = html}) }

由于ajax和模板引擎都是異步任務，也不知道誰先執行，只能通過調用的方式使用。

回顯數據

根據回顯的數據構造顯示模板：

模板引擎完整小案例：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.5/css/layui.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.5/layui.js"></script><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head><body><script id="demo" type="text/html"><div>{{d[0]}}</div></script><div id="sentence"></div></body><script>layui.use(['layer','jquery','laytpl'], function () {var $ = layui.$, //jQuery復制layer = layui.layer,laytpl = layui.laytpl;//var data = {"title":"layui模板引擎的測試!"}var data = [1,2,3,4,5]let tpl = demo.innerHTMLlet view = document.getElementById("sentence")laytpl(tpl).render(data,function(html){view.innerHTML = html})});</script> </html>

喜歡就關注吧！

總結

以上是生活随笔為你收集整理的LayUI模板引擎渲染数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。