在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 相关文章推荐
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
学习Angularjs分页指令
Jul 01 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 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
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
React实现轮播效果
2020/08/25 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
python逆向入门教程
2018/01/15 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python多线程并发实例及其优化
2019/06/27 Python
实例详解Python装饰器与闭包
2019/07/29 Python
详解KMP算法以及python如何实现
2020/09/18 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
化工专业推荐信范文
2013/11/28 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
初中生物教学反思
2016/02/20 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书