Nodejs请高手指教如何用node开发一个小的网页，不必要使用express

Nodejs请高手指教如何用node开发一个小的网页，不必要使用express

我想见一个小网页用来执行几条命令的，使用的是socket.io，本地访问静态网页可以，但是我想放在服务端访问，可以直接使用readFile访问Html文件，但是里面的css和Js文件访问不到，求高手指教

9 回复

当然可以！如果你想要在 Node.js 中创建一个简单的网页，并且不需要使用 Express 框架，你可以直接使用内置的 http 模块来创建一个 HTTP 服务器。同时，为了处理静态文件（如 CSS 和 JavaScript 文件），我们可以手动设置静态文件目录。

以下是一个简单的示例代码，展示如何创建一个基本的 HTTP 服务器，并提供静态文件支持：

const http = require('http');
const fs = require('fs');
const path = require('path');

// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
    // 解析请求路径
    const filePath = req.url === '/' ? './index.html' : `.${req.url}`;

    // 设置响应头
    res.setHeader('Content-Type', 'text/html');

    // 读取文件并发送给客户端
    fs.readFile(filePath, (err, data) => {
        if (err) {
            console.error(err);
            res.writeHead(404);
            res.end('404 Not Found');
        } else {
            res.end(data);
        }
    });
});

// 监听端口
server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

示例 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>Simple Webpage</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="/script.js"></script>
</body>
</html>

示例 CSS 文件 (styles.css)

body {
    background-color: lightblue;
}

示例 JavaScript 文件 (script.js)

console.log("Script file loaded!");

运行步骤

  1. 将上述代码保存为 server.js。
  2. 创建一个名为 index.html 的文件，并将示例 HTML 代码粘贴进去。
  3. 创建一个名为 styles.css 的文件，并将示例 CSS 代码粘贴进去。
  4. 创建一个名为 script.js 的文件，并将示例 JavaScript 代码粘贴进去。
  5. 在终端中运行 node server.js。
  6. 打开浏览器，访问 http://localhost:3000。

这样，你就可以通过 HTTP 服务器访问到你的 HTML、CSS 和 JavaScript 文件了。


用Connect\一秒钟搞定

var connect = require('connect');
var app = connect();
app.use(connect.static(__dirname + '/public'));
app.listen(3000);

把网静态页放在public文件夹下面，js和css文件放在css和js文件夹下即可

那css和js文件的路径还是之前的静态网页的路径吗？

还有一个问题啊，那sokcet.io监听app吗？

他的意思是connect也不要。可以是可以，要自己判断路由，就像那个The Node Beginner Book那样

不明白为什么有这样的需求，为了展示技术么？

根据URL判断文件路径…然后readfile 不难吧…

可以按照本书开发，不依赖express

Node.js服务器框架开发实战

为了实现你的需求，你可以使用 Node.js 的内置模块 http 和 fs 来创建一个简单的 HTTP 服务器，并提供静态文件（如 HTML、CSS 和 JavaScript 文件）的服务。下面我将给出一个示例代码，它将帮助你在服务器端正确地提供这些静态文件。

示例代码

首先，确保你已经安装了 Node.js。接下来，创建一个新的目录并初始化一个新的项目：

mkdir my-app
cd my-app
npm init -y

然后，创建一个名为 server.js 的文件，并添加以下代码：

const http = require('http');
const fs = require('fs');
const path = require('path');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  const filePath = req.url === '/' ? '/index.html' : req.url;
  const fullPath = path.join(__dirname, 'public', filePath);

  fs.readFile(fullPath, (err, data) => {
    if (err) {
      res.writeHead(404);
      res.end(JSON.stringify(err));
      return;
    }
    res.writeHead(200);
    res.end(data);
  });
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

在这个示例中，我们创建了一个 HTTP 服务器，它可以处理 GET 请求，并尝试读取请求路径对应的文件。我们假设所有的静态文件（HTML、CSS、JavaScript）都存储在 public 目录下。

接下来，创建一个 public 目录，并在其中创建以下文件：

  • index.html
  • style.css
  • script.js

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Simple Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<script src="/script.js"></script>
</body>
</html>

public/style.css

h1 {
  color: blue;
}

public/script.js

console.log("Script is running!");

现在，运行你的服务器：

node server.js

打开浏览器并访问 http://localhost:3000/，你应该能看到 “Hello, World!” 并且样式正常应用，同时控制台会显示 “Script is running!”。

这样，你就成功地创建了一个简单的网页，并能够正确地加载 CSS 和 JavaScript 文件。

回到顶部