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

来源：互联网发布：skype for ubuntu 14 编辑：程序博客网时间：2024/06/06 00:56

转自：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}} &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’);//——————————————endvar routes = require(‘./routes/index’);var users = require(‘./routes/users’);var app = express();// view engine setupapp.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 handlerapp.use(function(req, res, next) {var err = new Error(‘Not Found’);err.status = 404;next(err);});// error handlers// development error handler// will print stacktraceif (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 userapp.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

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

阅读全文

0 0