在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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
求得div 下 img的src地址的js代码
Feb 28 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
vue中的计算属性和侦听属性
Nov 06 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输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
PHP实现搜索相似图片
2015/09/22 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
python并发和异步编程实例
2018/11/15 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
python实现处理mysql结果输出方式
2020/04/09 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
加拿大时装零售商:Influence U
2018/12/22 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
介绍信模板
2015/01/31 职场文书
2015大一新生军训感言
2015/08/01 职场文书
JavaScript函数柯里化
2021/11/07 Javascript
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS