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里使用Dom操作Xml
Jan 22 Javascript
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
写一个Vue Popup组件
Feb 25 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
详解package.json版本号规则
2019/08/01 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python下载网络小说实例代码
2018/02/03 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
pycharm的python_stubs问题
2020/04/08 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
yolov5返回坐标的方法实例
2022/03/17 Python