Express 配置HTML页面访问的实现


Posted in Javascript onNovember 01, 2020

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页面访问内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
vue+echarts实现多条折线图
Mar 21 Vue.js
ant design vue 表格table 默认勾选几项的操作
Oct 31 #Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 #Javascript
Ant design vue中的联动选择取消操作
Oct 31 #Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 #Javascript
vue中可编辑树状表格的实现代码
Oct 31 #Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 #Javascript
react ant Design手动设置表单的值操作
Oct 31 #Javascript
You might like
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
使用js画图之饼图
2015/01/12 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
机器学习python实战之决策树
2017/11/01 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
python中metaclass原理与用法详解
2019/06/25 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
Python3 合并二叉树的实现
2019/09/30 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Python高级property属性用法实例分析
2019/11/19 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
python能开发游戏吗
2020/06/11 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
创意活动策划书
2014/01/15 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL