Question

我即将教给我的学生在node.js中创建一个简单的Web服务器。我最初使用http模块并返回静态页面。服务器代码如下所示：

var http = require('http');
var fs = require('fs');

http.createServer(function(request, response) {
    getFile(response);
}).listen(8080);

function getFile(response) {
    var fileName = __dirname + "/public/index.html";
    fs.readFile(fileName, function(err, contents) {
        if (!err) {
            response.end(contents);
        } else {
            response.end();
            console.log("ERROR ERROR ERROR");
        }
    });
}

index.html看起来像这样：

<!DOCTYPE html>
<html>
    <head>
        <title>Static Page</title>
    </head>
    </body>
        <h1>Returned static page</h1>
        <p>This is the content returned from node as the default file</p>
        <img src="./images/portablePhone.png" />
    </body>
</html>

正如我所料，我在没有图像的情况下显示index.html页面（因为我没有处理mime类型）。这可以;令我困惑的是，当我查看网络流量时，我希望index.html返回三次（初始请求，图像请求和一个针对favicon.ico请求）。这应该发生，因为Web服务器应该返回的唯一内容是当前文件夹中的index.html页面。我记录了__dirname和fileName var，它们在每个请求上都正确显示，确实有三个请求。

所以我的问题是，我错过了什么？为什么我在Chrome上的网络监视器中没有看到三个index.html响应对象？我知道其中一个学生会问，我想给他一个正确的答案。

Answer 1

让我感到困惑的是，当我看到网络流量时，我愿意期望让index.html返回三次（最初的请求，图像请求和一个favicon.ico请求）

当我运行您的应用时，我在Chrome调试器的网络标签中确切地看到了三个网络请求，正如您所建议的那样，并且与HTML页面和Web服务器编码完全相同。一个用于初始页面请求，一个用于图像，一个用于favicon.ico。

图片无法正常工作，因为您实际上并未提供图像（您为所有请求提供index.html） - 但也许您已经知道了。

所以我的问题是，我错过了什么？为什么我没有看到三个 Chrome网络监视器中的index.html响应对象？

在我运行您的应用时，点击Chrome调试器的网络标签中的屏幕截图：

Answer 2

您实际编写的代码（最初无法确定您不会编辑问题）仅提供index.html。那里没有任何东西可以读取任何其他文件（如图像）。

我认为你不应该教学生语法/机制，因为它已经过时了。对于初学者，不要教它们用标签或四个空格缩进。用2个JavaScript空格缩进。此外，在这一点上教授ES5也没有意义。他们应该学习ES2015或更高版本（ES6 / ECMAScript 2016 /无论他们称之为什么）。对于开箱即用的当前版本的Node（撰写时为6.6），这将与你所写的相同：

const http = require('http');
const fs = require('fs-promise');

http.createServer( (request, response) => {
  fs.readFile(`${__dirname}/public/index.html`)
  .then( data => {response.end(data)} )
  .catch(console.error);
}).listen(8080);

但您似乎要做的是创建一个图库脚本。

关于Node的另一件事是，有超过300,000个模块可用。所以从0开始并忽略所有300,000多个模块绝对没有意义。

此外，在大约三个月内，最多6个，async/await将在节点7中着陆而不需要babel。人们会争辩说，如果孩子们没有足够的时间来承诺承诺会让孩子们感到困惑，但我不认为我会这么做。我想你应该教他们如何设置babel并使用async/await。总的来说，它会更有意义，他们将学习更清晰的做事方式。然后，下次你上课时，你可能不需要babel。

所以这是我制作一个简单的图库脚本的一种方式，它不会忽略npm上的所有模块并使用最新的语法：

import {readFile} from 'fs-promise';
import listFilepaths from 'list-filepaths';
import Koa from 'koa';

const app = new Koa();

app.use(async (ctx) => {
  if (ctx.request.querystring.indexOf('.jpg')>0) {
    const fname = ctx.request.querystring.split('=')[1];
    ctx.body = await readFile(`images/${fname}`);
  } else {
    let images = await listFilepaths('./images',{relative:true});
    images = images.map(i=>i.replace('images/',''));
    ctx.body = `${images.map(i=> `<img src = "/?i=${i}" />` )}`;
  }
});

app.listen(3000);

将嵌套请求发送到node.js Web服务器

2 个答案: