Nodejs第4天：模板引擎artTemplate：模板引擎的基础概念、模板引擎的语法、案例

最新推荐文章于 2023-06-01 08:34:57 发布

库库好困

最新推荐文章于 2023-06-01 08:34:57 发布

阅读量163

点赞数

分类专栏：九：Nodejs 看视频文章标签： nodejs

本文链接：https://blog.youkuaiyun.com/m0_46597922/article/details/107432339

版权

九：Nodejs 看视频专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了artTemplate模板引擎的基本概念、语法特性及其在实际项目中的应用。包括标准语法和原始语法的区别，如何进行数据输出、原文输出、条件判断、循环、子模板引用及模板继承。同时，提供了具体案例——学生档案管理系统，展示了模板引擎在node.js项目中的集成流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模板引擎artTemplate

目标

能够使用模板引擎渲染数据
能够使用模板引擎进行原文输出
能够使用循环输出数据
能够知道如何引用子模板
能够知道如何如何进行模板继承

一. 模板引擎的基础概念

1.1 模板引擎

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

// 未使用模板引擎的写法 
var ary = [{ name: '张三', age: 20 }]; 
var str = '<ul>'; 
for (var i = 0; i < ary.length; i++) { 
	str += '<li>\ 
		<span>'+ ary[i].name +'</span>\ 
		<span>'+ ary[i].age +'</span>\ 
	</li>'; 
}
str += '</ul>';

<!-- 使用模板引擎的写法 --> 
<ul>
	{{each ary}} 
		<li>{{$value.name}}</li> 
		<li>{{$value.age}}</li> 
	{{/each}} 
</ul>

1.2 art-template模板引擎

在命令行工具中使用 npm install art-template 命令进行下载
使用const template = require(‘art-template’)引入模板引擎
告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据);
使用模板语法告诉模板引擎，模板与数据应该如何进行拼接

1.3 art-template代码示例

// 导入模板引擎模块 
const template = require('art-template'); 
// 将特定模板与特定数据进行拼接 
const html = template('./views/index.art',{ 
	data: { 
		name: '张三', 
		age: 20 
	} 
});

<div>
	<span>{{data.name}}</span> 
	<span>{{data.age}}</span> 
</div>

二. 模板引擎的语法

2.1 模板语法

art-template同时支持两种模板语法：标准语法和原始语法。
标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。

标准语法： {{ 数据 }}
原始语法：<%=数据 %>

2.2 输出

将某项数据输出在模板中，标准语法和原始语法如下：

l 标准语法：{{ 数据 }}
原始语法：<%=数据 %>

<!-- 标准语法 --> 
<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.3 原文输出

如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出。

标准语法：{{@ 数据 }}
原始语法：<%-数据 %>

<!-- 标准语法 --> 
<h2>{{@ value }}</h2> 

<!-- 原始语法 --> 
<h2><%- value %></h2>

2.4 条件判断

<!-- 标准语法 --> 
{{if 条件}} ... {{/if}} 
{{if v1}} ... {{else if v2}} ... {{/if}} 

<!-- 原始语法 --> 
<% if (value) { %> ... <% } %> 
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

2.5 循环

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

<!-- 标准语法 --> 
{{each target}} 
	{{$index}} {{$value}} 
{{/each}} 

<!-- 原始语法 --> 
<% for(var i = 0; i < target.length; i++){ %> 
	<%= i %><%= target[i] %> 
<% } %>

2.6 子模版

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

标准语法：{{include ‘模板’}}
原始语法：<%include(‘模板’) %>

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

2.7 模板继承

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

在这里插入图片描述

2.8 模板继承示例

<!doctype html> 
<html>
	<head>
		<meta charset="utf-8"> 
		<title>HTML骨架模板</title> 
		{{block 'head'}}{{/block}} 
	</head> 
	<body>
		{{block 'content'}}{{/block}} 
	</body> 
</html>

<!--index.art 首页模板--> 
{{extend './layout.art'}} 
{{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}} 
{{block 'content'}} <p>This is just an awesome page.</p> {{/block}}

2.9 模板配置

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

三. 案例-学生档案管理

案例文件压缩包已经上传至资源处，压缩包名字叫：Nodejs第4天案例-学生档案管理.zip

3.1 案例介绍 – 学生档案管理

目标：模板引擎应用，强化node.js项目制作流程。

知识点：http请求响应、数据库、模板引擎、静态资源访问。
在这里插入图片描述

3.2 制作流程

建立项目文件夹并生成项目描述文件
创建网站服务器实现客户端和服务器端通信
连接数据库并根据需求设计学员信息表
创建路由并实现页面模板呈递
实现静态资源访问
实现学生信息添加功能 7. 实现学生信息展示功能

3.3 第三方模块 router

功能：实现路由
使用步骤：
1. 获取路由对象
2. 调用路由对象提供的方法创建路由
3. 启用路由，使路由生效

const getRouter = require('router') 
const router = getRouter(); 
router.get('/add', (req, res) => { 
	res.end('Hello World!') 
})
server.on('request', (req, res) => { 
	router(req, res) 
})

3.4 第三方模块 serve-static

功能：实现静态资源访问服务
步骤：

引入serve-static模块获取创建静态资源服务功能的方法
调用方法创建静态资源服务并指定静态资源服务目录
启用静态资源服务功能

const serveStatic = require('serve-static') 
const serve = serveStatic('public') 
server.on('request', () => { 
	serve(req, res) 
})
server.listen(3000)