使用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...