art-template視圖引擎express

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

相關文章
相關標籤/搜索