在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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 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+MySQL的聊天室设计
2006/10/09 PHP
输出控制类
2006/10/09 PHP
一个数据采集类
2007/02/14 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
js停止输出代码
2008/07/20 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
Python 3.x 新特性及10大变化
2015/06/12 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Django实现celery定时任务过程解析
2020/04/21 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
Python如何重新加载模块
2020/07/29 Python
Python map及filter函数使用方法解析
2020/08/06 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
Python项目打包成二进制的方法
2020/12/30 Python
Python中如何定义一个函数
2016/09/06 面试题
区域总监的岗位职责
2013/11/21 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
创先争优标语
2014/06/27 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
Python中的 No Module named ***问题及解决
2022/07/23 Python