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 相关文章推荐
js 去除字符串第一位逗号的方法
Jun 07 Javascript
Angular实现form自动布局
Jan 28 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
vue项目中微信登录的实现操作
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
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
Vue如何实现响应式系统
2018/07/11 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
列举Python中吸引人的一些特性
2015/04/09 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Python内存管理实例分析
2019/07/10 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
企业法人代表授权委托书
2014/10/02 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
Python 全局空间和局部空间
2022/04/06 Python
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript