artTemplate模板引擎基本使用方法

最新推荐文章于 2023-08-09 11:02:46 发布

就是有点怕怕

最新推荐文章于 2023-08-09 11:02:46 发布

阅读量579

点赞数 2

分类专栏： Web杂谈文章标签：前端

本文链接：https://blog.csdn.net/weixin_42371354/article/details/104326589

版权

Web杂谈专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. 模板引擎

模板引擎能够让开发者以更加友好的方式拼接字符串，以及能够使得用户界面与业务数据分离，其能返回特定格式的文档；我们网页开发中返回的是HTML文档。

2. artTemplate模板的安装以及使用

使用命令行下载：npm install art-template
在Js文件中用require方法引入模板引擎
通过template()拼接数据和模板
模板的后缀统一为：.art

初步使用art-template代码示例如下：

/************ index.js ***********/
// 引入第三方模块
const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', 'index.art');
const html = template(views, {
    user: {
        name: 'lxz',
        age: 22,
        email: '123@qq.com'
    }
});
console.log(html);

/************ index.art ***********/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>{{user.name}}</div>
    <div>{{user.age}}</div>
    <div>{{user.email}}</div>
</body>
</html>

3. 模板引擎语法

1. 基本使用
art-template中支持两种语法：标准语法和原始语法
标准语法在模板中更加通俗易懂，原始语法逻辑处理能力更加强大
输出：
标准语法格式：{{ 数据 }}
原始语法格式：<%=数据 %>

原文输出(包含html标签):
标准语法格式：{{ @ 数据 }}
原始语法格式：<%-数据 %>

基本使用代码如下：

/*************export.js************/
// 引入第三方模块
const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', 'export.art');
const html = template(views, {
    user: {
        name: 'lxz',
        age: 22,
        content: '<h1>我是标题</h1>'
    }
});
console.log(html);

/*************export.art************/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<!-- 标准语法 -->
	<p>{{ user.name }}</p>
	<p>{{ 1 + 1 }}</p>
	<p>{{ 1 + 1 == 2 ? '相等' : '不相等' }}</p>
	<p>{{ user.content }}</p>
	<p>{{@ user.content }}</p>
	<!-- 原始语法 -->
	<p><%= user.name %></p>
	<p><%= 1 + 2%></p>
	<p><%= 1 + 1 == 2 ? '相等' : '不相等' %></p>
	<p><%= user.content%></p>
	<p><%- user.content%></p>
</body>
</html>

2. 条件判断语法
标准语法格式：
{{if 条件}} … {{/if}}
{{if 条件1}} … {{else if 条件2}} … {{/if}}
原始语法格式：
<% if (value) { %> … <% } %>
<% if (条件1) { %> … <% } else if (条件2) { %> … <% } %>

使用代码如下：

/******************if.js****************/
// 引入第三方模块
const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', 'if.art');
const html = template(views, {
    user: {
        name: 'lxz',
        age: 17,
        content: '<h1>我是标题</h1>'
    }
});
console.log(html);

/******************if.art****************/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<!-- 标准语法 -->
	{{ if user.age > 18 }}
    年龄大于18
    {{ else if user.age < 16}}
    年龄小于16
    {{ else }}
    年龄不在区间中
    {{ /if }}
	<!-- 原始语法 -->
    <% if (user.age > 18) { %>
    年龄大于18
    <% } else if (user.age < 16) { %>
    年龄小于16
    <% } else {%>
    年龄不在区间中
    <% } %>
	
</body>
</html>

3. 循环语法
标准语法：{{each 数据}} {{/each}}
原始语法：<% for() { %> <% } %>

基本使用代码如下：

/******************each.js****************/
// 引入第三方模块
const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', 'each.art');
const html = template(views, {
    user: [{
        name: '张三',
        age: 20,
        sex: '男'
    }, {
        name: '李四',
        age: 30,
        sex: '男'
    }, {
        name: '玛丽',
        age: 15,
        sex: '女'
    }]
});
console.log(html);

/******************each.art****************/
<ul>
    <!------标准语法-------->
    {{ each user}}
    <li>{{$value.name}}</li>
    <li>{{$value.age}}</li>
    <li>{{$value.sex}}</li>
    {{ /each }}

    <!------原始语法-------->
    <% for (var i = 0;i < user.length;i++) { %>
        <li><%= user[i].name %></li>
        <li><%= user[i].age %></li>
        <li><%= user[i].sex %></li>
    <% } %>
</ul>

4.子模板
使用子模板可以将网站中公共的部分抽离到独立的文件中便于修改和维护
标准语法：{{include ‘模板’}}
原始语法：<%include(‘模板’) %>

基本使用代码如下：

/******************include.js****************/
// 引入第三方模块以及系统模块
const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', 'include.art');
const html = template(views, {
    message: '这是文章内容'
})
console.log(html);

/******************header.art****************/
这是头部

/******************footer.art****************/
这是底部

/******************include.art****************/
<!----标准语法------>
{{include './common/header.art'}}
<div>{{message}}</div>
{{include './common/footer.art'}}
<!----原始语法------>
<% include('./common/header.art')%>
<div>{{message}}</div>
<% include('./common/footer.art')%>

5.模板继承
模板继承能够将网站HTML的骨架抽取到单独的文件，其他的页面模板可以继承该骨架，具体使用如下：

/******************extend.js****************/
// 引入第三方模块以及系统模块
const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', 'extend.art');
const html = template(views, {
    message: '这是文章内容'
})
console.log(html);

/******************layout.art****************/
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html骨架模板</title>
    {{block 'link'}}{{/block}}
</head>

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

</html>

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

{{block 'link'}}<link rel="stylesheet" href="./css/main.css">{{/block}}

{{block 'content'}}
<div>{{message}}</div>
{{/block}}

6.模板配置

向模板中导入变量 template.defaults.imports.变量名 = 变量值;
设置模板默认后缀 template.defaults.extname = ‘.art’
设置模板根目录 template.defaults.root = 模板目录

示例代码如下：

/******************dateformat.js****************/
// 引入第三方模块以及系统模块
const template = require('art-template');
const path = require('path');
const dateformat = require('dateformat');

// 设置模板跟目录
template.defaults.root = path.join(__dirname, 'views');
// 向模板中导入变量
template.defaults.imports.dateformat = dateformat;
// 设置默认模板后缀
template.defaults.extname = '.html';

const html = template('dateformat.art', {
    time: new Date()
})
const html1 = template('text', {});
console.log(html1);
console.log(html);

/******************text.html****************/
这是text.html模板

/******************dateformat.art****************/
{{dateformat(time,'yyyy-mm-dd') }}

就是有点怕怕

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
artTemplate模板引擎基本使用方法

1. 模板引擎模板引擎能够让开发者以更加友好的方式拼接字符串，以及能够使得用户界面与业务数据分离，其能返回特定格式的文档；我们网页开发中返回的是HTML文档。2. artTemplate模板的安装以及使用使用命令行下载：npm install art-template在Js文件中用require方法引入模板引擎通过template()拼接数据和模板模板的后缀统一为：.art初步使...
复制链接

扫一扫