app.use和app.get与express.static有什么区别?

10

注意:结果证明我的问题不在于中间件express.static(),而在于app.use()和app.get()之间的区别。这个问题的答案解释得非常好(比express API文档好得多!):

Difference between app.use and app.get in express.js

我理解app.use('/')和app.get('/')的区别在于后者只为该端点提供HTTP GET请求的服务,而前者则为该端点提供所有HTTP请求的服务。

我还了解到,express.static中间件将静态页面从目录路径提供给一个端点。

我不理解的是为什么这样做:

app.get('/', express.static(__dirname + '/public')

仅提供第一个请求的页面,并不提供所请求页面中引用的ref=或src=链接/脚本页面。例如,以下是两个morgan跟踪响应简单的index.html页面,该页面具有指向文件'style.css'的css链接

1)使用app.use('/')的服务器请求跟踪

Server listening on 0.0.0.0:8080
GET / 200 6.258 ms - 444
GET /style.css 304 2.842 ms - -

2) 使用 app.get('/') 的服务器请求跟踪

Server listening on 0.0.0.0:8080
GET / 304 5.131 ms - -
GET /style.css 404 2.990 ms - 22

404???

即使浏览器发送了 GET 请求到'/',但 app.get('/') 无法提供 css,而 app.use('/') 却成功了。我错过了哪个细节?是 app.get('/') 还是 express.static?

提前感谢, PT

以下是简单的代码:

app.js:

var morgan = require('morgan'),
    express = require('express'),
    app = express(),
    server = require('http').Server(app);
app.use(morgan('dev'));

   // Uncomment .get or .use, but not both

   // this only serves index.html, not style.css when I nav to localhost:8080/
   //app.get('/', express.static(__dirname + '/pub'));

   // this serves both pages when I nav to localhost:8080/
   app.use('/', express.static(__dirname + '/pub'));

server.listen(8080);

这里是HTML的内容...

index.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
</html>

路径:

/app.js
/pub/index.html
/pub/style.css

1
如果您的事情排列得当,内容位于适当的目录中,并且没有错误,则根据Express文档 ,这应该可以工作:app.use(express.static(__dirname + '/public'));。但是,您必须非常小心关于事情的顺序。这通常是将静态内容放入单独路径的原因,以便中间件和.get()处理程序更容易通过路径指定进行分离(例如从URL路径/lib服务器所有静态内容之类的)。 - jfriend00
那跟问题有什么关系呢?我不理解这个答案。使用.use()可以正常工作。在“public/”中只有两个文件和一个端点“/”。.use和.get难道不应该以相同的方式响应浏览器的GET请求吗?有什么区别? - PeterT
那么,我猜我不明白你想解决什么问题?我不清楚你想生成哪些URL以及对应的响应。请给出一些示例。 - jfriend00
@jfriend00 让我解释得更详细一些,也许我会错误地使用一些术语,请耐心等待。我有一个处理程序 app.use('/', express.static(__dirname + '/public')); 我有一个 HTML 页面 /public/index.html,该页面链接到 /public/style.css。这两个页面都可以使用所示的处理程序正常提供服务。但是我想:“为什么我要使用 .use(),它支持所有 HTTP 方法(GET、POST、HEAD 等),当我只应处理 GET 时。我只需要将 .use 更换为 .get,一切都应该正常工作。”但是,事实并非如此,style.css 返回 404 错误。为什么呢?谢谢。 - PeterT
更新了我的问题并附上了代码。 - PeterT
@jfriend00 感谢您的时间,我找到了答案。Get 是特定的端点,Use 是该端点下的任何东西,就像这里解释的一样... https://dev59.com/YGUp5IYBdhLWcg3wAjtF - PeterT
2个回答

6

app.get('/', handler) 的意思是“将/添加到路由表中,当http GET请求到达时调用handler函数”。

app.use(middlevare) 的意思是“将middleware添加到堆栈中”。

“middleware”是一个接受(request, response, next)参数的函数,下一个中间件通过使用next()显式地调用前面的中间件。

express.static()返回middleware - 具体而言,它返回一个函数,该函数检查请求的路径并将相应文件的内容流式传输到响应。如果您使用app.get('/') 添加它,则它永远不会被非“/"路由调用。


1
明白了。我原以为.use和.get只是在响应方法上有所不同,但实际上它们的区别更深入,特别是在解析端点方面。正如这里所回答的:https://dev59.com/YGUp5IYBdhLWcg3wAjtF - PeterT

2
简短的回答是app.use('/', express.static(__dirname + '/public'))将匹配任何以/开头的路径。这意味着包括/about/contact等所有内容。然而,app.get('/', express.static(__dirname + '/public'))仅匹配特定路由/。因此,例如/about/contact将不会被包含。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接