Express
安裝
npm install --save art-template
npm install --save express-art-template
我們在使用時可能在文件中只引用express-art-template,但是我們也需要安裝art-template，因為express-art-template需要依賴art-template
Eample
在node文件內
var express = require('express');
var app = express();
// view engine setup，這是關鍵的代碼，第一個參數表示將使用模板引擎文件的后綴名，可以將art改為html,使用模板引擎的文件的后綴名也就需要是html
app.engine('art', require('express-art-template'));
//模板引擎的選項
app.set('view options', {
debug: process.env.NODE_ENV !== 'production'
});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'art');
// routes
app.get('/', function (req, res) {
res.render('index.art', {
//模板數據如下
user: {
name: 'aui',
tags: ['art', 'template', 'nodejs']
}
});
});
在express中，有一個render()方法，一般區情況下是不能用的，但是如果配合模板引擎，就可以使用render方法了。
用法：
render("文件名",{模板數據});
注意：第一個參數不能寫路徑，一般會默認去項目中的views文件夾下去找文件，這是Express的約定
2.
app.engine('art', require('express-art-template'));
這是關鍵的代碼，第一個參數表示將使用模板引擎文件的后綴名，可以將art改為html,使用模板引擎的文件的后綴名也就需要是html。我們使用art后綴的原因是為了是文件可以一眼看出它使用了模板引擎。
3.
如果想要修改默認路徑，不想要views
app.set('views', path.join(__dirname, 'views'));
修改上面路徑為你想要的文件夾路徑，但是不要修改第一個參數views。
4.
如果views目錄下的文件夾中有一個admin文件夾,admin文件夾中的文件使用模板引擎
app.get('/admin',function(req,res){
res.render('admin/page.html',{
//模板數據如下
title:"系統"
});
});
在index.html內
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
這是{{name}}的頁面
</body>
</html>
- 如果是希望實現循環，比如循環一個文章列表
json
"articles":[
{"id":1,"title":"test1","author":"ellenxx","date":"2019-1-1","content":"xxx"},
{"id":2,"title":"test2","author":"ellenxx","date":"2019-1-1","content":"xxx"},
{"id":3,"title":"test3","author":"ellenxx","date":"2019-1-1","content":"xxx"},
{"id":4,"title":"test4","author":"ellenxx","date":"2019-1-1","content":"xxx"},
{"id":5,"title":"test5","author":"ellenxx","date":"2019-1-1","content":"xxx"},
{"id":6,"title":"test6","author":"ellenxx","date":"2019-1-1","content":"xxx"},
{"id":7,"title":"test7","author":"ellenxx","date":"2019-1-1","content":"xxx"}
]
node
router.get('/',function(req,res){
fs.readFile('./db.json','utf8',function(err,data){
if(err){
return res.status(500).send('Server err');
}
res.render('index.html',{
fruits:["香蕉","蘋果","橘子"],
articles: typeof data=='string'?JSON.parse(data).articles:data.articles
});
})
html
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>標題</th>
<th>日期</th>
<th>作者</th>
</tr>
</thead>
<tbody> {{each articles}}
<tr>
<th>#</th>
<td>{{$value.id}}</td>
<td>{{$value.title}}</td>
<td>{{$value.date}}</td>
<td>{{$value.author}}</td>
</tr>{{/each}}
</tbody>
</table>