您的位置：首页 > 运维架构 > 网站架构

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

2017-09-09 23:00 891 查看

转自：https://segmentfault.com/a/1190000003766092

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

为什么要写作这篇文章？

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

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

模板与模板引擎的概念

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

模板引擎按实现方式，可以分类“置换型引擎 ”、“解释型引擎 ”、“编译型引擎 ”三类。

置换型引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换一下便生成了最终需要的业务数据，它实现简单，但其效率低下，无法满足高负载的应用需求。

模板引擎按运行在客户端还是运行在服务器端，可以分为“前端引擎”、“后端引擎”两类。

模板引擎可以让（网站）程序实现界面与数据分离，这就大大提升了开发效率，良好的设计也使得代码重用变得更加容易。我们司空见惯的模板安装卸载等概念，基本上都和模板引擎有着千丝万缕的联系。模板引擎不只是可以让你实现代码分离（业务逻辑代码和用户界面代码），也可以实现数据分离（动态数据与静态数据），还可以实现代码单元共享（代码重用），甚至是多语言、动态页面与静态页面自动均衡（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}}   姓名：{{$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}}   姓名：{{$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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航