脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → Express HTML页面访问

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页面访问内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 关于commander.js使用及源码分析

    关于commander.js使用及源码分析

    这篇文章主要介绍了关于commander.js使用及源码分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • node.js中的path.join方法使用说明

    node.js中的path.join方法使用说明

    这篇文章主要介绍了node.js中的path.join方法使用说明,本文介绍了path.join的方法说明、语法、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • Node.js爬虫如何获取天气和每日问候详解

    Node.js爬虫如何获取天气和每日问候详解

    这篇文章主要给大家介绍了关于Node.js爬虫如何获取天气和每日问候的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Node.js爬虫具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-08-08
  • 使用node.js实现接口步骤详细记录

    使用node.js实现接口步骤详细记录

    这篇文章主要给大家介绍了关于使用node.js实现接口步骤的相关资料,对于刚开始不会node写接口和调用接口,可以通过这个清晰的初步了解到整个过程,下面需要的朋友可以参考下
    2023-03-03
  • express 项目分层实践详解

    express 项目分层实践详解

    这篇文章主要介绍了express 项目分层实践详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • node.js连接mongoose数据库方法详解

    node.js连接mongoose数据库方法详解

    之前我们都是通过shell来完成对数据库的各种操作的，在开发中大部分时候我们都需要通过程序来完成对数据库的操作。而Mongoose就是一个让我们可以通过Node来操作MongoDB的模块
    2022-08-08
  • Nodejs中的计时器(setTimeout setIntervals etImmediate)使用案例解析

    Nodejs中的计时器(setTimeout setIntervals etImmediate)使用案例解析

    这篇文章主要介绍了Nodejs中的计时器(setTimeout setIntervals etImmediate)使用案例解析,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • nodejs微信扫码支付功能实现

    nodejs微信扫码支付功能实现

    本片文章通过代码示例给大家详细讲述了如何用nodejs写出微信扫码支付这个功能，有兴趣的朋友可以参考下。
    2018-02-02
  • nodejs实现发出蜂鸣声音(系统报警声)的方法

    nodejs实现发出蜂鸣声音(系统报警声)的方法

    这篇文章主要介绍了nodejs实现发出蜂鸣声音(系统报警声)的方法,结合实例形式分析了nodejs发出蜂鸣声的原理及具体应用方法,需要的朋友可以参考下
    2017-01-01
  • npm 常用命令详解(小结)

    npm 常用命令详解(小结)

    这篇文章主要介绍了npm 常用命令详解(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论