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验证模型自我实现的具体方法
Jun 21 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 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
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
JavaScript之自定义类型
2012/05/04 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
js函数排序的实例代码
2013/07/01 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
js+html获取系统当前时间
2017/11/10 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Python记录详细调用堆栈日志的方法
2015/05/05 Python
python字典快速保存于读取的方法
2018/03/23 Python
Python的argparse库使用详解
2018/10/09 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Python实现爬取并分析电商评论
2020/06/19 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
给儿子的表扬信
2014/01/15 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
办公室禁烟通知
2015/04/23 职场文书
鉴史问廉观后感
2015/06/10 职场文书
信息简报范文
2015/07/21 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技