art-template视图引擎express

Posted 2020-08-05

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