在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 相关文章推荐
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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和ACCESS写聊天室(二)
2006/10/09 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
pandas如何处理缺失值
2019/07/31 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
厨房领班竞聘演讲稿
2014/04/23 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
党校党性分析材料
2014/12/19 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python