在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 相关文章推荐
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 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共享内存段示例分享
2014/01/20 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
新鲜出炉的js tips提示效果
2011/04/03 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
详解Js中的模块化是如何实现的
2017/10/18 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
房产公证委托书范本
2014/09/20 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
人事局接收函
2015/01/30 职场文书
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python