Node.JS中Express模板的应用是什么,有哪些要点
Admin 2022-08-17 群英技术资讯 453 次浏览
Express支持许多模板引擎,常用的有:
视图的文件名默认需遵循“<name>.<engine>”的形式,这里<engine>是要被加载的模块的 名字。比如视图layout.ejs就是在告诉视图系统要require(‘ejs’),被加载的模块必须输出exports.compile(str, options)方法,并要返回一个函数来遵守Express的模板接口约定。我们也可以使用app.register()来映射模板引擎到其它文件扩展 名,从而实现更灵活的模板引擎行为,如此一来就可以实现“csser.html”可以被ejs引擎所渲染。
下面我们将用Jade引擎来渲染index.html,因为我们没有设置layout:false,index.jade渲染后的内容将被作为body本地变量传入layout.jade。
app.get('/', function(req, res){ res.render('index.jade', { title: 'CSSer, 关注Web前端技术!' }); });
新增的“view engine”设置可以指定默认模板引擎,如果我们想使用jade可以这样设置:
app.set('view engine', 'jade');
于是我们就可以通过下面的方式:
res.render('index');
代替如下方式:
res.render('index.jade');
当“view engine”设置后,模板的扩展名就成了可选项,同时我们还可以混合匹配多模板引擎:
res.render('another-page.ejs');
Express同时提供了视图选项设置,这些设置会在每次视图渲染后应用,比如你并不经常使用layouts,就可以这样设置:
app.set('view options', { layout: false });
如果需要,这些设置可以在后续的res.render()调用中被覆盖:
res.render('csser-view.ejs', { layout: true });
可以通过指定一个路径的方式来实现用自己的layout来代替系统默认的,比如如果我们将“view engine”设置为jade并且自定义了一个名为“./views/mylayout.jade”的layout,我们可以这样使用它:
res.render('page', { layout: 'mylayout' });
否则必须指定扩展名:
res.render('page', { layout: 'mylayout.jade' });
这些路径也可以是绝对路径:
res.render('page', { layout: __dirname + '/http://www.cnblogs.com/mylayout.jade' });
这方面较好的例子就是自定义ejs模板的开始和关闭的标记:
app.set('view options', { open: '{{', close: '}}' });
Express视图系统原生支持局部和集合视图,这称作微型视图,主要用于渲染一个文档片段。比如与其在视图中循环显示评论,不如使用局部集合(partial collection):
partial('comment', { collection: comments });
如果不需要其它选项或本地变量,我们可以省略对象而简单的传入评论数组,这和上面的示例是一样的:
partial('comment', comments);
当使用局部集合时,支持一些“魔术”本地变量:
Local variables passed (or generated) take precedence, however locals passed to the parent view are available in the child view as well. So for example if we were to render a blog post with partial(‘blog/post’, post) it would generate the post local, but the view calling this function had the local user, it would be available to the blog/post view as well.
传入(或生成)的本地变量优先,但传入父视图的本地变量在子视图仍有效。因此如果我们用partial(‘blog/post’, post)来渲染博客日志时,将生成post的本地变量,但调用本函数的视图拥有本地用户,它在blog/post视图依然有效。(一回注:这段翻译感觉 有问题,请高人指点)。
性能提示:当使用局部集合渲染100长度的数组就意味着需要渲染100次视图,对于简单的集合你可以将循环内联,而不要使用局部集合,这样可以减少系统开销。
视图查找是相对于父视图进行的,比如我们有一个名为“views/user/list.jade”的页面视图,如果在该视图中调用 partial(‘edit’),视图系统将会尝试查找并加载“views/user/edit.jade”,而partial(‘.. /messages’)将加载“views/messages.jade”。
视图系统还支持索引模板,这样你就可以使用一个同名的目录。比如,在一个路由中我们执行res.render(‘users’),这将指向“views/users.jade”或者“views/users/index.jade”。
当使用上面的索引视图时,我们可以通过partial(‘users’)从同名目录下引用“views/users/index.jade”,同时视图系统会尝试“../users/index”,这能减少我们调用partial(‘index’)的需要。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
用JS怎样写个表单复选框,代码是什么?本篇文章来给大家分享一篇关于Javscript表单复选框详细介绍,小编觉得挺实用的,对大家学习或工作或许有帮助,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
vue中的过滤器分为两种:局部过滤器和全局过滤器。过滤器可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示(官方文档)
从浏览器控制台到运行 Node.js的终端,我们到处都会看到错误。本文的重点是概述我们在js开发过程中可能遇到的错误类型。
微信小程序实现上传视频功能 本文实例为大家分享了微信小程序上传视频,供大家参考,具体内容如下 微信开发者工具需要安装ffmpeg环境才能正常使用下面的官方方法. 1.调用官方提供的方法(wx.chooseMedia) choosevideo(){ let that=this console.log("上传视频的方法") wx.chooseMedia({ count: 1, //上传视频的个数 mediaType:['video'], //限制上传的类型 ...
这篇文章主要为大家介绍了前端跨域浏览器设置解决前端跨域问题的方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008