请问谁知道为甚么我用Nodejs写的的网页打开后显示空白

请问谁知道为甚么我用Nodejs写的的网页打开后显示空白

代码： 12.png 13.png 14.png 15.png 16.png 17.png 直接打开没问题：

18.png nodejs打开，输入127.0.0.1后就显示空白 19.png 文档结构 2.png 谁知道这是什么原因造成的，很诡异啊。


5 回复

要解决这个问题，我们需要检查你的 Node.js 代码和服务器配置。根据你提供的信息，可能是由于以下几种情况导致的：

检查 Node.js 代码

确保你的服务器端代码正确地处理了请求并返回了 HTML 内容。以下是一个简单的 Express 示例，展示如何设置一个基本的服务器来返回 HTML 页面：

const express = require('express');
const app = express();

// 设置静态文件目录
app.use(express.static('public'));

// 创建一个路由处理函数，返回一个简单的 HTML 页面
app.get('/', (req, res) => {
    res.send(`
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>My Page</title>
        </head>
        <body>
            <h1>Hello, World!</h1>
        </body>
        </html>
    `);
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在这个例子中，我们使用了 Express 框架，并创建了一个简单的路由来返回一个包含 “Hello, World!” 的 HTML 页面。

检查文件路径

确保你的 HTML 文件和其他静态资源（如 CSS、JS 文件）放在正确的目录下。例如，如果你将 HTML 文件放在 public 目录下，你需要使用 express.static 中间件来提供静态文件服务：

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

检查浏览器控制台

打开浏览器的开发者工具（通常按 F12 或右键选择“检查”），查看控制台是否有错误信息。这可以帮助你找到可能的 JavaScript 错误或其他问题。

检查网络请求

在开发者工具的“网络”标签页中，检查 HTTP 请求是否成功。如果请求失败或返回状态码不是 200，那么可能是服务器配置或代码存在问题。

总结

通过上述步骤，你应该能够定位并解决问题。确保你的服务器正确地处理了请求并返回了 HTML 内容，同时检查静态文件路径和浏览器控制台中的错误信息。


不是很清楚这个，但是我写的时候，页面后缀都是jade，没遇到过楼主说的问题。

这你要自己测一下，可以把页面内容都删掉，留下HTML基本框架，body里写点简单的东西看到底是页面的问题还是后台程序的问题

sendFile里面只发送了一个文件头，没有发送文件本身。 里面加个 res.end(fileContents);看看。

根据你的描述和图片信息，出现这种情况可能是由于以下几个常见原因：

  1. 路由或中间件问题：确保你在服务器端正确设置了路由。例如，如果使用Express框架，需要设置正确的路由来返回HTML文件。

  2. HTTP响应状态码：确保返回给客户端的状态码是200，表示成功。

  3. 输出内容：确保没有遗漏向客户端输出HTML内容。

以下是一个简单的示例代码，演示如何使用Express框架创建一个基本的Web服务器，并返回HTML页面：

const express = require('express');
const path = require('path');

const app = express();
const port = 3000;

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 处理根路径的请求
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

假设你有一个public目录，里面包含一个index.html文件。你可以根据实际情况调整目录结构。

此外，确保你的index.html文件内容正确且完整。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

如果你仍然遇到问题，请检查控制台是否有任何错误信息，并确保所有依赖项已正确安装。

回到顶部