Express请求处理-静态资源的处理

墨蓝 2023-10-06 13:09 90阅读 0赞

## 场景 ##

Node的Web应用框架Express的简介与搭建HelloWorld：

[Node的Web应用框架Express的简介与搭建HelloWorld\_霸道流氓气质的博客-CSDN博客][Node_Web_Express_HelloWorld_-CSDN]

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

### 静态资源的处理 ###

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

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

使用app.use中间件拦截所有请求，然后将请求交给express.stataic处理，并且将静态资源的目录告知static方法，在方法的内部会判断客户端发来的请求是否是静态资源请求，如果是则直接返回静态资源。

这里路径使用绝对路径，所以引入path

const path = require('path');

然后使用path的join方法拼接路径，第一个参数\_\_dirname代表当前目录，第二个参数代表当前目录下public目录

app.use(express.static(path.join(__dirname,'public')))

完整示例代码

//引入express框架
    const express = require('express');
    const path = require('path');
    const app = express();
    app.use(express.static(path.join(__dirname,'public')))
    app.listen(3000, function () {
      console.log('Example app listening on port 3000!')
    })

在项目下新建public目录并放置badao.png照片

然后启动项目

node app.js

访问该图片

[http://localhost:3000/badao.png][http_localhost_3000_badao.png]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

[Node_Web_Express_HelloWorld_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106650798
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[http_localhost_3000_badao.png]: http://localhost:3000/badao.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200716223154518.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70