express中static中间件的具体使用方法


Posted in Javascript onOctober 17, 2019

如果想要在输入url后直接访问服务端的静态文件,比如cssjs、文件等,就需要知道这些静态文件的定位,在express框架中express.static中间件函数可以帮助我们实现。

Staicexpress内置中间件函数,服务于静态文件,基于静态服务。Staic函数封装在serve-static模块当中,serve-static模块抛出的serveStatic就是static方法。

express中static中间件的具体使用方法

上面注释说明了方法的作用,大概是说该中间件函数为给定根目录的文件提供服务,要服务的文件将通过将req.url与提供的根目录相结合来确定。当找不到文件时,此模块将改为调用next()以转到下一个中间件。废话不多说,实际操作一下:

express中static中间件的具体使用方法

express中static中间件的具体使用方法

在浏览器地址栏输入http://127.0.0.1:8888/public/images/111.jpg发现可以访问到服务端静态图片。

express中static中间件的具体使用方法

中间件函数要服务的文件将通过将req.url与提供的根目录相结合来确定,也就是说http://127.0.0.1:8888/访问的就是中间件指定的目录。上图中http://127.0.0.1:8888/对应的是项目的根目录,所以在http://127.0.0.1:8888/后面加上public/images/111.jpg就可以访问到静态图片了。

如果要使用多个静态资源目录,请多次调用express.static中间件函数,Express以您使用express.static中间件函数设置静态目录的顺序来查找文件。要为express.static函数提供的文件创建虚拟路径前缀(路径并不实际存在于文件系统中,请为静态目录指定安装路径。

express中static中间件的具体使用方法

express中static中间件的具体使用方法

express中static中间件的具体使用方法

其中,/images/files是指定的虚拟目录,在服务端中实际是不存在的。

参考链接:https://3water.com/article/172167.htm

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

Javascript 相关文章推荐
form.submit()不能提交表单的原因分析
Oct 23 Javascript
java必学必会之static关键字
Dec 03 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
在Express中提供静态文件的实现方法
Oct 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
You might like
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
js电话号码验证方法
2015/09/28 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
node.js实现快速截图
2016/08/27 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
Python简单的制作图片验证码实例
2017/05/31 Python
python计算两个数的百分比方法
2018/06/29 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
python匿名函数的使用方法解析
2019/10/10 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
python3中数组逆序输出方法
2020/12/01 Python
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
麦当劳辞职信范文
2014/01/18 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js