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 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
React组件生命周期详解
Jul 03 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
JS倒计时代码汇总
2014/11/25 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
python requests使用socks5的例子
2019/07/25 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
党员目标管理责任书
2014/07/25 职场文书
供电工程专业求职信
2014/08/09 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
六一儿童节活动总结
2014/08/27 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
python套接字socket通信
2022/04/01 Python
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python