本文介绍了EJS和Art-Template两种Node.js模版引擎的安装与使用方法，包括渲染HTML、循环与条件语句、模板继承和子模板等特性，并展示了实际代码示例，帮助理解模版引擎在前后端数据交互中的作用。
模版引擎
1 ejs模版引擎
安装ejs模版引擎
$ npm i ejs -s
使用模版引擎
const express = require('express');
const app = express();
// 设置视图模版引擎 'ejs'
app.set('view engine', 'ejs');
// 配置模版目录 让程序直到模版引擎的位置
app.set('view', './views');
app.get('/show', (request, response) => {
// 渲染的数据
let persion = [{
uname: 'TOM', age: 20
}, {
uname: 'ANDY', age: 22
}, {
uname: 'TONY', age: 46
}, {
uname: 'JERY', age: 18
}];
// 返回页面文件
response.sendFile(`${__dirname}/public/index.html`);
// 渲染页面
response.render('engine', {data: '模版引擎的数据', age: 22, persion, template: '<h1>hello ejs！</h1>'});
});
app.listen(4400, (err) => {
if (!err) {
console.log('ok');
} else console.log(err);
});
views文件夹下的engine.ejs文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
ejs语法
1 < % js代码 % >> ： 能够写任意代码，但是不会在浏览器输出任何东西
2 < %- 变量 % > ：能够将后端传递过来的对象key指定的value渲染到页面（已转义）
3 < %= 变量 % > ：能够将后端传递过来的对象key指定的value渲染到页面（未转义）
···
-->
<p>这是一个新的页面</p>
<p>
<% console.log('@') %>
</p>
<% for (let k = 0; k < 10; k++) {
console.log(k);
} %>
<p><%- data %>, <%= age %></p>
<!--
< %- % >和< %= % >的区别
-->
<!--解析了html-->
<%- template %>
<!--未解析html-->
<%= template %>
<!--循环渲染-->
<%
for(let o = 0; o < persion.length; o++ ){
%>
<p>我是<%= persion[o].uname %>, age<%= persion[o].age %></p>
<% }
%>
<!--注意：这种方式违背了前后端分离的思想，会导致后期项目难以维护-->
</body>
</html>
服务端打印
D:\Nodejs\node.exe D:\项目\前端案例\NODE.JS\模板引擎\app.js
ok
@
0
1
2
3
4
5
6
7
8
9
2 art-template模版引擎
2-1 安装
$ npm i art-template -s
2-2 使用
在服务器文件里面引入tempalte
const art = require('art-template');
2-3 渲染到html
art.render(fileUrl, {data});
解析渲染html
fileUrl：解析的htm
{data}：渲染的数据对象
例
app.js
const express = require('express');
const app = express();
// 引入模版引擎
const art = require('art-template');
const fs = require('fs');
app.get('/show', (request, response) => {
fs.readFile(`${__dirname}/public/index.html`, (err, data) => {
if (err) {
console.log(err);
return;
}
// 渲染指定的html文件
let html = art.render(data.toString(), {
name: 'TOM',
age: 22,
html: '<i>123456</i>',
a: 20,
b: 10,
obj: {prop1: [1, 2, 3, 4]},
bool: false
});
// 将使用render渲染回来的页面返回
response.send(html);
});
});
app.listen(4400, (err) => {
if (!err) {
console.log('ok');
} else console.log(err);
});
html文件
<!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>
<h1>年龄是{{age}}</h1>
<!--无法解析html-->
{{html}}
<p>{{html}}</p>
// 可以使用
// {{@ }}来解析html
{{@ html}}
<p>{{a + b}}</p>
<p>{{bool || obj['prop1']}}</p>
</body>
</html>
2-4 art-template语法
{{}}是模版引擎解析的一个模块，其中可以写变量或者表达式
2-5 语句
- 变量
<!--变量-->
<!--定义变量-->
{{set tem = name}}
<!--使用变量-->
<h1>{{tem}}</h1>
<!--TOM-->
- 循环语句
{{each target}}
{{$ index}} {{value}}
{{/ each}}
<!--循环-->
{{each target=obj['prop1']}}
<p>值是：{{$value}}，index是：{{$index}}</p>
{{/each}}
//值是：1，index是：0
值是：2，index是：1
值是：3，index是：2
值是：4，index是：3
相当于forEach
${{index}} ===> foreach中的Index
${{value}} ===> foreach中的value
target指的是遍历的目标对象
- 条件语句
{{if value}} … {{/if}}
{{if v1}} … {{else if v2}} … {{/if}}
<!--判断-->
{{if bool===true}}
<p>真</p>
{{/if}}
<p>假</p>
{{if a + b > 10}}
<p>大于10</p>
{{else if a + b === 10}}
<p>等于10</p>
{{else}}
<p>小于10</p>
{{/if}}
<!--
假
小于10
-->
注意：条件写在if后面
2-5 模板继承
{{extend ‘./layout.art’}}
{{block ‘head’}} … {{/block}}
模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。
<!--模版-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{block 'title'}}My Site{{/block}}</title>
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>
<!--child.html-->
{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}
渲染 index.html后，将自动应用布局骨架。
2-6 子模板
{{include ‘./header.art’}}
{{include ‘./header.art’ data}}
art-template 内建 HTML 压缩器，请避免书写 HTML 非正常闭合的子模板，否则开启压缩后标签可能会被意外“优化。
2-7 过滤器
注册过滤器
template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};
注册过滤器函数，在上使用时使用管道符，将数据传入过滤器函数中进行相应的操作
和vuejs中的管道符类似
过滤器函数第一个参数接受目标值。
标准语法
{{date | timestamp | dateFormat ‘yyyy-MM-dd hh:mm:ss’}}
{{value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
2-8 配置
文件名 template.defaults
// 模板名
filename: null,
// 模板语法规则列表
rules: [nativeRule, artRule],
// 是否开启对模板输出语句自动编码功能。为 false 则关闭编码输出功能
// escape 可以防范 XSS 攻击
escape: true,
// 启动模板引擎调试模式。如果为 true: {cache:false, minimize:false, compileDebug:true}
debug: detectNode ? process.env.NODE_ENV !== 'production' : false,
// bail 如果为 true，编译错误与运行时错误都会抛出异常
bail: true,
// 是否开启缓存
cache: true,
// 是否开启压缩。它会运行 htmlMinifier，将页面 HTML、CSS、CSS 进行压缩输出
// 如果模板包含没有闭合的 HTML 标签，请不要打开 minimize，否则可能被 htmlMinifier 修复或过滤
minimize: true,
// 是否编译调试版
compileDebug: false,
// 模板路径转换器
resolveFilename: resolveFilename,
// 子模板编译适配器
include: include,
// HTML 压缩器。仅在 NodeJS 环境下有效
htmlMinifier: htmlMinifier,
// HTML 压缩器配置。参见 https://github.com/kangax/html-minifier
htmlMinifierOptions: {
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
// 运行时自动合并：rules.map(rule => rule.test)
ignoreCustomFragments: []
},
// 错误事件。仅在 bail 为 false 时生效
onerror: onerror,
// 模板文件加载器
loader: loader,
// 缓存中心适配器（依赖 filename 字段）
caches: caches,
// 模板根目录。如果 filename 字段不是本地路径，则在 root 查找模板
root: '/',
// 默认后缀名。如果没有后缀名，则会自动添加 extname
extname: '.art',
// 忽略的变量。被模板编译器忽略的模板变量列表
ignore: [],
// 导入的模板变量
imports: runtime
2-9 api
template(filename, content)
根据模板名渲染模板。
参数：
{string} filename
{Object,string} content
返回值：
如果 content 为 Object，则渲染模板并返回 string
如果 content 为 string，则编译模板并返回 function
浏览器版本无法加载外部文件，filename 为存放模板的元素 id
compile(source, options)
编译模板并返回一个渲染函数。
参数：
{string} source
{Object} options
返回值：
{function}
render(file, data, options)
编译并返回渲染结果。
参数：
{file} 目标渲染对象
{data} 喧嚷上的数据
{Object} 配置项
扫一扫
717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
