使用artTemplate模板開發網站（node.js+express環境）

資料價值發表於2016-12-12

本文詳細說明了如何利用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’);
//——————————————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開發模板引擎

開發中所使用的開發環境
2007-07-21
開發環境
Node.js+Express 開發之Cookie、Session 使用詳解
2019-11-26
Node.jsExpressCookieSession
小程式雲開發模板和環境快速開通的方法
2020-12-24
使用 Docker 搭建本地開發環境！
2022-09-09
Docker開發環境
使用 Docker 搭建 PHP 開發環境
2016-09-06
DockerPHP開發環境
使用webpack搭建react開發環境
2018-05-14
WebReact開發環境
使用vagrant統一開發環境
2017-12-14
開發環境
emacs開發環境配置(4)——rust開發環境
2021-11-10
Mac開發環境Rust
新版vue-cli模板下本地開發環境使用node伺服器跨域
2018-04-02
Vue開發環境伺服器跨域
PHP開發環境 03 - 使用KFKDock搭建PHP專案環境
2021-09-09
PHP開發環境
用Python+Django在Eclipse環境下開發web網站
2014-03-12
PythonDjangoEclipseWeb網站
使用 PhpStorm + Docker 搭建開發環境
2021-05-18
PHPORMDocker開發環境
使用 Rainbond 搭建本地開發環境
2022-11-29
AI開發環境
使用sublime搭建python開發環境
2016-10-27
Python開發環境
使用VundleVim定製vim開發環境
2017-11-26
開發環境
基於 Svelte 的通用靜態網站開發模板
2021-10-02
網站
試用環境開發環境不發郵件
2018-01-05
開發環境
開發環境配置
2019-12-02
開發環境
PHP開發環境
2020-09-29
PHP開發環境
一、開發環境
2018-06-06
開發環境
PyQt5開發環境配置並使用
2017-09-20
QT開發環境
使用 Docker 作為 Python 開發環境
2016-01-07
DockerPython開發環境
使用 Vagrant 打造跨平臺開發環境
2015-03-09
開發環境
基於django的視訊點播網站開發-step2-搭建環境
2019-02-13
Django網站
phpwamp開發環境搭建詳解，phpwamp綠色整合環境開發環境一鍵搭建
2017-08-30
PHP開發環境
ubuntu環境下搭建以太坊開發環境
2018-12-27
Ubuntu開發環境
入口網站模板
2013-03-14
網站
1 – 搭建開發環境
2019-02-23
開發環境
react 配置開發環境
2019-02-27
React開發環境
PHP 線上開發環境
2021-07-16
PHP開發環境
rollup 開發環境搭建
2021-08-16
開發環境
js開發環境配置
2019-01-13
JS開發環境
搭建go開發環境
2019-01-31
Go開發環境
Androdi開發環境搭建
2019-01-22
開發環境
Java開發環境搭建
2020-11-10
Java開發環境
前端開發環境搭建
2020-09-25
前端開發環境
Theia 開發環境搭建
2023-03-28
開發環境
Java開發環境配置
2023-02-26
Java開發環境