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 相关文章推荐
JS版元素周期表实现方法
Aug 05 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
微信小程序日历效果
Dec 29 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
swiper实现导航滚动效果
Dec 13 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
js实现动态时钟
2020/03/12 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
python分割文件的常用方法
2014/11/01 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
python 操作hive pyhs2方式
2019/12/21 Python
Pytorch中.new()的作用详解
2020/02/18 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
《三顾茅庐》教学反思
2014/04/10 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP