Express 配置HTML页面访问的实现
更新时间：2020年11月01日 08:49:20 作者：Kindear
这篇文章主要介绍了Express 配置HTML页面访问的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
1.配置模板引擎
Express默认的模板引擎是pug（jade），想要渲染html页面必须要导入对应的模板引擎ejs
npm install ejs
安装完成在app.js文件中完成模板引擎的引入
var ejs = require('ejs');
// 配置Express 视图引擎
app.engine('html', ejs.__express);
app.set('view engine', 'html');
2.配置页面路由
如果页面不是放在public目录下，那么就必须要通过配置路由来进行访问。
假设我的文件目录如下
|-views(在根目录下) |--mplat |---pages |----console.html |---index.html
在app.js中配置全局变量
// 配置 mplat 渲染页面
app.set('mplat',path.join(__dirname,'views/mplat'))
这样子在别处使用的mplat等同于path.join(__dirname,'views/mplat')
在routers目录下新建mplat.js，把两个html文件加入映射
var express = require('express');
var router = express.Router();
/* GET mplat page. */
router.get('/', function(req, res, next) {
res.render('mplat/index.html', { title: 'DisCloudDisk' });
});
router.get('/console',function (req,res,next) {
res.render('mplat/pages/console.html', { title: 'Console' });
})
module.exports = router;
在app.js中引入文件路由
app.use('/mplat',require('./routes/mplat'));
这样子配置完成后，只需要访问 http://$host/mplat即可返回index.html
3.修改静态文件引入
在app.js中定义静态文件目录
app.use(express.static(path.join(__dirname, 'public')));
在页面引入css和js文件只需要默认在前面加上public即可，写法如下
<script src="/lib/layui/layui.js"></script>
实际目录为public/lib/layui/layui.js
4.页面路由
html页面的跳转也有变化，需要在路由中注册对应的界面，比如我在index访问console，路径和在路由中注册的保持一致。
<iframe src="/mplat/console" frameborder="0" scrolling="yes" width="100%"
height="100%"></iframe>
到此这篇关于Express 配置HTML页面访问的实现的文章就介绍到这了,更多相关Express HTML页面访问内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了node.js从数据库获取数据的具体代码，nodejs可以获取具体某张数据表信息，感兴趣的朋友可以参考一下2016-05-05
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
这篇文章主要给大家介绍了关于利用node.js+mongodb如何搭建一个简单登录注册功能的相关资料，文中通过示例代码介绍非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
Egret框架是一个基于MIT开源协议许可的永久免费的项目！你可以在项目中随意使用且修改它，并且拥有100%的控制权。你可以从Egret的Github网站获取它的源代码，从而了解和学习它的核心细节。Egret具有完善的文档，并且易于上手学习，可以让你更容易专注于游戏本身的开发2014-09-09
node.js同步/异步文件读写-fs，Stream文件流操作实例详解
这篇文章主要介绍了node.js同步/异步文件读写-fs，Stream文件流操作,结合实例形式详细分析了node.js针对文件的同步/异步读写与文件流相关操作技巧,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Node.js fs模块原理及常见用途,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
这篇文章主要介绍了nvm、nrm、npm 安装和使用详解(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了手把手教你实现 Promise的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要给大家介绍了关于node上redis调用优化的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-10-10
这篇文章主要介绍了使用upstart把nodejs应用封装为系统服务实例,需要的朋友可以参考下2014-06-06
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
这篇文章主要介绍了AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录,需要的朋友可以参考下2015-01-01
最新评论