在Express中提供静态文件的实现方法


Posted in Javascript onOctober 17, 2019

为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件,请使用 Express 中的 express.static 内置中间件函数。

将包含静态资源的目录的名称传递给 express.static 中间件函数,以便开始直接提供这些文件。例如,使用以下代码在名为 public 的目录中提供图像、CSS 文件和 JavaScript 文件:

app.use(express.static('public'));

现在,可以访问位于 public 目录中的文件:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

Express 相对于静态目录查找文件,因此静态目录的名称不是此 URL 的一部分。

要使用多个静态资源目录,请多次调用 express.static 中间件函数:

app.use(express.static('public'));
app.use(express.static('files'));

Express 以您使用 express.static 中间件函数设置静态目录的顺序来查找文件。

要为 express.static 函数提供的文件创建虚拟路径前缀(路径并不实际存在于文件系统中),请为静态目录指定安装路径,如下所示:

app.use('/static', express.static('public'));

现在,可以访问具有 /static 路径前缀的 public 目录中的文件。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

然而,向 express.static 函数提供的路径相对于您在其中启动 node 进程的目录。如果从另一个目录运行 Express 应用程序,那么对于提供资源的目录使用绝对路径会更安全:

app.use('/static', express.static(__dirname + '/public'));

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
js实现弹窗效果
Aug 09 Javascript
原生js实现购物车功能
Sep 23 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
微信小程序一周时间表功能实现
Oct 17 #Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 #Javascript
JS工厂模式开发实践案例分析
Oct 17 #Javascript
小程序input数据双向绑定实现方法
Oct 17 #Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 #Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 #Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 #Javascript
You might like
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
会计与审计专业大专生求职信
2013/10/03 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
求职自荐信怎么写
2014/03/06 职场文书
公司回复函格式
2015/07/14 职场文书
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis