模板引擎artTemplate

1. 基础概念

1.1 模板引擎★★★

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。

1.2 art-template模板引擎★★★

介绍

art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。在线速度测试。

特性

拥有接近 JavaScript 渲染极限的的性能
调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
支持 Express、Koa、Webpack
支持模板继承与子模板
浏览器版本仅 6KB 大小

2. 模板语法

2.1 输出★★★

标准语法：

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

原始语法：

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

2.2 原文输出★★★

标准语法：

{{@ value }}

原始语法：

<%- value %>

2.3 条件判断★★★

标准语法：

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

原始语法：

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

2.4 循环★★★

标准语法：

{{each target}}
{{$index}} {{$value}}
{{/each}}

原始语法：

<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>

2.5 子模板★★★

标准语法：

{{include './header.art'}}
{{include './header.art' data}}

原始语法：

<% include('./header.art') %>
<% include('./header.art', data) %>

2.6 模板继承★★★

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

标准语法：

{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}

原始语法：

<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>

模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。范例：

        <!--layout.art--><!doctype html><html><head><meta charset="utf-8"><title>{{block 'title'}}My Site{{/block}}</title>{{block 'head'}}<link rel="stylesheet" href="main.css">{{/block}}</head><body>{{block 'content'}}{{/block}}</body></html><!--index.art-->{{extend './layout.art'}}{{block 'title'}}{{title}}{{/block}}{{block 'head'}}<link rel="stylesheet" href="custom.css">{{/block}}{{block 'content'}}<p>This is just an awesome page.</p>{{/block}}

渲染 index.art 后，将自动应用布局骨架。

2.7 模板配置★★★

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

3. 案例《学生档案管理》

3.1 学生档案创建★★★

建立项目文件夹并生成项目描述文件

创建网站服务器实现客户端和服务器端通信

// 引入http模块
const http = require('http');
// 引入模板引擎
const template = require('art-template');
// 引入path模块
const path = require('path');
// 引入静态资源访问模块
const serveStatic = require('serve-static');
// 引入处理日期的第三方模块
const dateformat = require('dateformat');const router = require('./route/index');
// 实现静态资源访问服务
const serve = serveStatic(path.join(__dirname, 'public'))// 配置模板的根目录
template.defaults.root = path.join(__dirname, 'views');
// 处理日期格式的方法
template.defaults.imports.dateformat = dateformat;// 数据库连接
require('./model/connect');// 创建网站服务器
const app = http.createServer();
// 当客户端访问服务器端的时候
app.on('request', (req, res) => {// 启用路由功能router(req, res, () => {})// 启用静态资源访问服务功能serve(req, res, () => {})
});
// 端口监听
app.listen(80);
console.log('服务器启动成功');

连接数据库并根据需求设计学员信息表

const mongoose = require('mongoose');
// 连接数据库
mongoose.connect('mongodb://localhost/playground', { useNewUrlParser: true }).then(() => console.log('数据库连接成功')).catch(() => console.log('数据库连接失败'))

创建路由并实现页面模板呈递

// 引入router模块
const getRouter = require('router');
// 获取路由对象
const router = getRouter();
// 学生信息集合
const Student = require('../model/user');
// 引入模板引擎
const template = require('art-template');
// 引入querystring模块
const querystring = require('querystring');// 呈递学生档案信息页面
router.get('/add', (req, res) => {let html = template('index.art', {});res.end(html);
})module.exports = router;

实现静态资源访问

// 引入静态资源访问模块
const serveStatic = require('serve-static');// 实现静态资源访问服务
const serve = serveStatic(path.join(__dirname, 'public'))

实现学生信息添加功能

// 实现学生信息添加功能路由
router.post('/add', (req, res) => {// 接收post请求参数let formData = '';req.on('data', param => {formData += param;});req.on('end', async () => {await Student.create(querystring.parse(formData))res.writeHead(301, {Location: '/list'});res.end()})
});

实现学生信息展示功能

// 呈递学生档案信息列表页面
router.get('/list', async (req, res) =>{// 查询学生信息let students = await Student.find();console.log(students);let html = template('list.art', {students: students})res.end(html)
})

5.3.2 学生档案展示★★★

// 呈递学生档案信息列表页面
router.get('/list', async (req, res) =>{// 查询学生信息let students = await Student.find();console.log(students);let html = template('list.art', {students: students})res.end(html)
})

<table><caption>学员信息</caption><tr><th>姓名</th><th>年龄</th><th>性别</th><th>邮箱地址</th><th>爱好</th><th>所属学院</th><th>入学时间</th></tr>{{each students}}<tr><th>{{$value.name}}</th><th>{{$value.age}}</th><th>{{$value.sex == '0' ? '男' : '女'}}</th><th>{{$value.email}}</th><th>{{each $value.hobbies}}<span>{{$value}}</span>{{/each}}</th><th>{{$value.collage}}</th><th>{{dateformat($value.enterDate, 'yyyy-mm-dd')}}</th></tr>{{/each}}</table>