在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 相关文章推荐
js tab效果的实现代码
Dec 26 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 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
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
python机器学习之KNN分类算法
2018/08/29 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
优秀英语专业毕业生求职信
2013/11/23 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
运动会100米加油稿
2015/07/21 职场文书