Express 配置HTML页面访问
2024-08-23 19:18:28
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>
最新文章
- 【Codeforces720D】Slalom 线段树 + 扫描线 (优化DP)
- Web应用数据库配置参数读取方法之一
- C#并行编程-Parallel
- Java中的4种代码块
- [转]Eclipse Java注释模板设置详解
- Android 测试Service的生命周期
- SDC文件模版
- android学习笔记二
- 如何利用 Bootstrap 进行快速 Web 开发
- 使用javassist运行时动态重新加载java类及其他替换选择
- Go中链路层套接字的实践
- mysql原生sql盘点
- android Studio 出现:Unable to resolve dependency for &#39;:app@debug/compileClasspath&#39;
- webpack对多个模块依赖进行打包
- 大型运输行业实战_day12_1_权限管理实现
- controlfile作为RMAN的repository时,对 keep time 的测试
- [svc]traceroute(udp+icmp)&;tracert(icmp)原理
- SVN - 简单使用手册
- Android L开发指南
- 机器学习之路:python 集成分类器 随机森林分类RandomForestClassifier 梯度提升决策树分类GradientBoostingClassifier 预测泰坦尼克号幸存者
热门文章
- Apollo系列(二):Apollo在ASP.NET Core 3.1中使用
- 对之前IoT项目的完善
- Python-求序列长度和序列长度协议-len() __len__
- Geography&#39;s sum up
- Python之路——变量
- abp(net core)+easyui+efcore实现仓储管理系统——出库管理之二(五十)
- 2016年 实验三 B2C模拟实验
- 多测师_肖sir _python 练习题(一)100以内奇数,偶数,质数胡计算
- 【故障公告】博客系统升级到 .NET 5.0 引发的故障
- pytest文档53-命令行实时输出错误信息(pytest-instafail)