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"}}
时间: 2024-11-09 00:31:56