模板引擎

艺术模板引擎详解

最新推荐文章于 2024-11-25 08:44:13 发布

原创最新推荐文章于 2024-11-25 08:44:13 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node.js

Node.js 同时被 2 个专栏收录

31 篇文章

订阅专栏

MongoDB数据库

10 篇文章

订阅专栏

模板引擎

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

art-template模板引擎

在这里插入图片描述

模板语法

同时支持两种模板语法：标准语法和原始语法。
标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。
在这里插入图片描述

原文输出

如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出。（出于安全性考虑）
在这里插入图片描述

条件判断

在模板中可以根据条件来决定显示哪块HTML代码
在这里插入图片描述
js代码

//导入模板引擎
const template = require('art-template');
//拼接字符串所要用到的模块
const path = require('path');

//template方法是用来拼接字符串的
//1.模板路径 绝对路径
//__dirname代表当前文件所在路径
//2.要在模板中显示的数据 对象类型
//返回拼接好的字符串
const views = path.join(__dirname, 'views', '02.art')
const html = template(views, {
	name: '张三',
	age: 17
})

console.log(html);

art代码

{{if age > 18}}
	年龄大于18
{{else if age < 15}}
	年龄小于15
{{else}}
	年龄不符合要求
{{/if}}

在这里插入图片描述
art代码

<% if (age > 18) { %> 

	年龄大于18
<% } else if (age < 15) { %>
	年龄小于15
<% } else { %>
	年龄不符合条件
 <% } %>

循环

在这里插入图片描述

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

子模板

使用子模板可以将网站公共区块（头部、底部）抽离到单独的文件中。
在这里插入图片描述

js模块

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

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


const html = template(views, {
	msg: '我是首页'
});

console.log(html);

art模块

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

模板继承

使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
在这里插入图片描述

模板继承示例

art文件

//实现了模板的继承
{{ extend './common/layout.art'}}

{{ block 'content'}}
<p>{{ msg }}</p>
{{ /block }}

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

js代码

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

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

const html = template(views, {
	msg: '首页模板'
});

console.log(html);

模板art代码

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