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动画animate方法使用介绍
May 06 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
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加密扩展库Mcrypt安装和实例
2013/11/10 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
javascript中的new使用
2010/03/20 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python中的列表与元组的使用
2019/08/08 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
应届生护士求职信
2013/11/01 职场文书
财务管理个人自荐书范文
2013/11/24 职场文书
银行贷款承诺书
2014/03/29 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
手残删除python之后的补救方法
2021/06/26 Python
PHP实现两种排课方式
2021/06/26 PHP