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 相关文章推荐
JavaScript中Math对象使用说明
Jan 16 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
three.js实现圆柱体
Dec 30 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
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
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php读取3389的脚本
2014/05/06 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
python脚本开机自启的实现方法
2019/06/28 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
利用python 下载bilibili视频
2020/11/13 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
环境科学专业个人求职的自我评价
2013/11/28 职场文书
航班延误投诉信
2015/07/02 职场文书
团结主题班会
2015/08/13 职场文书
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android