模板引擎

最新推荐文章于 2023-11-01 17:40:56 发布

人偶Q

最新推荐文章于 2023-11-01 17:40:56 发布

阅读量411

点赞数

本文链接：https://blog.csdn.net/RenOuQ/article/details/107347833

版权

模板引擎

什么是模板引擎

模板引擎是以业务逻辑层和表现层分离为目的的，将规定格式的模板代码转换为业务数据的算法实现。

它可以是一个过程代码、一个类，甚至是一个类库。不同的模板引擎其功用也不尽相同，但其基本原理都差不多。

常见的模板引擎

1.Thymeleaf 官方推荐。能与SpringBoot完美整合，可直接使用表达式取值，可以像操作jsp一样操作Thymeleaf

2.FreeMarker 这个用的也比较多

3.Velocity

在springboot中，模板引擎的默认存放位置是resources/templates。

模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换一下便生成了最终需要的业务数据（比如网页）。

模板引擎使用步骤 :

导入模板引擎
准备一个模板
2.1 准备模板必须要是用script 模板引擎规定的只能使用script
2.2 必须要给他一个id 在调用方法的时候使用
2.3 必须要有type属性而且type属性绝对绝对不能使text/javascript
调用方法生成html结构

注意点 :

1. 挖坑的时候 一定要注意  坑的名字一定要和对象的属性名一直
2. type的值只要不是text/javascript  但是建议使用text/html  因为其他的没办法识别标签

<%= %> 必须是一个完整的整体不能加空格或者其他的符号

 var stu = {
            name : "张三",
            age : 18
        }
        var html = template("tpl", stu);
        var s2 = {
            xingming : "李四",
            age : 16
        }

        html += template("tpl", s2);
        console.log(html);
        document.body.innerHTML = html;

模板字符串

Es5之前拼接的字符串

1.拼接太麻烦需要多次分割不便于维护

2.所有拼接的字符串只能一行显示太长

document.querySelector("p").innerHTML = 
"我叫" + stu.name + ", 我今年" + stu.age + "岁了, 我住在" + stu.place + ", 今年上" + stu.grade + "年级了";
        
document.querySelector("p").innerHTML = 
"我叫" + stu.name + ", 我今年" + stu.age + "岁, 我住在" + stu.place + ", 今年上" + stu.grade + "年级了";

模板引擎的内部循环

标准语法

{{each target}}
    {{$index}} {{$value}}
{{/each}}

原始语法

<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

案例

 <script src="./template-web.js"></script>
    <script type="text/html" id="tpl">
        <%for(var i = 0; i < list.length; i++) { %>
            <h1>自我介绍</h1>
            <p>大家好, 我叫<%= list[i].name %>, 我今年<% if(list[i].age > 20) { %>
                <u>成年</u>
               <% } else { %>
                <u>未成年</u>
           <% } %> </p>
        <% } %>  
    </script>
    <script>
        var arr = [
        {
            name : "张三",
            age : 18
        },
        {
            name : "李四",
            age : 19
        },
        {
            name : "王二麻子",
            age : 20
        }
        ];
        var html = "";
        // for(var i = 0; i < arr.length; i++) {
        //     html += template("tpl", arr[i]);
        // }

        html += template("tpl", {list : arr});
        console.log(html);
        document.body.innerHTML = html;
    </script>

模板引擎的应用

案例：渲染表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        input {
            width: 120px;
            height: 70px;
            margin: 50px auto;
            display: block;
        }

        table {
            margin: 0px auto;
            /* table的样式，其他地方不能用 */
            /* 合并单元格的边框 */
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #000;
            width: 120px;
            height: 40px;
            text-align: center;
        }
    </style>
</head>

<body>
    <input type="button" value="加载数据" id="load">

    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>成绩</th>
            </tr>
        </thead>

        <tbody id="tb">

        </tbody>
    </table>
</body>
<script src="template-web.js"></script>
<script type="text/html" id="tpl">

   {{ each list value }}
        <tr>
            <td>{{ value.Id }}</td>
            
            <td>{{ value.name }}</td>

            {{ if value.age > 18 }}
                <td>成年</td>
            {{ else }}
                <td>未成年</td>
            {{ /if }}

            {{ if value.score > 60 }}
                <td>及格</td>
            {{ else }}
                <td>未及格</td>
            {{ /if }}
        </tr>
    {{ /each }}
</script>
<script>
    var arr = [
        {Id : 0, name : "张三", age : 18, score : 68},
        {Id : 1, name : "王亚", age : 28, score : 55},
        {Id : 2, name : "李辉", age : 16, score : 70},
        {Id : 3, name : "秦虹", age : 18, score : 50},
        {Id : 4, name : "海庆", age : 19, score : 76},
        {Id : 5, name : "蛋娃", age : 14, score : 27},
    ]

    document.getElementById("load").onclick = function () {
        //传统
        // var tb = "";
        // for(var i = 0; i < arr.length; i++)
        // {
        //     tb += "<tr>";
        //     for(const key in arr[i]){
        //         tb += "<td>"+arr[i][key] + "</td>";
        //     }
        //     tb += "</tr>";
        // }
        // document.getElementById("tb").innerHTML = tb;


        //模板引擎
        var tb = "";
        tb += template("tpl", { list: arr });
        console.log(tb);

        document.getElementById("tb").innerHTML = tb;
    }

 </script>
</html>

人偶Q

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
模板引擎

模板引擎什么是模板引擎模板引擎是以业务逻辑层和表现层分离为目的的，将规定格式的模板代码转换为业务数据的算法实现。它可以是一个过程代码、一个类，甚至是一个类库。不同的模板引擎其功用也不尽相同，但其基本原理都差不多。常见的模板引擎1.Thymeleaf 官方推荐。能与SpringBoot完美整合，可直接使用表达式取值，可以像操作jsp一样操作Thymeleaf2.FreeMarker 这个用的也比较多3.Velocity在springboot中，模板引擎的默认存放位置是resources/tem
复制链接

扫一扫