在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 相关文章推荐
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
送你43道JS面试题(收藏)
Jun 17 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
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
js实现的复制兼容chrome和IE
2014/04/03 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Django中url的反向查询的方法
2018/03/14 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
python读取文件名并改名字的实例
2019/01/07 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
python如何代码集体右移
2020/07/20 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
费用会计岗位职责
2014/01/01 职场文书
取保候审保证书
2014/04/30 职场文书
学风建设主题班会
2015/08/17 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
MySQL的索引你了解吗
2022/03/13 MySQL
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android