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 相关文章推荐
动态加载iframe
Jun 16 Javascript
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 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
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php单链表实现代码分享
2016/07/04 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python实现截屏的函数
2015/07/25 Python
python黑魔法之参数传递
2016/02/12 Python
python判断设备是否联网的方法
2018/06/29 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
python 多线程中join()的作用
2020/10/29 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
社会工作专业求职信
2014/07/15 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python