哈尔滨网站建设教学,淄博网站制作建设,做网站花钱么,福州网站前言 在 Node.js 应用中#xff0c;静态资源是指那些不需要服务器动态处理#xff0c;直接发送给客户端的文件。常见的静态资源包括 HTML 文件、CSS 样式表、JavaScript 脚本、图片#xff08;如 JPEG、PNG 等#xff09;、字体文件和音频、视频文件等。这些文件在服务器端…前言 在 Node.js 应用中静态资源是指那些不需要服务器动态处理直接发送给客户端的文件。常见的静态资源包括 HTML 文件、CSS 样式表、JavaScript 脚本、图片如 JPEG、PNG 等、字体文件和音频、视频文件等。这些文件在服务器端存储当客户端请求相应的资源时服务器直接将文件内容发送给客户端而不需要像动态路由那样进行数据处理或生成内容。 在 Express 中处理静态资源使用express.static中间件
基本用法
首先需要引入 Express 并创建应用实例然后使用express.static中间件来指定静态资源所在的目录。例如假设静态资源都存储在名为public的目录下
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.html在public目录下时服务器会自动在public目录中查找index.html文件并发送给客户端。如果请求http://localhost:3000/styles/main.css假设main.css在public/styles目录下服务器也会正确地找到并发送该文件。
虚拟路径前缀
可以为静态资源设置虚拟路径前缀。例如想让所有静态资源的 URL 路径都以/static开头可以这样设置
app.use(/static, express.static(public));此时要访问public目录下的index.html文件客户端需要请求http://localhost:3000/static/index.html。这种方式在需要区分静态资源和动态路由或者将静态资源部署到特定的路径下时非常有用。
多个静态资源目录
可以指定多个静态资源目录。例如除了public目录还有一个uploads目录用于存储用户上传的文件并且也想将其作为静态资源提供服务可以这样做
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的代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href/public/myStyle.css
/head
body
p classredBackgroundThis is the index page./p
/body
/html引入了myStyle.css
.redBackground {background-color: red;
}服务器的配置如下
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文件的
