node.js基础学习-express框架-静态资源中间件express.static(十一)

前言

在 Node.js 应用中,静态资源是指那些不需要服务器动态处理,直接发送给客户端的文件。常见的静态资源包括 HTML 文件、CSS 样式表、JavaScript 脚本、图片(如 JPEG、PNG 等)、字体文件和音频、视频文件等。这些文件在服务器端存储,当客户端请求相应的资源时,服务器直接将文件内容发送给客户端,而不需要像动态路由那样进行数据处理或生成内容。

在 Express 中处理静态资源(使用express.static中间件)

基本用法

首先,需要引入 Express 并创建应用实例,然后使用express.static中间件来指定静态资源所在的目录。例如,假设静态资源都存储在名为public的目录下:

js 复制代码
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000, () => {
    console.log('Server running on port 3000');
});

这样,当客户端请求http://localhost:3000/index.html(假设index.htmlpublic目录下)时,服务器会自动在public目录中查找index.html文件并发送给客户端。如果请求http://localhost:3000/styles/main.css(假设main.csspublic/styles目录下),服务器也会正确地找到并发送该文件。

虚拟路径前缀

可以为静态资源设置虚拟路径前缀。例如,想让所有静态资源的 URL 路径都以/static开头,可以这样设置:

js 复制代码
app.use('/static', express.static('public'));

此时,要访问public目录下的index.html文件,客户端需要请求http://localhost:3000/static/index.html。这种方式在需要区分静态资源和动态路由,或者将静态资源部署到特定的路径下时非常有用。

多个静态资源目录

可以指定多个静态资源目录。例如,除了public目录,还有一个uploads目录用于存储用户上传的文件,并且也想将其作为静态资源提供服务,可以这样做:

js 复制代码
app.use(express.static('public'));
app.use('/uploads', express.static('uploads'));

这样,客户端可以通过http://localhost:3000/访问public目录下的静态资源,通过http://localhost:3000/uploads访问uploads目录下的静态资源。

例子

有两个静态文件,分别是放到views文件夹的index.html页面和放到public的myStyle.css样式文件

文档结构

index.html的代码

js 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <link rel="stylesheet" href="/public/myStyle.css">
</head>
<body>
<p class="redBackground">This is the index page.</p>
</body>
</html>

引入了myStyle.css

css 复制代码
.redBackground {
    background-color: red;
}

服务器的配置如下:

js 复制代码
const express = require('express');
const app = express();

//设置了public目录为静态资源目录(需要输入public才能访问到public目录下的文件)
app.use('/public',express.static('public'))
//设置views目录为静态资源目录(不需要输入views也可以访问到views目录下的文件)
app.use(express.static('views'))

app.listen(2000,()=>{
    console.log('Server is running on port 2000')
})

浏览器输入http://localhost:2000/index.html,可以看到页面

如果我将public的静态文件配置app.use('/public',express.static('public'))注释掉,是加载不到css文件的

相关推荐
学历真的很重要3 小时前
【系统架构师】第二章 操作系统知识 - 第二部分:进程管理(详解版)
学习·职场和发展·系统架构·系统架构师
Nebula_g3 小时前
线程进阶: 无人机自动防空平台开发教程(更新)
java·开发语言·数据结构·学习·算法·无人机
星期五不见面3 小时前
机器人学习!(二)ROS2-节点(7)2026/02/03
学习
狂奔蜗牛飙车4 小时前
Python学习之路-循环语句学习详解
python·学习·python学习·#python学习笔记·循环语句详解
电饭叔4 小时前
Jupyter学习中的问题--FileNotFoundError
ide·学习·jupyter
峥嵘life4 小时前
Android16 【CTS】CtsMediaCodecTestCases等一些列Media测试存在Failed项
android·linux·学习
EnglishJun5 小时前
数据结构的学习(四)---栈和队列
数据结构·学习
2501_901147835 小时前
学习笔记:单调递增数字求解的迭代优化与工程实践
linux·服务器·笔记·学习·算法
苦逼IT运维6 小时前
从 0 到 1 理解 Kubernetes:一次“破坏式”学习实践(一)
linux·学习·docker·容器·kubernetes
野犬寒鸦7 小时前
从零起步学习并发编程 || 第五章:悲观锁与乐观锁的思想与实现及实战应用与问题
java·服务器·数据库·学习·语言模型