使用artTemplate模板开发网站（node.js + express环境）

时间 2019-11-09

标签使用 arttemplate 模板开发网站 node.js node express 环境栏目网站开发繁體版

原文原文链接

本文详细说明了如何利用artTemplate模板引擎开发网站，主要是搭配node.js、express环境进行讲解。同时在文章开头会简单介绍了模板、模板引擎概念，以及artTemplate模板引擎的发展史，比较熟悉模板、模板引擎的读者能够跳过这部分。artTemplate的语法将放在文章最后稍做说明，由于语法不是本文的重点所在，能够参考其它文章详细了解语法知识。javascript

为何要写做这篇文章？

在学习artTemplate模板时，你们天然而然地想到参考artTemplate官方公布的文档，也就是托管在GitHub中的项目的README。然而README中的讲解对于初次接触artTemplate，尤为是对初次接触模板引擎的初学者来讲，略显深奥。本文的宗旨，就是详细地描述出使用artTemplate的具体步骤和作法，使初学者能够迅速地看到使用artTemplate所能达到的效果，为进一步学习和使用模板引擎做铺垫。html

本文只是将许多参考资料加以整理而已，并不包含全新的思想等。本文中的许多例子，包括文字说明、代码等，也都是引用网络上的现成的。引用较多，在文章最后有列出主要的参考文章。前端

模板与模板引擎的概念

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它能够生成特定格式的文档，用于网站的模板引擎会生成一个标准的HTML文档。模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在Asp下有模板引擎，在PHP下也有模板引擎，在C#下也有，甚至JavaScript、WinForm开发都会用到模板引擎技术。npm

模板引擎按实现方式，能够分类“置换型引擎 ”、“解释型引擎 ”、“编译型引擎 ”三类。
置换型引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换一下便生成了最终须要的业务数据，它实现简单，但其效率低下，没法知足高负载的应用需求。
模板引擎按运行在客户端仍是运行在服务器端，能够分为“前端引擎”、“后端引擎”两类。

模板引擎可让（网站）程序实现界面与数据分离，这就大大提高了开发效率，良好的设计也使得代码重用变得更加容易。咱们司空见惯的模板安装卸载等概念，基本上都和模板引擎有着千丝万缕的联系。模板引擎不仅是可让你实现代码分离（业务逻辑代码和用户界面代码），也能够实现数据分离（动态数据与静态数据），还能够实现代码单元共享（代码重用），甚至是多语言、动态页面与静态页面自动均衡（SDE）等等与用户界面可能没有关系的功能。

artTemplate模板引擎

artTemplate是一款性能卓越的 javascript 模板引擎。它采用预编译方式让性能有了质的飞跃，而且充分利用 javascript 引擎特性，使得其性能不管在前端仍是后端都有极其出色的表现。除了性能优点外，调试功能也值得一提。模板调试器能够精肯定位到引起渲染错误的模板语句，解决了编写模板过程当中没法调试的痛苦，让开发变得高效，也避免了由于单个模板出错致使整个应用崩溃的状况发生。

artTemplate引擎本来是这本来是腾讯内部公用组件之一，现已在MIT、BSD、GPL协议下开源，广大群众均可以使用了。

artTemplate引擎属于“前端引擎”同时又属于“后端引擎”，还支持预编译。

目前artTemplate的版本是3.0.3，能够从https://github.com/yourcaptai... 得到源码（forked from aui/artTemplate）。

做为前端引擎的artTemplate的使用方法

artTemplate做为前端引擎使用，上手特别快。
主要步骤有，下载template.js，制做模板，渲染模板。接下来一一详细说明。

首先须要下载：
template.js (简洁语法版, 2.7kb)

而后是建立一个html文件，好比建立一个名为sample.html的文件。
咱们将在其中嵌入模板。
该html文件能够比较简单以下，在头文件中引用刚刚下载的template.js（注意引用路径须根据你的环境下该文件所存放的路径进行适当调整），而后再正文中放置一个id为content的div标签（也能够是其它块标签），用来存放接下来根据模板动态生成的html内容。

<html>

<head>
  <meta charset=”UTF-8″>
  <title>basic-demo</title>
  <script src=”template.js”></script>
</head>
<body>
  <div id=”content”></div>
 
</body>
</html>

而后是制做模板：
本例使用一个type=”text/html”的script标签存放模板，<script></script>标签中包含的部分是模板自己，<script></script>标签只是用来存放模板的容器。

将模板内容放到<script></script>标签只是为了容易引用这些模板内容，
后面你将看到不将模板内容放到<script></script>标签中而是在javascript中以字符串的形式存放模板。

<!– 模板 –>
<script id=”test” type=”text/html”>
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>

这样sample.html将变为以下样子

<html>

<head>
  <meta charset=”UTF-8″>
  <title>basic-demo</title>
  <script src=”template.js”></script>
</head>
 
<body>
  <div id=”content”></div>
  <!– 模板 –>
  <script id="test" type="text/html">
    <h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
  </script>
</body>
</html>

而后是渲染模板的工做
即将数据等应用到模板上，以获得最终显示的效果（html文档）。

渲染模板的代码以下：

var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById(‘content’).innerHTML = html;

渲染代码中用到了template(id, data)方法，该方法是在template.js文件中定义的。
template(id, data) 方法根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
若是没有 data 参数，那么将返回一渲染函数。
此时知道为何要把模板放在<script>标签中了吧，由于渲染模板时，template能够根据<script>标签的id来查找模板啦。

这样sample.html将变为以下样子

<html>

<head>
  <meta charset=”UTF-8″>
  <title>basic-demo</title>
  <script src=”template.js”></script>
</head>
 
<body>
  <div id=”content”></div>
  <!– 模板 –>
  <script id="test" type="text/html">
    <h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
  </script>
 
  <!– 渲染模板 –>
  <script>
    var data = {
       title: ‘标签’,
       list: [‘文艺’, ‘博客’, ‘摄影’, ‘电影’, ‘民谣’, ‘旅行’, ‘吉他’]
      };
    var html = template(‘test’, data);
     document.getElementById(‘content’).innerHTML = html;
  </script>
</body>
</html>

而后在浏览器中打开sample.html，就会看到由artTemplate根据给定的数据将模板渲染成功的样子了。
http://aui.github.io/artTempl...

做为后端引擎的artTempalte的使用方法（搭配node.js）

artTemplate不只能够做为前端引擎，还能够做为后端引擎使用。
artTemplate是出色的javascript引擎，搭配出色的javascript运行时环境node.js一块儿使用，将会很是顺畅。
因此要求读者需掌握node.js的基础知识。
本小节将详细说明node.js环境下artTemplate的使用方法，包括安装node.js、建立工做区、初始化工做区、使用npm安装NodeJS版artTemplate、建立http服务器框架、编写artTemplate模板、渲染模板

安装node.js 和 npm

可参考官方文档：https://nodejs.org/en/download/
安装最新版的node.js时会自动同时安装npm。
此处读者需掌握node.js和npm基础知识

建立工做区
建立工做区，就是指定一个空文件夹，做为工做区。假定咱们的工做区的目录名叫“myWork”，MS windows操做系统下，能够放到公共文档目录下“C:UsersPublicDocumentsmyWork”，Linux等操做系统下请自行在可用的目录下建立“myWork”文件夹。
而后进入工做区，即进入“myWork”文件夹。

初始化工做区

进入工做区，即进入“myWork”文件夹，而后执行如下命令，依据提示填入信息便可。MS Windows下可在命令行工具中进行。Linux下请注意确认是否须要root权限。
此处读者需掌握node.js和npm基础知识

npm init

执行完毕后，工做区下会出现一个package.json文件。

使用npm安装NodeJS版artTemplate
此处读者需掌握node.js和npm基础知识
进入工做区，即进入“myWork”文件夹，而后执行如下命令。MS Windows下可在命令行工具中进行。Linux下请注意确认是否须要root权限。

npm install art-template --save

执行完毕后，工做区下会出现一个node_modules文件夹。

建立http服务器框架
而后咱们建立一个最简单的http服务器框架。
此处读者需掌握node.js和npm基础知识

进入工做区，即进入“myWork”文件夹，而后执行如下命令。MS Windows下可在命令行工具中进行。
而后新建文件：server.js
编写代码以下：

var http = require(“http”);
var os = require(“os”);
http.createServer(function(request, response) {
    console.log(“New request arrived.”);
    response.end();
}).listen(3000);
console.log(“Server is running, listening on port 3000….”);

在Windows命令行下，进入工做区，执行 node server.js ，服务器就启动了。
此时在本地机器上使用浏览器访问http://localhost:3000将不会收到任何返回信息，不过服务器端的命令行工具上会显示“New request arrived.”字样。
按Ctl+C退出服务器

编写artTemplate模板

在工做区下，建立index.html，并将以下代码输入index.html，并保存。
其中<ul>标签中的内容，就是模板代码。

<html>
<head>
<meta charset=”utf-8″>
<title>模板</title>
</head>
 
<body>
     <div id=”main”>
          <ul>
               {{each list}}
               <li>编号：{{$value.id}} &nbsp;&nbsp;姓名：{{$value.name}}</a></li>
               {{/each}}
          </ul>
     </div>
</body>
</html>

渲染模板

如今，咱们要改造刚才建立的建立http服务器框架。在response.end()调用以前，加上渲染模板的代码，使得服务器框架代码变为以下的样子。

var http = require(“http”);
var os = require(“os”);
http.createServer(function(request, response) {
console.log(“New request arrived.”);var template = require(‘art-template’);
     //数据
     var data = {list: [{id:’1′, name:’张三’}, {id:’2′, name:’李四’}]};
     //渲染模板
     var html = template(‘./index’, data);

response.writeHead(200, {“Content-Type”: “text/html”});
response.write(html);
response.end();
}).listen(3000);
console.log(“Server is running, listening on port 3000….”);

还记得template(id, data)方法吗？这是在前端DOM环境下的用法。其实在NodeJS环境下，它就至关于template(filename, data)了，能够将须要渲染的模板文件名看成路径传给它的第一个参数。

在Windows命令行下，进入工做区，执行 node server.js ，服务器就启动了。
此时在本地机器上使用浏览器访问http://localhost:3000将会看到Html输出了，服务器端的命令行工具上同时也会显示“New request arrived.”字样。

按Ctrl+C退出服务器

artTemplate搭配express使用

express框架是由javascript语言开发的，基于Node.js平台的，快速、开放、极简的web开发框架。

安装express

express中文网上有详尽的安装手册，能够参考：http://www.expressjs.com.cn/s...

改造app.js

app.js是express的主要文件，这个文件里包含了指定模板引擎、指定视图文件默认路径的代码。须要将指定模板引擎的代码改成指定用art-template引擎。视图文件默认路径保持不变，所以无需改动。
以

//——————————————start 
     //——————————————end

围起来的区域，是新增的内容。
代码app.set(‘view engine’, ‘jade’); 这一行是app.js默认的内容，须要注释掉，所以在前面加上了//注释符。
代码最后的“app.listen(3000);”必须加上，不然服务启动后将不会监放任何端口。
express3.0以上版本默认框架中再也不包含监听端口的代码了。

//app.js
 
var express = require(‘express’);
var path = require(‘path’);
var favicon = require(‘serve-favicon’);
var logger = require(‘morgan’);
var cookieParser = require(‘cookie-parser’);
var bodyParser = require(‘body-parser’);//——————————————start
//引用artTemplate模块
var template = require(‘art-template’);
//——————————————end

var routes = require(‘./routes/index’);
var users = require(‘./routes/users’);var app = express();
// view engine setup
app.set(‘views’, path.join(__dirname, ‘views’));
//——————————————start
//用art-template引擎替换默认的jade引擎
//app.set(‘view engine’, ‘jade’);
template.config(‘base’, ”);
template.config(‘extname’, ‘.html’);
app.engine(‘.html’, template.__express);
app.set(‘view engine’, ‘html’);
//——————————————end

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, ‘public’, ‘favicon.ico’)));
app.use(logger(‘dev’));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, ‘public’)));

app.use(‘/’, routes);
app.use(‘/users’, users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error(‘Not Found’);
err.status = 404;
next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get(‘env’) === ‘development’) {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render(‘error’, {
message: err.message,
error: err
});
});
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render(‘error’, {
message: err.message,
error: {}
});
});

module.exports = app;

app.listen(3000);

编写artTemplate模板

在工做区下，进入express文件夹中的views子文件夹，建立index.html，并将以下代码输入index.html，并保存。

注意，views文件夹下会有index.jade等三个后缀是.jade的文件存在，能够忽视它们。由于express默认支持的模板引擎是jade，因此初始化的框架中的模板是以.jade结尾的文件。也能够删除它们。

其中<ul>标签中的内容，就是模板代码。

<html>
<head>
<meta charset=”utf-8″>
<title>模板</title>
</head>
 
<body>
     <div id=”main”>
          <ul>
               {{each list}}
               <li>编号：{{$value.id}} &nbsp;&nbsp;姓名：{{$value.name}}</a></li>
               {{/each}}
          </ul>
     </div>
</body>
</html>

渲染模板

express默认访问index路由。咱们须要在index路由方法中，渲染模板。

进入routes文件夹，打开index.js，增长渲染模板的代码，以下：

var express = require(‘express’);
var router = express.Router();
 
router.get(‘/’, function(req, res, next) {
 
     //数据
     var data = {
     title: ‘国内要闻’,
     time: (new Date).toString(),
     list: [
          {
               id: ‘1’,
               name: ‘张三’
          },
          {
               id: ‘2’,
               name: ‘李四’
          }
     ]
     };
 
     //渲染模板
     res.render(‘index’, data);
 
});
 
module.exports = router;

代码中的res.render(‘index’, data)调用，会调用artTemple模块中的template.__express方法，并传入模板文件名、数据。
template.__express方法是在app.js中注册给express框架的。

在Windows命令行下，进入工做区，执行 node app.js ，服务器就启动了。
此时在本地机器上使用浏览器访问http://localhost:3000将会看到Html输出了，服务器端的命令行工具上同时也会显示“New request arrived.”字样。

按Ctl+C退出服务器

artTemplate的语法

如下是语法的简单说明。
简洁语法 —— artTemplate的开发者推荐使用简洁语法，简单实用，利于读写。
template.js (简洁语法版, 2.7kb)
{{if admin}}
{{include 'admin_content'}}{{each list}}
<div>{{$index}}. {{$value.user}}</div>
{{/each}}
{{/if}}

简洁语法详细说明：https://github.com/aui/artTem...

原生语法
template-native.js (原生语法版, 2.3kb)
<%if (admin){%>
<%include('admin_content')%><%for (var i=0;i<list.length;i++) {%>
<div><%=i%>. <%=list[i].user%></div>
<%}%>
<%}%>

原生语法详细说明：https://github.com/aui/artTem...

后记

本文是依据做者的实践经验整理而成。
做者的开发环境以下

windows 7 64bit 中文版
node.js 0.12.7
npm 2.11.3
express 4.13.1

文中的代码如在读者本地没法运行，请检查运行环境与做者的是否一致，不一致的话，请参考各工具版本间的变化，对代码加以修正。

如发现文中错误还请不吝赐教。

做者联系方式：yuan_aiqing@outlook.com 袁艾青

参考资料

artTemplate的Github托管
 JS模板引擎介绍搜集
 高性能JavaScript模板引擎原理解析
 百度百科-模板引擎
 为Express开发模板引擎