一. 模板引擎的基础概念

文档：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文件，打印如下：

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) => {
    // 启用路由功能 router方法有三个参数,第三个参数是回调函数,请求完成之后会调用这个回调函数
    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里面是模板引擎文件

前后端交互-模板引擎artTemplate

一. 模板引擎的基础概念

1 - 模板引擎 (art-template)

2 - 模板引擎的基本使用

二. 模板引擎的语法

1 - 标准语法和原始语法

2 - 输出

{{value}}

{{a ? b : c}}

{{a + b}}

<%= value %>

<%= a ? b : c %>

<%= a + b %>