const exp = require('express'),
template = require('art-template'),
app = exp()
// 禁用模板缓存,修改模板立即生效// 在正式产品中不要禁用,仅在开发时可以使用
template.config('cache', false)
// 指定.html使用的解析引擎
app.engine('.html', template.__express)
// 指定使用html视图引擎
app.set('view engine', 'html')
app.get('/', (req, res) => {
// 使用模板引擎可以将服务端的静态页面变成动态页面!
// 静态页面:服务端只保存此页面,不会修改它,浏览器需要时直接下载
// 动态页面:服务端通过程序(模板引擎)根据数据生成的页面
var html = template('template', {title: '服务端模板数据',books: [{ name: '重构-改善既有代码的设计'},{name: '大话设计模式'}]})//给模版传入对象属性
res.end(html)
//发送模版
注'template'==template.html
})
推荐以下面方法发送视图模版
res.render("index", {
user: req.cookies.petname,
data: questions
});
模版定义方法
template.helper('formatIP',function (ip) {
if(ip.startsWith('::1')){
return '127.0.0.1'
}
if(ip.startsWith('::ffff:')){
return ip.substr(7)
}
return ip
})
模版放在工作目录下的一个views文件夹中。.html文件
{{include "./shared/header"}}//导入头
<div class="container questions">
<!--需要实现getTime\formatTime这个模版-->
{{each data as q i}}
<div class="media" question="{{q.time|getTime}}">
<div class="media-left">
<a>
<img class="media-object" src="/uploads/{{q.petname}}.jpg" onerror="this.src=\'/images/user.png\'">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{q.petname}}</h4>
{{q.content}}
<div class="media-footing">
{{q.time | formatTime}} @ {{q.ip | formatIP}}
</div>
</div>
</div>
{{each q.answers as a i}}
<div class="media media-child">
<div class="media-body">
<h4 class="media-heading">{{a.petname}}</h4>
{{a.content}}
<div class="media-footing">
{{a.time | formatTime}} @ {{a.ip | formatIP}}
</div>
</div>
<div class="media-right">
<a>
<img class="media-object" src="/uploads/{{a.petname}}.jpg" onerror="this.src=\'/images/user.png\'">
</a>
</div>
</div>
{{/each}} {{/each}}
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="scripts/index.js"></script>
{{include "./shared/footer"}}
model