Express之托管静态文件的方法


Posted in Javascript onJune 01, 2018

中间件express.static

我们使用express初始化一个目录的时候,会在app.js中看到一大推的app.use。

其中一个主要的中间件是express.static(4.0版本依旧保留的中间件)

var express = require('express');
var app = express();

app.use('/static',express.static('public'));

通过express.static可以帮助我们托管静态文件,js,css,img等。

express.static使用

基本使用

项目目录下的public下面有css,js,img等文件夹。

我这么需要通过express托管他们,以便我们启动服务器的时候可以访问到这些数据。

在app.js中添加

var express = require('express');
var app = express();

app.use(express.static('public'));

我们就可以通过

http://localhost:3000/css/style.css
http://localhost:3000/js/style.js
http://localhost:3000/img/style.png

注意:所有文件的路径都是相对于存放目录的,因此,存放静态文件的目录名不会出现在 url 中。

虚拟目录

为静态资源目录指定一个挂载路径的方式来实现。

我们可以给我们的静态文件添加虚拟目录,这样有时候方便我们统一管理我们的url,也一目了然地看出资源的属性。

var express = require('express');
var app = express();

app.use('static',express.static('public'));

访问:

http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/style.js
http://localhost:3000/static/img/style.png

注意:这里我们添加了虚拟目录,所以我们的url中必须带上这个目录才能访问的到。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS面向对象编程 for Cookie
Sep 19 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
JSONObject使用方法详解
Dec 17 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 #Javascript
详解Angular操作cookies方法
Jun 01 #Javascript
浅谈手写node可读流之流动模式
Jun 01 #Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 #Javascript
基于JS实现带动画效果的流程进度条
Jun 01 #Javascript
说说node中的可读流和可写流的区别
Jun 01 #Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 #Javascript
You might like
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
python实现用户答题功能
2018/01/17 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
施工人员岗位职责
2013/12/12 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
cf收人广告词
2014/03/14 职场文书
土地转让协议书
2014/09/27 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL