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 html