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中实现暂停的几篇文章
Mar 04 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
Layui Form 自定义验证的实例代码
Sep 14 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 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写的小东西
2006/12/06 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
浅谈django中的认证与登录
2016/10/31 Python
Django中的Signal代码详解
2018/02/05 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
聚美优品广告词改编
2014/03/14 职场文书
婚假请假条怎么写
2014/04/10 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
入党介绍人意见2015
2015/06/01 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android