详解利用 Express 托管静态文件的方法

通过 Express 内置的 express.static 可以方便地托管静态文件，例如图片、CSS、JavaScript 文件等。

将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如，假设在 public 目录放置了图片、CSS 和 JavaScript 文件，你就可以：

app.use(express.static('public'));

现在，public 目录下面的文件就可以访问了。

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

所有文件的路径都是相对于存放目录的，因此，存放静态文件的目录名不会出现在 URL 中。

如果你的静态资源存放在多个目录下面，你可以多次调用 express.static 中间件：

app.use(express.static('public'));
app.use(express.static('files'));

访问静态资源文件时，express.static 中间件会根据目录添加的顺序查找所需的文件。

如果你希望所有通过 express.static 访问的文件都存放在一个“虚拟（virtual）”目录（即目录根本不存在）下面，可以通过为静态资源目录指定一个挂载路径的方式来实现，如下所示：

app.use('/static', express.static('public'));

现在，你就爱可以通过带有 “/static” 前缀的地址来访问 public 目录下面的文件了。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解利用 Express 托管静态文件的方法

    通过 Express 内置的 express.static 可以方便地托管静态文件,例如图片.CSS.JavaScript 文件等. 将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了.例如,假设在 public 目录放置了图片.CSS 和 JavaScript 文件,你就可以: app.use(express.static('public')); 现在,public 目录下面的文件就可以访问了. http://localhost:3000

  • Express之托管静态文件的方法

    中间件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等. exp

  • 详解利用jsx写vue组件的方法示例

    前言 本文主要给大家介绍的是关于利用jsx写vue组件,下面话不多说,来一起看看详细的介绍吧. 我们平常写vue的组件时,一般都是用的是模版,这种方式看起来比较简洁,而且vue作者也推荐使用这个方式,但是这种方式也有一些它的弊端,例如模版调试麻烦,或者在一些场景下模版描述可能没那么简单和方便. 下面我们要讲的是如何在vue里面写jsx,知道react的人应该都知道jsx,jsx的一个特性就是非常灵活,虽然有的人觉得jsx很丑陋,把逻辑都写到模版的感觉,但萝卜青菜各有所爱,适合自己适合团队的就是最

  • 如何利用node实现静态文件缓存详解

    如何利用node实现静态文件缓存详解

    目录 缓存 缓存位置分类 缓存设置header node实现静态文件缓存 强缓存 思路 代码实现 效果展示 协商缓存 思路 代码实现 效果展示 总结 缓存 浏览器缓存(Brower Caching)是浏览器对之前请求过的文件进行缓存,以便下一次访问时重复使用,节省带宽,提高访问速度,降低服务器压力 缓存位置分类 memory cache:内存中的缓存,关闭浏览器则清空,一般存储一些js库 disk cache:硬盘中的缓存,关闭浏览器不会马上清空,一般存储大文件,比如 图片资源,iconFont

  • 详解Django模版中加载静态文件配置方法

    1.settings.INSTALLED_APPS下添加:django.contrib.staticfiles 2.settings.py下添加:STATIC_URL = '/static/' 3. (1)在APP下新建文件夹static,然后在这个static文件夹下创建一个当前APP的名字的文件夹,再把静态文件放到这个文件夹下:(类似于Templates配置) 在模板中这样调用: {% load static %} <img src="{% static 'front/logo.jpg

  • 详解SpringBoot之访问静态资源(webapp...)

    springboot访问静态资源,默认有两个默认目录, 一个是  classpath/static 目录 (src/mian/resource) 一个是 ServletContext 根目录下( src/main/webapp ) 这在里可能有小伙伴对 classpath 不怎么了解,这里简要的介绍下,classpath 即WEB-INF下面的classes目录 ,在springboot项目中可能就是,src/main/resource 目录. 1,classpath 目录下-访问默认文件夹名为

  • 详解PHP如何读取大文件

    衡量成功 唯一能确认我们对代码所做改进是否有效的方式是:衡量一个糟糕的情况,然后对比我们已经应用改进后的衡量情况.换言之,除非我们知道 "解决方案" 能帮我们到什么程度 (如果有的话),否则我们并不知道它是否是一个解决方案. 我们可以关注两个指标.首先是 CPU 使用率.我们要处理的过程运行得有多快或多慢?其次是内存使用率.脚本执行要占用多少内存?这些通常是成反比的 - 这意味着我们能够以 CPU 使用率为代价减少内存的使用率,反之亦可. 在一个异步处理模型 (例如多进程或多线程 PH

  • 详解利用python-highcharts库绘制交互式可视化图表

    详解利用python-highcharts库绘制交互式可视化图表

    目录 python-highcharts库的简单介绍 python-highcharts具体案例 总结 今天小编给大家推荐一个超强交互式可视化绘制工具-python-highcharts,熟悉HightCharts绘图软件的小伙伴对这个不会陌生,python-highcharts就是使用Python进行Highcharts项目绘制,简单的说就是实现Python和Javascript之间的简单转换层,话不多说,我们直接进行介绍,具体包括以下几个方面: python-highcharts库的简单介绍

  • 详解利用上下文管理器扩展Python计时器

    目录 一个 Python 定时器上下文管理器 了解 Python 中的上下文管理器 理解并使用 contextlib 创建 Python 计时器上下文管理器 使用 Python 定时器上下文管理器 写在最后 上文中,我们一起学习了手把手教你实现一个 Python 计时器.本文中,云朵君将和大家一起了解什么是上下文管理器 和 Python 的 with 语句,以及如何完成自定义.然后扩展 Timer 以便它也可以用作上下文管理器.最后,使用 Timer 作为上下文管理器如何简化我们自己的代码. 上

  • 详解利用装饰器扩展Python计时器

    目录 介绍 理解 Python 中的装饰器 创建 Python 定时器装饰器 使用 Python 定时器装饰器 Python 计时器代码 其他 Python 定时器函数 使用替代 Python 计时器函数 估计运行时间timeit 使用 Profiler 查找代码中的Bottlenecks 总结 介绍 在本文中,云朵君将和大家一起了解装饰器的工作原理,如何将我们之前定义的定时器类 Timer 扩展为装饰器,以及如何简化计时功能.最后对 Python 定时器系列文章做个小结. 这是我们手把手教你实

随机推荐