如何在node.js的客戶端添加javascript？

我是node.js和javascript的初學者。如何在node.js的客戶端添加javascript？

我想在HTML代碼中包含外部JavaScript文件。下面是HTML代碼「的index.html」：

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

而且，這裏的JavaScript代碼，「simple.js」：

document.write('Hello');

當我打開「index.html的」直接在網絡瀏覽器（例如谷歌瀏覽器）上運行。（應該在屏幕上顯示「Hello」消息。）

但是，當我試圖通過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」。但是，「Hello」消息不會出現。

我認爲「index.html」未能在http服務器上包含「simple.js」。

我該怎麼辦？

來源

2013-07-18 lancif

問題是，無論您的瀏覽器請求什麼，您都返回「index.html」。所以瀏覽器加載你的頁面並獲取html。該HTML包含腳本標記，並且瀏覽器詢問節點是否存在腳本文件。但是，您的處理程序被設置爲忽略請求的內容，因此它只是再次返回html。

來源

2013-07-18 11:42:27 Alxandr

我被你的建議方向。我需要了解'處理程序'。謝謝！ – lancif

快速提示。如果您使用的是合理的瀏覽器，則應該能夠相當容易地查看請求和響應的數據。嘗試點擊瀏覽器中的「F12」，然後查找名爲「網絡」或「請求」（或類似的，取決於瀏覽器）的內容。 – Alxandr

您的處理程序被硬編碼爲始終返回/index.html的內容。您需要注意正在請求的資源並返回正確的資源。（即如果瀏覽器要求simple.js，那麼你需要給它simple.js而不是index.html）。

來源

2013-07-18 11:40:45 Quentin

這是一個工作代碼。應該有更簡潔的代碼，但這非常接近最小值。

此代碼假設您的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); 
     }); 
}

來源

2013-07-18 11:54:40

Alxandr是對的。我會盡量澄清他的答案。

碰巧你必須爲你的請求寫一個「路由器」。在它下面是一個簡單的方法來讓它工作。如果你期待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...");

來源

2014-02-18 22:24:25 Samuel

Timbó，謝謝你的_simple_和_worked_片段！ –

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

來源

2016-05-25 08:07:32 zloctb

如何在node.js的客戶端添加javascript？

回答

相關問題