如何在 node.js 的客户端包含 javascript？

IT技术 javascript node.js
2021-02-28 01:30:27

我是 node.js 和 javascript 的初学者。

我想在 html 代码中包含外部 javascript 文件。这是 html 代码，“index.html”：

<script src="simple.js"></script>

而且，这里是 javascript 代码，“simple.js”：

document.write('Hello');

当我直接在网络浏览器（例如 Google Chrome）上打开“index.html”时，它可以工作。（“你好”消息应该显示在屏幕上。）

但是，当我尝试通过 node.js http 服务器打开“index.html”时，它不起作用。这是 node.js 文件，“app.js”：

var app = require('http').createServer(handler)
  , fs = require('fs')

app.listen(8000);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

（“index.html”、“simple.js”和“app.js”在同一目录中。）我启动了http服务器。（通过“bash$node app.js”）之后，我尝试连接“localhost:8000”。但是，“您好”消息不会出现。

我认为“index.html”未能在 http 服务器上包含“simple.js”。

我应该怎么做？

5个回答

亚历山大是对的。我会尽量澄清他的回答。

碰巧您必须为您的请求编写一个“路由器”。下面是让它工作的简单方法。如果您期待www.nodebeginner.org，您将找到一种构建合适路由器的方法。

var fs = require("fs");
var http = require("http");
var url = require("url");

http.createServer(function (request, response) {

    var pathname = url.parse(request.url).pathname;
    console.log("Request for " + pathname + " received.");

    response.writeHead(200);

    if(pathname == "/") {
        html = fs.readFileSync("index.html", "utf8");
        response.write(html);
    } else if (pathname == "/script.js") {
        script = fs.readFileSync("script.js", "utf8");
        response.write(script);
    }


    response.end();
}).listen(8888);

console.log("Listening to server on 8888...");
Timbó，感谢您提供既简单又有效的片段！
2021-04-21 01:30:27

问题是无论您的浏览器请求什么，您都会返回“index.html”。因此浏览器会加载您的页面并获取 html。该 html 包含您的脚本标记，浏览器会向节点询问脚本文件。但是，您的处理程序设置为忽略请求的目的，因此它只会再次返回 html。

我从你的建议中得到了一个方向。我需要了解“处理程序”。谢谢！
2021-05-16 01:30:27
一个快速提示。如果您使用的是合理的浏览器，您应该能够相当容易地看到请求和响应的数据。尝试F12在浏览器中单击，并查找名为“网络”或“请求”（或类似内容，取决于浏览器）的内容。
2021-05-17 01:30:27

这是一个工作代码。应该有更简洁的代码，但这非常接近最小。

此代码假设您的 index.html 和其他文件位于 /client 目录下。

祝你好运。

var fs = require('fs');
var url = require("url");
var path = require('path');
var mime = require('mime');

var log = console.log; 

var handler = function (req, res)
{
    var dir = "/client";
    var uri = url.parse(req.url).pathname;
    if (uri == "/")
    {
        uri = "index.html";
    }
    var filename = path.join(dir, uri);
    log(filename);
    log(mime.lookup(filename));
    fs.readFile(__dirname + filename,
        function (err, data)
        {
            if (err)
            {
                res.writeHead(500);
                return res.end('Error loading index.html');
            }
            log(data);
            log(filename + " has read");
            res.setHeader('content-type', mime.lookup(filename));
            res.writeHead(200);
            res.end(data);
        });
}

您的处理程序被硬编码为始终返回/index.html. 您需要注意正在请求的资源并返回正确的资源。（即，如果浏览器要求，simple.js那么您需要提供它simple.js而不是index.html）。

function contentType(ext) {
    var ct;

    switch (ext) {
    case '.html':
        ct = 'text/html';
        break;
    case '.css':
        ct = 'text/css';
        break;
    case '.js':
        ct = 'text/javascript';
        break;
    default:
        ct = 'text/plain';
        break;
    }

    return {'Content-Type': ct};
}

var PATH = 'C:/Users/DELL P26E/node_modules'
var http = require("http");
var fs = require('fs');
var url = require("url");
var path = require("path")
var fileName = "D:/index.html";
    
var server = http.createServer (function (request, response) {

var dir = "D:/";
var uri = url.parse(request.url).pathname;

if (uri == "/") {
    uri = "index.html";
}

var filename = path.join(dir, uri);

fs.readFile(filename,
    function (err, data) {
        if (err) {
            response.writeHead(500);
            return response.end('Error loading index.html');
        }
                
        var ext = path.extname(filename)
        response.setHeader('content-type',contentType(ext));
        response.writeHead(200);
        response.end(data);
    });
}).listen(3000);
    
console.log('Server running on 8124') ;
其它你可能感兴趣的问题
上一篇在 Safari 中使用 jQuery 检测页面缩放变化 下一篇我可以使用 JAVASCRIPT/jQuery 将表单中的输入保存到 HTML 中的 .txt，然后使用它吗？