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 相关文章推荐
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
canvas绘制多边形
Feb 24 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
使用js和canvas实现时钟效果
Sep 08 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基础学习笔记
2007/03/18 PHP
PHPThumb图片处理实例
2014/05/03 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
Python实现删除文件但保留指定文件
2015/06/21 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python实现注册登录系统
2017/08/08 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
HTML5标签大全
2016/11/23 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
3个CCIE对一个工程师的面试题
2012/05/06 面试题
优秀大学生推荐信范文
2013/11/28 职场文书
青年文明号事迹材料
2014/01/18 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
员工开除通知书
2015/04/25 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
Apache自带的ab压力测试工具的实现
2022/07/23 Servers