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

时间: 2024-11-09 00:31:56

art-template视图引擎express的相关文章

art template前端模板引擎

偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template('detail', {data: data.data, shstatus: status}); artDialog({ content: '<div id="vorder_detail">' + html + '</div>', lock: true, fixed:

【Node.js】一、搭建基于Express框架运行环境+更换HTML视图引擎

  1)安装express generator生成器 这个express generator生成器类似于vue-cli脚手架工具,用来创建一个后端项目,首先我们要对生成器进行全局安装,在cmd中输入下面命令: npm install -g express-generator 是否安装express generator生成器成功?在命令行工具直接输入一下命令,查看生成器版本 express --version 2)通过生成器自动创建server项目 安装完express generator生成器之

ASP.NET Razor 视图引擎编程参考

ASP.NET Razor 视图引擎编程参考 转载请注明出处:http://surfsky.cnblogs.com Rasor 视图引擎    http://msdn.microsoft.com/zh-cn/library/ff849693.aspx    http://www.microsoft.com/downloads/en/details.aspx?FamilyID=b7937c34-3b53-47b7-ae17-5a72fa700472&displaylang=en    http:/

MVC视图引擎

1.视图引擎:把视图解析成浏览器可执行的html代码 2.aspx视图: <%=表达式%>: <% C#代码段 %>: 3.razor视图: @(表达式):@ViewData["name"],如果@后跟常量,必须用括号括起来:@(“hello”) @{C#代码段}:@{ if(a>b) { return true; } } 引入命名空间:@using System.IO 双@符号转义,输出@:<span>[email protected]@qq

ASP.Net MVC开发基础学习笔记(3):Razor视图引擎、控制器与路由机制学习

首页 头条 文章 频道                         设计频道 Web前端 Python开发 Java技术 Android应用 iOS应用 资源 小组 相亲 频道 首页 头条 文章 小组 相亲 资源 设计 前端 Python Java 安卓 iOS 登录 注册 首页 最新文章 经典回顾 开发 Web前端 Python Android iOS Java C/C++ PHP .NET Ruby Go 设计 UI设计 网页设计 交互设计 用户体验 设计教程 设计职场 极客 IT技术

Razor 视图引擎 &ndash; ASP.NET MVC 4 系列

       Razor 视图引擎是 ASP.NET MVC 3 开始扩展的内容,并且也是默认视图引擎.        Razor 通过理解标记的结构来实现代码和标记之间尽可能顺畅的转换.下面的例子演示了一个包含少量视图逻辑的简单 Razor 视图: @{ // this is a block of code. For demonstration purposes, // we'll create a "model" inline. var items = new string[] {

ASP.NET的另一个视图引擎——Razor

 一.什么是Razor? 要是你知道什么是ASPX,那我就告诉你:Razor是和ASPX 一样的另一种视图引擎.说到视图就明白了很多吧.既然都为视图引擎,都是MS的东西,两个视图引擎,一前一后,肯定有区别.那么接下来让我们来认识一下Razor吧. 首先,Razor是作为一种后起的视图模板被ASP.NET MVC3使用. 这就暴露了Razor的一个重要信息:界面设计灵活,比aspx视图引擎更专注于WEB前端页面的设计.因为MVC就是基于WEB开发所诞生的一个设计模式,主旨之一就是将页面和业务逻辑解

MVC Razor视图引擎

Razor 不是编程语言.它是服务器端标记语言. Razor 是一种允许您向网页中嵌入基于服务器的代码(Visual Basic 和 C#)的标记语法 当网页被写入浏览器时,基于服务器的代码能够创建动态内容.在网页加载时,服务器在向浏览器返回页面之前,会执行页面内的基于服务器代码.由于是在服务器上运行,这种代码能执行复杂的任务,比如访问数据库. Razor在减少代码冗余.增强代码可读性和VS智能感知方面,都有着突出的优势. Razor一经推出就深受所有ASP.Net开发者的喜爱. Razor 使

ASP.NET MVC 对于视图引擎的优化

我经常使用asp.net MVC框架来做网站.总的来说,MVC框架是一个非常优秀的框架.相对于曾经的web form模式,我个人感觉分工更加合理思路也更加清晰,但是交给开发人员的工作也相对变多了. 当使用标准配置的时候在新建了控制器,还没有建视图的时候,运行网站,访问这个我们可以看到 因此我们可以判断,默认的视图引擎首先加载的顺序如上图所示 ~/Views/Home/Index.aspx~/Views/Home/Index.ascx~/Views/Shared/Index.aspx~/Views