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笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
extjs render 用法介绍
Sep 11 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
vue中v-model对select的绑定操作
Aug 31 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
利用python画一颗心的方法示例
2017/01/31 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
django中forms组件的使用与注意
2019/07/08 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
python中添加模块导入路径的方法
2021/02/03 Python
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
信息技术课后反思
2014/04/27 职场文书
阅兵口号
2014/06/19 职场文书
个人安全生产责任书
2014/07/28 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
政府四风问题整改措施
2014/10/04 职场文书
工作自我评价范文
2019/03/21 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
Hive常用日期格式转换语法
2022/06/25 数据库