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 相关文章推荐
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
纯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过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php写的AES加密解密类分享
2014/06/20 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
深入理解Node module模块
2018/03/26 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Python reversed函数及使用方法解析
2020/03/17 Python
PyQt5实现画布小程序
2020/05/30 Python
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
中专毕业生自我鉴定
2013/11/21 职场文书
六查六看剖析材料
2014/02/15 职场文书
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
中学教师个人总结
2015/02/10 职场文书
入党介绍人意见范文
2015/06/01 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js