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 相关文章推荐
JavaScript confirm选择判断
Oct 18 Javascript
web前端开发也需要日志
Dec 09 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
JS实现导航栏楼层特效
Jan 01 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 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
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
js a标签点击事件
2017/03/30 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
Jquery动态列功能完整实例
2019/08/30 jQuery
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
Python异常学习笔记
2015/02/03 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
小学生元旦感言
2014/02/26 职场文书
党员教师工作决心书
2014/03/13 职场文书
调解协议书
2014/04/16 职场文书
新店开张活动方案
2014/08/24 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL