在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入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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
3.从实例开始
2006/10/09 PHP
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
php简单判断文本编码的方法
2015/07/30 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
使用PDB简单调试Python程序简明指南
2015/04/25 Python
Python多线程爬虫简单示例
2016/03/04 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
Python数学形态学实例分析
2019/09/06 Python
python装饰器使用实例详解
2019/12/14 Python
python怎么删除缓存文件
2020/07/19 Python
python关于倒排列的知识点总结
2020/10/13 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
工作迟到检讨书
2014/02/21 职场文书
小学毕业感言500字
2014/02/28 职场文书
临床医师个人自我评价
2014/04/06 职场文书
工程造价专业求职信
2014/07/17 职场文书
施工安全保证书
2015/05/09 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏