一. 模板引擎的基础概念
文档：http://aui.github.io/art-template/zh-cn/
Github: https://github.com/aui/art-template
1 - 模板引擎 (art-template)
模板引擎是腾讯公司开发的第三方模块，让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。
// 未使用模板引擎的写法
var ary = [{ name: '张三', age: 20 }];
var str = '';
for (var i = 0; i < ary.length; i++) {
str += '- \
'+ ary[i].name +'\
'+ ary[i].age +'\
';
}
str += '
';
{{each ary}}
- {{$value.name}}
- {{$value.age}}
{{/each}}
2 - 模板引擎的基本使用
- 在命令行工具中使用
npm install art-template命令进行下载 - 使用
const template = require('art-template')引入模板引擎 - 告诉模板引擎要拼接的数据和模板在哪
const html = template(‘模板路径’, 数据); - 使用模板语法告诉模板引擎，模板与数据应该如何进行拼接
注意：模板路径推荐使用绝对路径，更安全，可以使用 __dirname 拼接
代码示例：
index.art 模板文件代码：
Document
{{ name }}
{{ age }}
app.js 代码：
// 导入模板引擎
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', 'index.art');
// template方法是用来拼接字符串的
// 1\. 模板路径 绝对路径
// 2\. 要在模板中显示的数据 对象类型
// 返回拼接好的字符串
const html = template(views, {
name: '张三',
age: 20
})
console.log(html);
// 服务端返回拼接好的字符串给客户端
res.end(html);
使用 node app.js 命令执行上面代码，打印如下：
Document
张三
20
可以发现，template方法把拼接好的字符串返回了。
二. 模板引擎的语法
1 - 标准语法和原始语法
art-template同时支持两种模板语法：标准语法和原始语法。
标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。
标准语法： {{ 数据 }}
原始语法：<%= 数据 %>
2 - 输出
将某项数据输出在模板中，标准语法和原始语法如下：
{{value}}
{{a ? b : c}}
{{a + b}}
<%= value %>
<%= a ? b : c %>
<%= a + b %>
3 - 原文输出
如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出，如果想要解析，可以使用如下语法。
标准语法：{{@ 数据 }}l
原始语法：<%- 数据 %>
比如在 js 文件中我们这样定义：
const html = template(views, {
name: '张三',
age: 20,
content: '我是标题
'
})
在.art文件中，想要解析就要如下这样写：
{{@ content }}
<%- content %>
最后打印结果为：
我是标题
4 - 条件判断
在模板中可以根据条件来决定显示哪块HTML代码，如果条件成立则会显...之内的数据。
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
注意：一个 <% 和一个 %> 是一对，他们总是成对出现的。
示例代码如下：
.art文件代码如下：
{{if age > 18}}
年龄大于18
{{else if age < 15 }}
年龄小于15
{{else}}
年龄不符合要求
{{/if}}
<% if (age > 18) { %>
年龄大于18
<% } else if (age < 15) { %>
年龄小于15
<% } else { %>
年龄不符合要求
<% } %>
5 - 循环
标准语法：{{each 数据}} {{/each}}
原始语法：<% for() { %> <% } %>
{{each target}}
{{$index}} {{$value}}
{{/each}}
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
示例代码如下：
.art文件代码：
{{each users}}
-
{{$value.name}}
{{$value.age}}
{{$value.sex}}
{{/each}}
<% for (var i = 0; i < users.length; i++) { %>
-
<%=users[i].name %>
<%=users[i].age %>
<%=users[i].sex %>
<% } %>
.js文件代码：
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '03.art');
const html = template(views, {
users: [{
name: '张三',
age: 20,
sex: '男'
},{
name: '李四',
age: 30,
sex: '男'
},{
name: '玛丽',
age: 15,
sex: '女'
}]
});
console.log(html);
执行js文件，打印如下：
-
张三
20
男
-
李四
30
男
-
玛丽
15
女
6 - 子模版
使用子模板可以将网站公共区块（头部、底部）抽离到单独的文件中。
标准语法：{{include '模板'}}
原始语法：<%include('模板') %>
{{include './header.art'}}
<% include('./header.art') %>
7 - 模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
比如，首页页面模板，可以继承HTML骨架模板，然后再包含子模板，页面自己的一些东西就可以通过下面的坑来填充，如下：
8 - 模板继承示例
HTML骨架模板layout.art文件：
HTML骨架模板
{{block 'head'}}{{/block}}
{{block 'content'}}{{/block}}
index.art 首页模板：
{{extend './layout.art'}}
{{block 'head'}} {{/block}}
{{block 'content'}} This is just an awesome page.
{{/block}}
9 - 模板配置 & 导入变量
// 向模板中导入变量
template.defaults.imports.变量名 = 变量值;
// 设置模板根目录
template.defaults.root = 模板目录
// 设置模板默认后缀
template.defaults.extname = '.art'
如果我们想要在模板中使用dateformat方法，首先使用npm install dateformat下载第三方模块，其他详细代码如下：
.js文件代码：
const template = require('art-template');
const path = require('path');
// 引入dateformat模块
const dateFormat = require('dateformat');
// 设置模板的根目录
// 设置之后，在下面就可以直接写模板的名字了，就不用写绝对路径了,比如：template('06.art', {})
template.defaults.root = path.join(__dirname, 'views');
// 导入模板变量
// 导入之后在.art文件中就可以使用dateFormat方法了
template.defaults.imports.dateFormat = dateFormat;
// 配置模板的默认后缀
// 配置之后就可以直接写名字了，不用写后缀了，比如：template('06', {})
template.defaults.extname = '.art';
const html = template('06', {
time: new Date()
});
console.log(html);
.art文件代码：
// 导入之后在.art文件中就可以使用dateFormat方法了
{{ dateFormat(time, 'yyyy-mm-dd')}}
三. 案例：学生档案管理
1 - 案例介绍
目标：模板引擎应用，强化 node.js 项目制作流程。
知识点：http请求响应、数据库、模板引擎、静态资源访问。
2 - 制作流程
- 建立项目文件夹并生成项目描述文件（使用npm init -y生成package.json文件）
- 创建网站服务器实现客户端和服务器端通信
- 连接数据库并根据需求设计学员信息表
- 创建路由并实现页面模板呈递
- 实现静态资源访问
- 实现学生信息添加功能
- 实现学生信息展示功能
3 - 第三方模块 router
功能：实现路由
使用步骤：
- 使用
npm install router下载第三方模块 router - 获取路由对象
- 调用路由对象提供的方法创建路由
- 启用路由，使路由生效
// 创建路由
const getRouter = require('router')
const router = getRouter();
router.get('/add', (req, res) => {
res.end('Hello World!')
})
server.on('request', (req, res) => {
// 启用路由功能 outer方法有三个参数,第三个参数是回调函数,请求完成之后会调用这个回调函数
router(req, res, () => {})
})
4 - 第三方模块 serve-static
功能：实现静态资源访问服务，比如访问html里面链接的css文件
使用步骤：
- 使用
npm install serve-static下载第三方模块 serve-static - 引入serve-static模块获取创建静态资源服务功能的方法
- 调用方法创建静态资源服务并指定静态资源服务目录
- 启用静态资源服务功能
const serveStatic = require('serve-static')
// public就是静态资源的目录
const serve = serveStatic('public')
server.on('request', () => {
// 启用静态资源访问服务功能
serve(req, res, () => {})
})
server.listen(3000)
5 - 添加学生信息功能步骤分析
- 在模板的表单中指定请求地址与请求方式
- 为每一个表单项添加name属性，方便后端接收请求参数
- 添加实现学生信息功能路由
- 接收客户端传递过来的学生信息
- 将学生信息添加到数据库中
- 将页面重定向到学生信息列表页面
6 - 学生信息列表页面分析
- 从数据库中将所有的学生信息查询出来
- 通过模板引擎将学生信息和HTML模板进行拼接
- 将拼接好的HTML模板响应给客户端
代码地址：https://github.com/iamkata/art-template_case
项目目录如下：
其中：
- app.js是项目的入口文件
- model里面是各种模块，connect.js是数据库连接模块，user.js是创建集合模块
- public里面是各种静态资源，比如css文件
- route里面是路由模块
- views里面是模板引擎文件
作者：Imkata
链接：https://www.jianshu.com/p/4e316a0811bd
来源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。