2013-07-18 2 views
9

Я новичок node.js и javascript.Как включить javascript на стороне клиента node.js?

Я хочу включить внешний javascript-файл в html-код. Вот HTML-код, "index.html":

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

И здесь является Java-код, "simple.js":

document.write('Hello'); 

Когда я открываю "index.html" непосредственно в веб-браузере (например, Google Chrome), он работает. (сообщение «Hello» должно отображаться на экране.)

Однако, когда я попытался открыть «index.html» с помощью http-узла node.js, он не работает. Вот 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 server. (by «bash $ node app.js») После этого я попытался подключить «localhost: 8000». Но сообщение "Hello" не отображается.

Я думаю, что «index.html» не смог включить «simple.js» на http-сервере.

Как мне это сделать?

ответ

7

Проблема заключается в том, что nomatter, что ваш браузер запрашивает, вы возвращаете «index.html». Таким образом, браузер загружает вашу страницу и получает html. Этот html содержит ваш тег скрипта, и браузер запрашивает узел для файла сценария. Однако ваш обработчик настроен так, чтобы игнорировать запрос, поэтому он просто возвращает html еще раз.

+0

я получил направление на ваши советы. Мне нужно узнать о «обработчике». Благодаря! – lancif

+0

Быстрые советы. Если вы используете разумный браузер, вы сможете легко и просто увидеть запрошенные и ответившие данные. Попробуйте нажать 'F12' в своем браузере и искать что-то под названием« сеть »или« запрос »(или аналогичный, зависит от браузера). – Alxandr

1

Ваш обработчик жестко запрограммирован, чтобы всегда возвращать содержимое /index.html. Вы должны обратить внимание на запрашиваемый ресурс и вернуть правильный. (т. е. если браузер запрашивает simple.js, тогда вам нужно дать ему simple.js вместо index.html).

3

Вот рабочий код. Должен быть более чистый более простой код, но это очень близко к минимальному.

Этот код предположим, что ваш 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); 
     }); 
} 
15

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..."); 
+0

Timbó, спасибо вам за оба _simple_ и _worked_ snippet! –

0
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') ; 
Смежные вопросы