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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
jstree的简单实例
Dec 01 Javascript
树结构之JavaScript
Jan 24 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 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
星际玩家的三大定律
2020/03/04 星际争霸
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
web打印小结
2017/01/11 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
Python中的条件判断语句基础学习教程
2016/02/07 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
手把手教你python实现SVM算法
2017/12/27 Python
浅谈python标准库--functools.partial
2019/03/13 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
德国团购网站:Groupon德国
2018/03/13 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
用友笔试题目
2016/10/25 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
2014财务年度工作总结
2014/11/11 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js