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的Select选择框的华丽变身
Aug 23 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 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 第二节 数据类型之字符串类型
2012/04/28 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
谈谈Python中的while循环语句
2019/03/10 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
先进班组材料范文
2014/12/25 职场文书
综合素质评价自我评价
2015/03/06 职场文书
护理专业自我评价
2015/03/11 职场文书