Nodejs 模板引擎的基础概念

最新推荐文章于 2021-02-25 09:58:03 发布

301NewError

最新推荐文章于 2021-02-25 09:58:03 发布

阅读量293

点赞数

分类专栏： node 文章标签： node.js

本文链接：https://blog.csdn.net/qq_37066950/article/details/106180486

版权

node 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

模板引擎：让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、易于维护。

1.art-template模板引擎

在命令行工具中使用 npm i art-template 命令进行下载
使用const template = require(“art-template”)引入模板引擎
告诉模板引擎要拼接的数据和模板在哪const html =template(“模板路径”,数据)

模板语法：

输出：

标准语法：{{ 数据 }}

{{ name }}
{{ age }}
{{ 2 + 1 }}
{{@ content }} //开启解析html代码功能

原始语法：<%= 数据 %>

<%= 1+1==2 ? '相等':'不相等' %>
<%- content %> //开启解析html代码功能

2.条件判断（在模板中根据条件来决定显示哪块代码）

    标准：{{if age > 15 }}

    年龄大于15

{{else if age < 13 }}

    年龄小于13

{{else}}

    年龄不符合要求

{{/if}}

原始：<%if(age>15){%> 年龄大于15 <%}

    else if(age<13){%> 年龄小于13 <%}

    else{%> 年龄不符合要求 <%}

 %>

3.循环

标准：<ul>
    {{each users}}
        <li>
            {{$value.name}}
            {{$value.age}}
            {{$value.sex}}
        </li>
    {{/each}}
</ul>

原始：<ul>

     <% for(let i =0 ;i<users.length;i++){%>

         <li>

             <%= users[i].name %>

             <%= users[i].age %>

             <%= users[i].sex %>

         </li>

         <%} %>

     }

</ul>

4.子模板

使用子模板可以将网站公共区块（头部、底部）抽离到单独的文件中

标准：{{include './common/header.art'}}

<div>{{ meg }}</div>

{{include './common/footer.art'}}

原始：<% include('./common/header.art')%>

<div>{{meg}}</div>

<% include('./common/footer.art')%>

5.模板继承

使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件

Layout.art

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {{block 'head'}}{{/block}}
</head>
<body>
    {{block 'content'}}{{/block}}
</body>
</html>

05.art （继承art）

{{extend './common/layout.art'}}

{{block 'head'}}
<script src = './js/index/js'></script>
{{/block}}

{{block 'content'}}
{{@meg}}
{{/block}}

05.js

const template = require('art-template');
const path = require('path');
const views = path.join(__dirname,'views','05.art');
const html = template(views,{
meg:'<h1>首页模板</h1>>'
})
console.log(html)

6.模板配置

1) 向模板中导入变量 template.defaults.imports.变量名 = 变量值；

Eg：格式化日期

num i dateFormmat

06.js

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

const path = require('path');

const dateFormat = require('dateformat')

const views = path.join(__dirname,'views','06.art');



template.defaults.imports.dateFormat = dateFormat;

const html = template(views,{

    time:new Date()

})

console.log(html)

06.art

 {{ dateFormat(time,'yyyy-mm-dd') }}

2）设置模板根目录 template.defaults.root = 模板目录

3）设置模板默认后缀 template.defaults.extname = ‘.art’

const template = require('art-template');
const path = require('path');
const dateFormat = require('dateformat')
//const views = path.join(__dirname,'views','06.art');
//设置模板根目录
template.defaults.root = path.join(__dirname,'views');
//导入模板变量
template.defaults.imports.dateFormat = dateFormat;
//配置模板的默认后缀
template.defaults.extname = '.art' //'.html'

const html = template('06',{
time:new Date()
})
console.log(html)

301NewError

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Nodejs 模板引擎的基础概念

模板引擎：让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、易于维护。1.art-template模板引擎在命令行工具中使用 npm i art-template 命令进行下载使用const template = require(“art-template”)引入模板引擎告诉模板引擎要拼接的数据和模板在哪const html =template(“模板路径”,数据)模板语法：输出：标准语法：{{ 数据 }} {{ name }}{{ age }}{{ 2 + ...
复制链接

扫一扫