Nodejs相关问题求教，回答问题的人少，交流也少...再提一问

Nodejs相关问题求教，回答问题的人少，交流也少…再提一问

在学习SocketIO的的时候,发现单纯nodejs创建的http服务器,对于html文件内的外链jquery.js文件竟然不能处理,无法加载. 因为以前从来想过这种可能,一下子震惊了,也是自己所学不精.后来尝试写了些静态文件服务器,虽然有效果,还是不理想. 希望知道的说说,服务器,浏览器,框架和加载js的关系~畅所欲言

4 回复

当然可以。你的问题主要集中在如何让Node.js创建的HTTP服务器能够正确地提供HTML文件中的外部链接JavaScript文件（如jQuery）。这里我们将通过一个简单的示例来解决这个问题。

问题背景

当你使用Node.js创建一个HTTP服务器时，默认情况下它不会自动处理静态文件（例如HTML、CSS、JS等）。你需要显式地告诉服务器如何处理这些静态资源。

解决方案

我们可以使用express框架来简化这个过程。express是一个简洁而灵活的Node.js Web应用框架，它可以方便地处理静态文件。

示例代码

首先，确保你已经安装了express：

npm install express

然后，你可以创建一个简单的服务器来处理静态文件：

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

// 创建Express应用实例
const app = express();
const port = 3000;

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

// 设置路由，用于访问HTML文件
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的目录，并在其中放置以下文件：

  • public/index.html
  • public/jquery.js
  • public/style.css（可选）

示例HTML文件

假设public/index.html文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Page</title>
    <script src="/jquery.js"></script>
</head>
<body>
    <h1>Hello World!</h1>
    <script>
        $(document).ready(function() {
            $('h1').text('Hello jQuery!');
        });
    </script>
</body>
</html>

解释

  1. 设置静态文件目录：app.use(express.static(path.join(__dirname, 'public'))); 这行代码告诉Express将public目录下的所有文件作为静态文件处理。
  2. 路由设置：app.get('/', ...) 定义了一个根路径的路由，当用户访问/时，服务器会返回index.html文件。
  3. 启动服务器：app.listen(port, ...) 启动服务器并监听指定端口。

这样配置后，浏览器就可以正确地加载HTML文件中的外部JavaScript文件了。希望这能帮助你解决问题！


http服务器为啥要处理你HTML中外链的jQuery？ 服务器返回页面数据，浏览器拿到这串文本，解析到了外链JS，然后就向jQuery所在目标服务器发送jQuery的请求。

楼主表达有误吧，应该是想说处理站内的静态文件链接对吧

关于你在使用 Node.js 创建 HTTP 服务器时遇到的问题，特别是加载外部 jQuery 文件失败的情况，我们可以从几个方面来探讨这个问题。

首先，Node.js 创建的 HTTP 服务器默认情况下不会自动处理静态文件（如 HTML、CSS、JavaScript 文件等）的请求。这意味着如果你直接通过 Node.js 服务器访问一个包含外部 jQuery 链接的 HTML 文件，服务器可能无法正确地提供这些外部资源。

示例代码：创建一个简单的静态文件服务器

为了处理这类问题，你可以创建一个简单的静态文件服务器来提供静态资源。下面是一个基本的示例：

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) => {
    let filePath = `.${req.url}`;
    
    if (filePath === './') {
        filePath = './index.html'; // 默认打开首页
    }
    
    const extname = String(path.extname(filePath)).toLowerCase();
    const mimeTypes = {
        '.html': 'text/html',
        '.js': 'text/javascript',
        '.css': 'text/css',
        '.json': 'application/json',
        '.png': 'image/png',
        '.jpg': 'image/jpg',
        '.gif': 'image/gif',
        '.svg': 'image/svg+xml',
        '.wav': 'audio/wav',
        '.mp4': 'video/mp4',
        '.woff': 'application/font-woff',
        '.ttf': 'application/font-ttf',
        '.eot': 'application/vnd.ms-fontobject',
        '.otf': 'application/font-otf',
        '.wasm': 'application/wasm'
    };

    const contentType = mimeTypes[extname] || 'application/octet-stream';

    fs.readFile(filePath, (err, content) => {
        if (err) {
            if (err.code == 'ENOENT') {
                fs.readFile('./404.html', (err, content) => {
                    res.writeHead(404, { 'Content-Type': 'text/html' });
                    res.end(content, 'utf-8');
                });
            } else {
                res.writeHead(500);
                res.end(`Server Error: ${err.code}`);
            }
        } else {
            res.writeHead(200, { 'Content-Type': contentType });
            res.end(content, 'utf-8');
        }
    });
});

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

解释

  1. 创建 HTTP 服务器：使用 Node.js 的内置 http 模块创建一个 HTTP 服务器。
  2. 解析 URL：根据请求的 URL 来决定读取哪个文件。
  3. 处理 MIME 类型：根据文件扩展名决定返回的 MIME 类型。
  4. 读取文件：使用 fs.readFile 读取文件内容，并根据文件是否存在进行相应处理。

以上就是解决你提到的问题的一个简单方法。当然，生产环境中推荐使用更成熟的解决方案，比如 Express 框架，它提供了更强大且易于使用的功能来处理静态文件和路由。

回到顶部