一、模板引擎
1、什麼是模板引擎
官方解釋：art-template 是一個簡約、超快的模板引擎。它採用作用域預聲明的技術來優化模板渲染速度，從而獲得接近 JavaScript 極限的運行性能，並且同時支持 NodeJS 和瀏覽器。
art-template 不僅可以在瀏覽器使用，也可以在node中使用
模板引擎 art-template 官網
2、模板引擎安裝
安裝步驟：npm install art-template(該命令在哪執行就把包下載到哪裏，默認會下載到node_modules目錄中，不要改路徑也不支持改)
下載的文件夾中node_modules\lib\template-web.js 是給瀏覽器使用的，在瀏覽器中引用
強調：模板引擎不關心字符串內容，只關心自己能認識的模板標記語法，例如{{}}
實例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板引擎不關心內容</title>
<script src="../node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
<script type="text/template" id="tql">
hello,{{msg}}
</script>
<script>
var app = template("tql",{
msg:"node"
})
console.log(app);
</script>
</body>
</html>
實例二： 不會渲染出頁面，全部解析爲字符串輸出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板引擎不關心內容</title>
<script src="../node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
<script type="text/template" id="tql">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板引擎不關心內容</title>
</head>
<body>
<h1>{{msg}}</h1>
</body>
</html>
</script>
<script>
var app = template("tql",{
msg:"我是Node"
})
console.log(app);
</script>
</body>
</html>
二、Node中使用模板引擎
1、基本介紹
在node中使用art-template模板引擎，模板引擎最早就是誕生於 服務端領域 ，後來才發展到了前端
2、基本使用步驟
1、安裝：npm install art-template
2、加載：使用 require() 在需要使用的文件模塊中加載 art-template
3、使用：查文檔使用模板引擎的 API
//使用require方法加載，參數中的art-template就是下載的包的名字（install 的名字）
var template = require('art-template');
// template.render('模板字符串',替換對象)
var result = template.render('hello {{name}}',{
name:'node'
})
console.log(result);
3、服務端渲染
（1）對於服務端渲染來說，客戶端只請求了一次；對於客戶端渲染來說，客戶端請求了兩次（整個頁面需要刷新是服務端渲染）
（2）服務端渲染響應給給客戶端的就是最後的結果，客戶端不需要再做任何處理
（3）客戶端渲染不利於 SEO 搜索引擎優化，服務端渲染目的是爲了SEO 搜索引擎優化；服務端渲染是可以被爬蟲抓取的，而客戶端異步渲染是很難被爬蟲抓取的；客戶端異步渲染更快,可以局部刷新，用戶體驗更好
新手入門Node推薦先學習： 一篇文章讓你輕鬆上手Node
00.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板引擎不關心內容</title>
<script src="../node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
<p>我是服務端渲染</p>
<h4>hello {{msg}}</h4>
</body>
</html>
01.js：
//加載模塊
var fs = require('fs');
var http = require('http');
var template = require('art-template');
//使用http.createServer() 方法創建一個Web服務器
var server = http.createServer();
//註冊request請求事件設置回調處理函數
server.on('request',function(req,res) {
//讀取文件
fs.readFile('./00.html',function(error,data) {
var data = data.toString();
if(error) {
//設置編碼
res.setHeader('Content-Type','text/plain;charset=utf-8');
res.end('讀取文件失敗，請稍後重試');
}else {
//模板引擎
var result = template.render(data,{
msg:'node'
});
//渲染到頁面
res.end(result);
}
});
});
//綁定端口號，啓動服務器
server.listen('8080',function() {
console.log("服務器啓動成功，請訪問http://127.0.0.1:8080");
});
