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 $.ajax相关用法分享
Mar 16 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
js读取本地文件的实例
Dec 22 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 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
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
pygame加载中文名mp3文件出现error
2017/03/31 Python
python 编码规范整理
2018/05/05 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Django实现跨域的2种方法
2019/07/31 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
python设置中文界面实例方法
2020/10/27 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
酒店出纳岗位职责
2013/12/29 职场文书
给同学的道歉信
2014/01/16 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS