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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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
一个odbc连mssql分页的类
2006/10/09 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
动手学习无线电
2021/03/10 无线电
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
python之Socket网络编程详解
2016/09/29 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
python中time tzset()函数实例用法
2021/02/18 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
大学优秀班集体申报材料
2014/05/23 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
好人好事演讲稿
2014/09/01 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
Python基础之数据结构详解
2021/04/28 Python