LayUI模板引擎渲染数据

前端模板引擎介绍

接上节Spring Boot项目开发实践-（LayUI实现前后端数据交换并定义渲染数据的方法）

模板引擎可以简化开发，大大提高效率。小编之前用过JSP和Thymeleaf，还有python的jinja2。这些是后端模板引擎。数据的渲染需要服务器帮助重新解析html，在特定的标识符处重新解析html。填写数据。

Node第一次将JavaScript带入后端服务器开发，js也成为了后端家族的一员。前端模板基于js，模板基于js解析器，让逻辑和数据的关系更加清晰。

模板引擎文档-layui.laytpl

占位符只起到填充数据的作用，关键是模板的作用：

如果模板的默认 { { }} 分隔符与其他模板（通常是服务器端模板）冲突，您还可以重新定义分隔符。

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

使用模板引擎需要用script标签包裹起来，并为script标签添加id="demo" type="text/html"属性声明该段需要为模板语法。

<script id="demo" type="text/html">
...
</script>

使用脚本包装有两个含义：

1. 用script标签包裹的HTML可以使用js语法，类似于java jsp中用<%-----%>包裹的部分，可以使用java代码；
2. 对包裹的部分进行别名，得到静态html；
3. 声明脚本内部有模板语法需要特殊的解析。

使用步骤

• 导入模板引擎模块

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

• 编写重新分析页面和显示区域

<script id="demo" type="text/html">
	<div>{
    {
    d.title}}</div>
</script>
<div id="sentence"></div>

注意这里容易忽视，首先用<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模板引擎，返回最终页面html
		laytpl(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

到此已经可以渲染数据了，另外需要注意的有一下几点：

1. <div>{ {d.title}}</div>占位符中的d全局未定义却可以使用，因为这是固定写法，所有模板处传入的data都会直接赋值给d。例如：

//对象定义
var data = {
    "title":"layui模板引擎的测试!"}

//数组定义
var data = [1,2,3,4,5]

2. 待解析模板可以为空，显示模板必须存在。

带解析模板为空只会什么也不显示，但是模板为空或不存在会报错。

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.innerHTML
    let view = document.getElementById("sentence")
    laytpl(tpl).render(data,function(html){
    view.innerHTML = html
    })
}

由于ajax和模板引擎都是异步任务，我们不知道谁先执行，只能通过调用来使用。

回显数据

根据回显的数据构造显示模板：

<script id="news" type="text/html">
    {
    {
    #  layui.each(d, function(index, item){
     }}
    <div class="layuimini-notice">
        <div class="layuimini-notice-title" id="title">{
    {
    item.sentence}}</div>
        <div class="layuimini-notice-extra">{
    {
     item.time }}</div>
    </div>
    {
    {
    #  }); }}
</script> 
<div id="view"></div> 

模板引擎完整小案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--引入 layui.css -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.5/css/layui.min.css">
		 
		<!-- 引入 layui.js -->
		<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.innerHTML let view = document.getElementById("sentence") laytpl(tpl).render(data,function(html){
       view.innerHTML = html }) }); </script>
</html>