Express使用html模板的详细代码


Posted in Javascript onSeptember 18, 2017

express默认使用jade模板,可以配置让其支持使用ejs或html模板。

1. 安装ejs

在项目根目录安装ejs.

npm install ejs

2、引入ejs

var ejs = require('ejs'); //我是新引入的ejs插件

3、设置html引擎

app.engine('html', ejs.__express);

设置视图引擎

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

保存后重启服务,即可访问html文件。

注:在express搭建的服务器中,html引擎没有被配置,直接添加即可;视图引擎已配置,修改配置即可。

-------------------------------------------------------------------------------------

修改的这些设置做了什么操作?

为什么修改了视图引擎还要增加设置html引擎?

我们先看一下.engine()这个方法。

app.engine(ext, callback);

Express默认使用jade模板。如果你尝试加载 "foo.jade" 文件,Express内部会调用如下操作。

app.engine('jade', require('jade').__express);

如果要使用其他模板引擎,如:将EJS模板映射至".html"文件:

app.engine('html', require('ejs').__express);

这行代码中,实际调用了EJS的.renderFile()方法,ejs.__express是该方法在EJS内部的另一个名字。

因为加载的模板引擎后调用的是同一个方法.__express,所以如果使用的是ejs模板,不用配置该项。

总结:使用html模板,需增加  app.engine('html', require('ejs').__express);

使用EJS模板,不用配置该项。

此时如果在views文件夹里创建index.html文件或index.ejs文件,访问的仍然是默认的index.jade文件。这是为什么呢?这里要说的就是上面提到的第二项设置app.set('view engine', 'html');

app.set(name, value);

在.set()方法的参数中,有一项是'view engine',表示没有指定文件模板格式时,默认使用的引擎插件。如果这里设置为html文件,设置路由指定文件时,只需写文件名,就会找对应的html文件。于此,脑洞大开,试了一下在views中创建3个文件test.jade、test.ejs、test.html。路由设置如下。访问正常!每个路由都指向对应的文件。当然这种写法是完全不被建议也不符合现实的。

router.get('/test/',function(req, res, next){
 res.render('test', {title: 'HTML'});
});

router.get('/test1/',function(req, res, next){
 res.render('test.ejs', {title: 'EJS'});
});

router.get('/test2/',function(req, res, next){
 res.render('test.jade', {title: 'jade});
});

官方API:http://www.expressjs.com.cn/4x/api.html#app.engine

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
VueJS全面解析
Nov 10 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
JS如何生成随机验证码
Mar 02 Javascript
Mongoose中document与object的区别示例详解
Sep 18 #Javascript
新手vue构建单页面应用实例代码
Sep 18 #Javascript
angularjs路由传值$routeParams详解
Sep 05 #Javascript
vue-ajax小封装实例
Sep 18 #Javascript
信息滚动效果的实例讲解
Sep 18 #Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 #Javascript
angularjs实现猜数字大小功能
May 20 #Javascript
You might like
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
vue+iview实现分页及查询功能
2020/11/17 Vue.js
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
python_mask_array的用法
2020/02/18 Python
使用python实现多维数据降维操作
2020/02/24 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Python和Bash结合在一起的方法
2020/11/13 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
MYSQL支持事务吗
2013/08/09 面试题
实习自我鉴定模板
2013/09/28 职场文书
教师自我评价范文
2013/12/16 职场文书
卫生安全检查制度
2014/02/04 职场文书
2015年班组工作总结
2015/04/20 职场文书
小学运动会通讯稿
2015/07/18 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
vue中div禁止点击事件的实现
2022/04/02 Vue.js