在 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 相关文章推荐
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
详解原生js实现offset方法
Jun 15 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
Vuex入门到上手教程
Jun 20 Javascript
如何在JavaScript中正确处理变量
Dec 25 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
mysql+php分页类(已测)
2008/03/31 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
jquery tools之tooltip
2009/07/25 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
详解vue-cli官方脚手架配置
2018/07/20 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
python子线程退出及线程退出控制的代码
2019/10/16 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Python try except finally资源回收的实现
2021/01/25 Python
DNA测试:Orig3n
2019/03/01 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
后勤人员自我鉴定
2013/10/20 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
优良学风班总结材料
2014/02/08 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
大学入学感言
2015/08/01 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP