node——express-art-template使用方法

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>