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

I'm a beginner of node.js and javascript.

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

I want to include external javascript file in html code. Here is the html code, "index.html":

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

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

And, here is the javascript code, "simple.js":

下面是javascript代码“simple.js”:

document.write('Hello');

When I open the "index.html" directly on a web browser(e.g. Google Chrome), It works. ("Hello" message should be displayed on the screen.)

当我打开“索引”。直接在web浏览器上(例如:Google Chrome),它的工作原理。(“Hello”消息应该显示在屏幕上。)

However, when I tried to open the "index.html" via node.js http server, It doesn't work. Here is the node.js file, "app.js":

然而，当我试图打开“索引”时。通过节点html”。js http服务器，不起作用。这是节点。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" and "app.js" are on same directory.) I started the http server. (by "bash$node app.js") After then, I tried to connect "localhost:8000". But, "Hello" message doesn't appear.

(“索引。html”、“简单。和"app.js"在同一目录上。我启动了http服务器。之后，我尝试连接“localhost:8000”。但是，“Hello”消息不会出现。

I think the "index.html" failed to include the "simple.js" on the http server.

我认为”指数。html没有包含“simple”。在http服务器上。

How should I do?

我该怎么办?

5 个解决方案

#1

The problem is that nomatter what your browser requests, you return "index.html". So the browser loads your page and get's html. That html includes your script tag, and the browser goes asking node for the script-file. However, your handler is set up to ignore what the request is for, so it just returns the html once more.

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

#2

Alxandr is right. I will try to clarify more his answer.

Alxandr是正确的。我将设法进一步澄清他的回答。

It happens that you have to write a "router" for your requests. Below it is a simple way to get it working. If you look forward www.nodebeginner.org you will find a way of build a proper router.

你必须为你的请求写一个“路由器”。下面是一个让它工作的简单方法。如果你查看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...");

#3

Here is a working code. There should be more cleaner simpler code, but this is very close to minimal.

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

This code suppose your index.html and other files are under /client dir.

这段代码假设您的索引。html和其他文件在/client dir之下。

Good luck.

祝你好运。

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);
        });
}

#4

Your handler is hardcoded to always return the content of /index.html. You need to pay attention to the resource that is being requested and return the right one. (i.e. if the browser asks for simple.js then you need to give it simple.js instead of index.html).

您的处理程序被硬编码为总是返回/index.html的内容。您需要注意被请求的资源并返回正确的资源。(例如，如果浏览器要求简单。然后你需要让它变得简单。js的index . html)。

#5

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)
            {
                console.log(err)
                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') ;

#1

#2