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.ajax)
Nov 19 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
vue监听dom大小改变案例
Jul 29 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中文字母数字验证码实现代码
2008/04/25 PHP
php 面向对象的一个例子
2011/04/12 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
js 获取、清空input type="file"的值示例代码
2014/02/19 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
从0开始学Vue
2016/10/27 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
如何快速上手Vuex
2017/02/14 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
剖析Python的Twisted框架的核心特性
2016/05/25 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
硕士生工作推荐信
2014/03/07 职场文书
文化活动实施方案
2014/03/28 职场文书
升学宴主持词
2014/04/02 职场文书
春节请假条
2014/04/11 职场文书
村安全生产责任书
2014/08/25 职场文书
比较几种Redis集群方案
2021/06/21 Redis
Python软件包安装的三种常见方法
2022/07/07 Python