欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Express处理静态资源(代码演示)

程序员文章站 2022-06-26 17:52:16
使用express处理静态资源的请求...

一、问题描述

浏览器在收到服务器返回的HTML内容之后,就要开始从上到下依次解析,当在解析的过程中,如果发现:

  • link
  • script
  • img
  • iframe
  • video
  • audio

等带有src或者link 的href属性标签的时候,浏览器会自动对这些静态资源发起一个新的请求。我们要对这些新的请求进行处理。

使用原生的Node代码处理这些静态资源可以参考这篇博客:

Node.js中如何处理静态资源

但是它比较麻烦。在学习Node的过程中,相信大家都会去学习 Express 框架(基于 Node.js 平台,快速、开放、极简的 Web 开发框架)。那么我们如何在Express中处理这些静态资源呢?


二、解决方法

项目结构
Express处理静态资源(代码演示)
我们使用 Express 中的 express.static 内置中间件函数。此函数特征如下:express.static(root, [options])

方法一:

//第一个参数是请求路径url,当请求路径以 /public/ 开头的时候,就会去 ./public/ 请求对应的资源,
//如 http://localhost:3000/public/img/1.jpg
app.use('/public',express.static('./public/'))

结果如图所示:Express处理静态资源(代码演示)

方法二:

我们可以实现这样的效果: 为服务器提供的文件创建虚拟路径前缀(路径实际上不存在于文件系统中)

//第一个参数是什么,请求路径中就要加上,如 http://localhost:3000/a/img/1.jpg,可以把 a 当做 public 的别名
app.use('/a',express.static('./public/'))

//这样也是可以的 http://localhost:3000/a/b/c/img/1.jpg
app.use('/a/b/c',express.static('./public/'))

方法三:

当省略 app.use() 的第一个参数的时候,请求路径中就不需要加 /public/ 或者 其它路径前缀了,直接写 public 文件夹中的资源路径,

// http://localhost:3000/img/1.jpg
app.use(express.static('./public/'));

当然我们也可以使用绝对路径

// 提前导入 path 模块
app.use(express.static(path.join(__dirname, 'public')))

完整代码:

let express = require('express');

let app = express();

app.get('/',function (req,res) {
  res.send('我是首页');
})

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

app.listen(3000,function () {
  console.log('服务器启动成功: http://localhost:3000');
})

三、总结

  1. 如果 app.use() 没有第一个参数,就直接使用 public 目录下的资源路径
  2. 如果 app.use() 有第一个参数,请求资源的时候就把第一个参数作为前缀加到 url 里边

四、延伸阅读

Express 中文网

https://blog.csdn.net/weixin_43974265/category_10692693.html

如果本文对您有帮助,请点个赞再走吧 ( ̄▽ ̄)~*

本文地址:https://blog.csdn.net/weixin_43974265/article/details/111936275