在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插件开发 对话框插件开发
Apr 26 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
原生js实现随机点名功能
Nov 05 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网页后退不再出现过期
2007/03/08 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
简略的前端架构心得&&基于editor为例子的编码小技巧
2010/11/25 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
Python基于PycURL实现POST的方法
2015/07/25 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Python输出指定字符串的方法
2020/02/06 Python
python开发前景如何
2020/06/11 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
python与js主要区别点总结
2020/09/13 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
婚前协议书范本两则
2014/10/16 职场文书
2014年测量员工作总结
2014/12/12 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书