NodeJs之模板引擎及综合案例

news2024/11/26 10:34:31

0. 数据源

在这里插入图片描述

./views/addtional.art

{{ if age > 18 }}
    age > 18;
{{ else if age < 15 }}
    age < 15;
{{ else }}
    age!!!!!!!!
{{/if}}


<% 
    if(age > 18)
        { %> 年龄大于18岁 <% } 
    else if(age < 15) 
        { %> 年龄小于15岁 <% } 
    else 
        { %> 其他年龄段 <%} 
%>


<%
    if(age > 18 ) 
        {%> 孙菲菲 <%}
    else
     {%> sd <%}
%>

./views/cycle.art

<ul>    
    {{each Array}}
        <li>
            {{ $value.name }}
            {{ $value.age }}
            {{ $value.sex }}
        </li>    
    {{/each}}
</ul>


/
<ul>
    <%
        for(var i = 0;i < Array.length; i++) {%>
                <li>
                    <%= Array[i].name %>
                    <%= Array[i].age %>
                    <%= Array[i].sex %>
                </li>
       <%} 
    %>
</ul>

./views/index.art

<!-- 首先，这就是一个模板文件 -->
<!-- Hello World -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {{name}}
    {{age}}
</body>
</html>

./views/language.art

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  标准语法  -->
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ 1+1 }}</p>
    <p>{{ 1+1 == 2 ? 'true' : 'false'}}</p>
    <p>{{ content }}</p>   <!--  默认不会解析HTML标签，需要加@才能解析 -->
    <p>{{@ content }}</p>  <!-- 此时可以正确解析出来, content不能和@连写, 同时注意@与{{不能有空格, 否则报错 -->

    <!--  原始语法  -->
    <p><%= name %></p>
    <p><%= age %></p>
    <p><%= 1+3 %></p>
    <p><%= 2+1 == 2 ? 'true' : 'false' %></p>
    <p><%= content %></p>   <!-- 此时不能解析 -->
    <p><%- content %></p>   <!-- 可以正确解析 -->

</body>
</html>

<!--
content是一个HTML标签, 通过模板解析替换时: 
    不加@: <p>&#60;h1&#62;我是标题(解析)&#60;/h1&#62;</p>                    
    加@：   <p><h1>我是标题(解析)</h1></p>  
-->

./views/subTemplate.art

{{include './common/header.art'}}      <!--  引入header子模板 -->
<div>  {{msg}} </div>
{{include './common/footer.art'}}       <!-- 引入footer子模板 -->


<% include('./common/header.art') %>
<div>  {{msg}} </div>
<% include('./common/footer.art') %>

./views/common/header.art

我是头部

./views/common/footer.art

我是底部

1. 模板语法

1.1 模板使用

// 01_模板使用.js
/* 
    1. 模板引擎是第三方模块;
        ```更加友好的拼接字符串```，使项目代码更加清晰，更易于维护; 
    2. art-template 由腾讯提供； 
    3. npm install art-template; 
    4. const html = template('模板路径', 数据); 
*/


const path = require('path');
const template = require('art-template');

const views = path.join(__dirname , 'views' , 'index.art');     // 模板路径

const html = template(views, {                                  // 返回替换后的整体.art内容
    name: 'ZhangSan',
    age: 20
});
console.log(html);


/* 
    template(.art, {
        name: 'ZhangSan',
        age:20
    });
    总之，就是表达了这个意思,将对象 {name:'',age:} 中的内容给渲染到 .art 中相应的位置！
*/

在这里插入图片描述

1.2 模板语法1

// 02_模板语法1.js
/* 
    1. art-template语法同时支持两种模板语法：标准语法 和 原始语法; 
        输出语法：
            标准语法： ```{{ 数据 }} ```
                <h2>  {{ value }}  <h2>
                <h2>  {{ a?b:c }}  </h2>
                <h2>  {{ a+b }}  </h2>


            原始语法：```<%= 数据 %> ```
                <h2>  <%= value %>  </h2>
                <h2>  <%= a?b:c %>  </h2>
                <h2>  <%= a+b %>  </h2>

    2. 标准语法可以让模板更容易阅读, 原始语法具有更强大的逻辑处理能力; 

*/

/*
    如果数据中携带HTML标签, 默认模板引擎不会解析标签, 而是将其转义后输出！
    解决方案：
        (1) 标准语法：{{@ 数据 }}      <p> {{@ content }}</p>
        (2) 原始语法：{{%- 数据 }}     <p><%- content %></p>
*/

const path = require('path');
const template = require('art-template');
const views = path.join(__dirname,'views','language.art');
console.log(views);
const html = template(views, {
    name: 'ZhangSan',
    age: 20,
    content: '<h1>Hello World</h1>',
});
console.log(html);

在这里插入图片描述

1.3 模板语法2（if条件语句）

// 03_模板语法2.js
/* 
      条件判断语法：
            1. 标准语法：
                (1) 单条件判断：
                    {{ if 条件 }} 
                        ...
                    {{ /if }}
                (2) 多条件判断：
                    {{ if 条件  }}
                        ... 
                    {{ else if 条件 }}
                        ...
                    {{ else }}
                        ...
                    {{ /if }}

            2. 原始语法：
                    <%
                        if(条件)
                            {%> ... <%}
                        else if(条件) 
                            {%> ... <%}
                        else
                            {%> ... <%}
                    %>
*/


const path = require('path');
const template = require('art-template');
const views = path.join(__dirname,'views','addtional.art');
const html = template(views, {
    name: 'LongDa',
    age: 14,
});
console.log(html);

在这里插入图片描述

1.4 模板语法3（循环语法）

// 04_模板语法3.js
/* 
    循环语法：
        标准语法：
            {{ each 数组/对象 }}             
                {{ $index }} {{ $value }}
            {{ /each }}

            $index表示当前的索引;
            $value表示当前项;


        原始语法： 
            <% 
                for(...) 
                    {%> ... <%} 
            %>
///
        <%
                for(var i = 0;i <Array.length;i++) {%>
                        <li>
                            <%=Array[i].name %>
                            <%=Array[i].age %>
                            <%=Array[i].sex %>
                        </li>
            <%} 
        %>
*/

const path = require('path');
const template = require('art-template');
const views = path.join(__dirname,'views','cycle.art');
const html = template(views,{
    Array: [{
        name: 'Zhang',
        age: 20,
        sex: 'man'
    },{
        name: 'Wang',
        age:34,
        sex: 'woman'
    },{
        name: 'Li',
        age: '21',
        sex: 'gay'
    }]
});
console.log(html);

在这里插入图片描述

1.5 子模板

// 05_子模板.js
/*  
    使用子模板可以将网站公共区块（头部，底部）抽离到单独的文件之中！
        子模板语法：
            标准语法：
                {{ include '模板路径' }}

            原始语法：
                <% include('模板路径') %>
*/

const path = require('path');
const template = require('art-template');
const views = path.join(__dirname, 'views', 'subTemplate.art');
const html = template(views, {
    msg: '我是首页',
});
console.log(html);


/* 
    subTemplate.art：
        {{include './common/header.art'}}       // 引入子模板
            <div>  {{msg}} </div>
        {{include './common/footer.art'}}       // 引入子模板
    如上所说：在父模板中有引入了子模板！！！
*/

在这里插入图片描述

2. 模板继承

layout.art

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML骨架模板</title>
    {{block 'test1'}} {{/block}}
</head>

<body>
    {{block 'test2'}} {{/block}}
</body>

</html>

index.art


<!-- 继承模板， 获取layout.art中的骨架 -->
{{extend './layout.art'}}   

<!-- 在继承的骨架的相应位置填充以下的内容： -->
{{block 'test1'}}
<p> {{msg}} </p>
{{/block}}

{{block 'test2'}}
<p> 中华人民共和国今天终于成立了 </p>
{{/block}}

index.js

/*  
    模板继承：
        使用模板继承可以将网站HTML骨架抽离到单独的文件之中, 
        其他页面模板可以继承模板骨架文件; 

        预留位置：通过block来进行位置预留, 然后进行对应填充; 
*/

const path = require('path');
const template = require('art-template');
const views = path.join(__dirname, 'index.art');
const html = template(views, {
    msg: '首页模板',
});
console.log(html);


/* 
    index.js, index.art, main.art三者关系：
        1. 首先将msg渲染到index.art中;
        2. 因为index.art继承了main.art, 
            然后将index.art中的内容给渲染到main.art中预先留好的位置中去！！！
*/

在这里插入图片描述

3. 模板配置

config.art

{{ self(time, 'yyyy-mm-dd') }}
{{ $imports.self(time, 'yyyy-mm-dd') }}

test.html

i love studying NodeJs.

config.js

/* 
    config:
        1. 向模板中导入变量 template.defaults.imports.变量名 = 变量值;
        2. 设置模板根目录 template.defaults.root = 模板目录
        3. 设置模板默认后缀：template.defaults.extname = '.art'

    dateformat: 第三方模块; 

    npm包官网：https://www.npmjs.com(含有大量的第三方模块); 
*/


const template = require('art-template');
const path = require('path');
const dateformat = require('dateformat');    // dateformat是一个方法


/*  [1]. 向模板中导入变量self, 变量值是导入的第三方模块方法（```此时就可以模板中使用相关的方法了```）  */
template.defaults.imports.self = dateformat;


/* [2]. 设置模板根目录（D:\Users\XingWei\Desktop\Node.JS\08_模板引擎\03_模板配置）
        假如有多个.art文件：
            const views1 = path.join(__dirname, 'views', '1.art');      // 模板路径
            const views2 = path.join(__dirname, 'views', '2.art'); 
            const views3 = path.join(__dirname, 'views', '3.art');
        然后再在template(...)中替换相应的art文件路径, ..., 实际上这是非常冗余的, 为此可以设置模板的根目录;  
*/
template.defaults.root = path.join(__dirname);


/* [3]. 配置模板的默认后缀
        后续就不用添加.art后缀了; 
        甚至可以更改模板的后缀名; 
*/
// template.defaults.extname = '.art'; 
template.defaults.extname = '.html'; 



/****************************************************************************************************************/
const html = template('config.art', {       /* 因为上面配置了.art默认后缀, 所以此处的.art后缀可有可无 */
    time: new Date(),
});
console.log(html);


console.log(template('test', {}));      // 因为设置了默认后缀是html, 所以会寻找test.html文件




/* 
    为什么引入设置模板根目录？？？？？？
        const views1 = path.join(__dirname,'views','01.art'); 
        const views2 = path.join(__dirname,'views','02.art'); 
        const views3 = path.join(__dirname,'views','03.art'); 

        const html = template('views1',{
            time: new Date(),
        });
        const html = template('views2',{
            time: new Date(),
        });
        const html = template('views3',{
            time: new Date(),
        });
    相信你应该可以看明白！！！
*/

在这里插入图片描述

4. 模板引擎综合案例

在这里插入图片描述

gitee地址：https://gitee.com/studyCodingEx/studys
内部的第三方模块需要自行下载，否则服务无法启动。

请添加图片描述

5. 二次进阶

5.1 render()函数的使用

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/template-web.js"></script>
    <!-- 
        template.render()函数的使用; 
     -->
</head>

<body>
    <div></div>
    <span></span>

    <script>
        let html = template.render('hi, my name is ```{{name}}!```', {
            name: 'ZhangSan'
        });
        document.querySelector('div').innerHTML = html;


        let _html = template.render('my age is ```{{age}}```old!', {
            age: 23
        });
        document.querySelector('span').innerHTML = _html;
    </script>
</body>

</html>

在这里插入图片描述

5.2 导入模板变量

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        art-template在html页面中的使用:
            1. 创建<script>标签, 并添加id属性; 
            2. 在<script>标签内部填充模板; 
            3. 调用template('tpl', { ... })将数据渲染到模板之中; 
     -->
    <!-- 
        a. 如果变量是在全局作用域下, 那么可以直接使用 ` $imports.变量名 ` 使用; 
        b. 否则用应该使用 template.defaults.imports.变量名 = 变量值; 来向模板导入变量, 然后就可以使用了; 
     -->
</head>

<body>
    <div id="container"></div>
    <script src="./js/template-web.js"></script>
    <script type="text/html" id="tpl">
        <div>当前时间：{{$imports.dateFormat(date)}}</div>
    </script>

    <script>
        // template.defaults.imports.dateFormat = dateFormat;

        var html = template('tpl', {
            date: new Date()
        });
        
        document.getElementById('container').innerHTML = html;

        function dateFormat(date) {
            return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
        }
    </script>
</body>

</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/595957.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux驱动开发（I2C系统的重要结构体）

Linux驱动开发（I2C系统的重要结构体）

文章目录 前言一、I2C硬件框架二、i2c_adapter三、i2c_client四、i2c_msg总结 前言 本篇文章来讲解I2C系统的重要结构体&#xff0c;了解这些结构体对于编写I2C驱动来说是至关重要的&#xff0c;所以要想编写好一个I2C驱动程序那么就必须先了解这些结构体。 一、I2C硬件框架 …
阅读更多...
图片识别工具Tesseract与使用

图片识别工具Tesseract与使用

Tesseract工具是一个图片识别工具&#xff0c; 由HP实验室开发 由Google维护的开源的光学字符识别&#xff08;OCR&#xff09;引擎。它可以直接使用&#xff0c;或者&#xff08;对于程序员&#xff09;使用 API​​ 从图像中提取输入&#xff0c;包括手写的或打印的文本。与M…
阅读更多...
KCC@上海正式成立啦！

KCC@上海正式成立啦！

5月28号下午&#xff0c;开源社区的朋友共聚于上海的一间茶室中&#xff0c;组织召开了 KCC上海第一次线下见面会&#xff0c;并正式成立了 KCC上海。 KCC&#xff08;KAIYUANSHE City Community&#xff09;是由开源社理事兼执行长庄表伟老师号召发起&#xff0c;旨在让开源社…
阅读更多...
关于职场中的面试,要是遇到这些问题时,应该怎么回

关于职场中的面试,要是遇到这些问题时,应该怎么回

(点击即可收听) 关于职场中的面试,要是遇到这些问题时,应该怎么回 平常多学一点,面试入职时就少踩一点坑,无论是去面试还是换工作,怎么样去回答面试官,遇到此类的问题,能够应付自如 1. 你觉得这份工作你能胜任? 首先,无论你在面试过程当中表现怎么样,一定要非常坚定,一定可以 …
阅读更多...
让身份验证更简单：OAuth2基于令牌方式为第三方应用提供认证和授权方案

让身份验证更简单：OAuth2基于令牌方式为第三方应用提供认证和授权方案

随着互联网应用的发展&#xff0c;跨系统身份认证解决方案也在不断演化和改进。下面是它的发展史&#xff1a; 早期的 Web 应用程序使用基于表单的身份验证方式&#xff1b;随着 Web 应用程序数量的增加&#xff0c;需求跨应用程序身份验证的呼声也越来越高&#xff0c;从而出…
阅读更多...
行胜于言

行胜于言

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 最近在给我女儿辅导作业的过程中&#xff0c;发现了许多小问题&#xff0c;自己偶尔也会因此而焦躁&#xff0c;同时也在反思作为父母应该更好的帮助孩子成长&#xff0c;而AI能力的增强和孩子的成长有什么相似…
阅读更多...
【Python】Python系列教程--Python3 VScode（三）

【Python】Python系列教程--Python3 VScode（三）

文章目录 前言安装 VS Code 前言 往期回顾&#xff1a; Python系列教程–Python3介绍&#xff08;一&#xff09;Python系列教程–Python3 环境搭建&#xff08;二&#xff09; 准备工作&#xff1a; 安装 VS Code安装 VS Code Python 扩展安装 Python 3 安装 VS Code VS…
阅读更多...
Maven仓库（本地仓库+远程仓库）

Maven仓库（本地仓库+远程仓库）

在 Maven 中&#xff0c;任何一个依赖、插件或者项目构建的输出&#xff0c;都可以称为构件。 Maven 在某个统一的位置存储所有项目的构件&#xff0c;这个统一的位置&#xff0c;我们就称之为仓库。换言之&#xff0c;仓库就是存放依赖和插件的地方。 任何的构件都有唯一的坐标…
阅读更多...
VUE代码批量格式化

VUE代码批量格式化

1、下载安装Visual Studio Code 2、安装插件 Vetur和Format Files 3、配置格式化&#xff0c;点击右下角设置 4、自定义格式化规则 复制下面的配置信息&#xff0c;覆盖原始配置&#xff0c;保存配置。 {"vetur.format.defaultFormatter.html": "js-beauti…
阅读更多...
MySQL数据库 6.DDL操作 表

MySQL数据库 6.DDL操作 表

目录 &#x1f914;前景知识&#xff1a; 数据类型&#xff1a; 1. 数值类型 2. 字符串类型 3. 日期时间类型 &#x1f914;DDL操作表&#xff1a; 1.创建 示例&#xff1a;尝试创建把以下实例创建到表里 2.查询 1.查询当前数据库的所有表&#xff1a; &#x1f50…
阅读更多...
南京智慧工厂量产下线， 深蓝S7展现硬核制造品质

南京智慧工厂量产下线， 深蓝S7展现硬核制造品质

以科技之力构建电动出行体验&#xff0c;深蓝S7要用硬核实力树立高价值电动SUV全新标杆。 深蓝S7南京智慧工厂下线 作为深蓝汽车旗下的首款中型SUV&#xff0c;深蓝S7自从5月20日开启预定以来&#xff0c;就一直是许多车友关注的焦点&#xff0c;订单火爆更是远超预期&#xff…
阅读更多...
设计模式之~职责链模式

设计模式之~职责链模式

简述&#xff1a; 职责链模式&#xff08;Chain of Responsibility&#xff09;&#xff1a;使多个对象都有机会处理请求&#xff0c;从而避免请求的发送者和接收者之间的耦合关系。将这个对象连成一条链&#xff0c;并沿着这条链传递该请求&#xff0c;直到有一个对象处理它为…
阅读更多...
【哈希】位图/布隆过滤器

【哈希】位图/布隆过滤器

位图 前言 在实现位图结构之前我们先看一个问题&#xff1a; 给出40亿个不重复的无符号整型&#xff0c;并且是无序的。然后给一个无符号整数&#xff0c;怎样快速判断这个数是否在40亿个数之中。 方法一&#xff1a;对40亿个数据进行遍历。我们会发现&#xff0c;时间复杂度…
阅读更多...
重启天涯，一场关于 “救命” 的直播

重启天涯，一场关于 “救命” 的直播

大家好&#xff0c;我是校长。 昨天在知乎热搜榜上看到了关于天涯网站的帖子&#xff0c;感觉值得思考。 前一段时间&#xff0c;我们就看到了关于天涯要关闭的新闻&#xff0c;感觉撑不下去了。 说实话&#xff0c;当时看到这个新闻的时候&#xff0c;挺感慨的&#xff0c;一个…
阅读更多...
初识网络之UDP网络套接字

初识网络之UDP网络套接字

目录 一、UDP中的socket编程常用接口 1. socket的含义 2. sockaddr结构 3. socket编程中UDP协议常用接口介绍 3.1 创建socket文件描述符&#xff08;TCP/UDP、客户端 服务器&#xff09; 3.2 绑定端口号&#xff08;TCP/UDP&#xff0c;服务器&#xff09; 3.3 接收数据…
阅读更多...
2023年上半年数据库系统工程师上午真题及答案解析

2023年上半年数据库系统工程师上午真题及答案解析

1.计算机中, 系统总线用于( )连接。 A.接口和外设 B.运算器、控制器和寄存器 C.主存及外设部件 D.DMA控制器和中断控制器 2.在由高速缓存、主存和硬盘构成的三级存储体系中&#xff0c;CPU执行指令时需要读取数据&#xff0c;那么DMA控制器和中断CPU发出的数据地…
阅读更多...
聊聊我在淘宝做性能分析的经历

聊聊我在淘宝做性能分析的经历

我们新推出大淘宝技术年度特刊《长期主义&#xff0c;往往从一些小事开始——工程师成长总结专题》&#xff0c;专题收录多位工程师真诚的心路历程与经验思考&#xff0c;覆盖终端、服务端、数据算法、技术质量等7大技术领域&#xff0c;欢迎一起沟通交流。 本文为此系列第三篇…
阅读更多...
RNN基础概念

RNN基础概念

一、潜变量回归模型 使用潜变量 h t h_{t} ht​总结过去的信息 二、RNN 更新隐藏状态&#xff1a; h t φ ( W h h h t − 1 W h x x t − 1 b h ) h_{t}φ(W_{hh}h_{t-1}W_{hx}x_{t-1}b_{h}) ht​φ(Whh​ht−1​Whx​xt−1​bh​) 更新输出&#xff1a; o t W o h h t b…
阅读更多...
第六十天学习记录：C语言进阶：文件操作3文件版通讯录改造

第六十天学习记录：C语言进阶：文件操作3文件版通讯录改造

在之前写的静态通讯录和动态通讯录中&#xff0c;都存在一个致命的弊端&#xff0c;那就是当软件运行的过程中添加信息&#xff0c;不关闭软件能够正常显示信息。但一旦关闭软件&#xff0c;内存回收之后当再次打开软件&#xff0c;之前保存的信息全部都得重新添加。 因此需要…
阅读更多...
人工智能-推荐

人工智能-推荐

常用的推荐系统算法实现方案有三种&#xff1a; 协同过滤推荐&#xff08;Collaborative Filtering Recommendation&#xff09;&#xff1a;该算法的核心是分析用户的兴趣和行为&#xff0c;利用共同行为习惯的群体有相似喜好的原则&#xff0c;推荐用户感兴趣的信息。兴趣有高…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023