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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
mailto的使用技巧分享
Dec 21 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
js实现橱窗展示效果
2020/01/11 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
pandas对指定列进行填充的方法
2018/04/11 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
新年晚会主持词
2014/03/24 职场文书
踏青活动策划方案
2014/08/19 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
2014年预算员工作总结
2014/12/05 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android