在 Express 中使用模板引擎


Posted in Javascript onDecember 10, 2015

需要在应用中进行如下设置才能让 Express 渲染模板文件:

views, 放模板文件的目录,比如: app.set('views', './views')
view engine, 模板引擎,比如: app.set('view engine', 'jade')

然后安装相应的模板引擎 npm 软件包。

$ npm install jade --save

和 Express 兼容的模板引擎,比如 Jade,通过 res.render() 调用其导出方法 __express(filePath, options, callback) 渲染模板。

有一些模板引擎不遵循这种约定,Consolidate.js 能将 Node 中所有流行的模板引擎映射为这种约定,这样就可以和 Express 无缝衔接。

一旦 view engine 设置成功,就不需要显式指定引擎,或者在应用中加载模板引擎模块,Express 已经在内部加载,如下所示。

app.set('view engine', 'jade');

在 views 目录下生成名为 index.jade 的 Jade 模板文件,内容如下:

html
 head
  title!= title
 body
  h1!= message

然后创建一个路由渲染 index.jade 文件。如果没有设置 view engine,您需要指明视图文件的后缀,否则就会遗漏它。

app.get('/', function (req, res) {
 res.render('index', { title: 'Hey', message: 'Hello there!'});
});

此时向主页发送请求,“index.jade” 会被渲染为 HTML。

Javascript 相关文章推荐
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 #Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 #Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 #Javascript
详解AngularJS中module模块的导入导出
Dec 10 #Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 #Javascript
Spring mvc 接收json对象
Dec 10 #Javascript
SpringMVC返回json数据的三种方式
Dec 10 #Javascript
You might like
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
降低PHP Redis内存占用
2017/03/23 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
angular之ng-template模板加载
2017/11/09 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
Python函数中定义参数的四种方式
2014/11/30 Python
详解Django框架中的视图级缓存
2015/07/23 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
详解Python实现进度条的4种方式
2020/01/15 Python
python re.match()用法相关示例
2021/01/27 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
送给程序员的20个Java集合面试问题
2014/08/06 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
单位在职证明书
2014/09/11 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
警示教育观后感
2015/06/17 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS