2015-06-12 3 views
-1

Я играю с nodejs, создавая простой сервер, также обрабатывает некоторые ajax. Когда я перехожу на localhost:4000, страница не отображается, вместо этого загружается пустой файл. Он называется «файл загрузки», нулевой байт и без расширения.nodejs не может обслуживать статические файлы - загружает их

Я думаю, что мой клиент и мой сервер очень просты. Извините за общий вопрос, но я не понимаю, почему это происходит.

Заранее спасибо

Client - простая форма и XHR, который отправляет данные в формате JSON типа

<html> 
    <head>  <title>Chatrooms</title> </head>  
    <body> 
<form id="fruitform" method="post" action="/"> 
<div class="table"> 
<div class="row"> 
<div class="cell label">Bananas:</div> 
<div class="cell"><input name="bananas" value="2"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Apples:</div> 
<div class="cell"><input name="apples" value="5"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Cherries:</div> 
<div class="cell"><input name="cherries" value="20"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Total:</div> 
<div id="results" class="cell">0 items</div> 
</div> 
</div> 
<button id="submit" type="button">Submit Form</button> 
</form> 
<div id="results"></div> 
<div id="de"></div> 

</body> 
</html> 

<script type="text/javascript"> 

document.getElementById("submit").onclick = handleButtonPress; 

function handleButtonPress(e) { 
    e.preventDefault(); 
    var formData = ""; 
    //gather all input values in a json type string 
    var inputElements = document.getElementsByTagName("input"); 
    for (var i = 0; i < inputElements.length; i++) { 
     formData += inputElements[i].name + "=" + inputElements[i].value + "&";  
    } 
    formData = formData.slice(0, -1); 
    var hr = new XMLHttpRequest(); 
    hr.open("POST", "/formHandler", true); 
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    hr.onreadystatechange = function() { 
     if(hr.readyState == 4 && hr.status == 200) { 
      document.getElementById("results").innerHTML = hr.responseText; 
     } 
    } 
    hr.send(formData); 
} 
</script> 

Сервер

//dependencies 
var http = require ('http'); 
var fs = require ('fs'); 
var path = require ('path'); 
var mime = require ('mime'); 
var qs = require('querystring'); 


//this is the http server 
var server = http.createServer(function (request, response){ 
    var filePath = false; 
    if (request.url == '/'){ 
     filePath='public/index.html';//default static file 
    } 

    if (request.url == '/formHandler'){//handle XHR 
      if (request.method=="POST"){ 
       var rrr="rrr"; 
       response.writeHead(200,{"content-type":"text/plain"}); 
       response.write(rrr); 
       response.end(rrr); 
      } 
    } 

    else{ 
     filePath='public'+request.url;//set relative file path 
    } 
    var absPath = './'+filePath; 
    serveStatic(request, response, cache, absPath);//serve the static file 

}); 

server.listen(4000, function(){ 
    console.log("Chatrooms server on port 4000"); 
    } 
); 

//read static files 
function serveStatic(request, response,cache, absPath){ 
    fs.readFile(absPath, function(err, data){ 
      sendFile(request, response, absPath, data); 

    }) 
} 

//serve file data 
function sendFile(request, response, filePath, fileContents){ 
    response.writeHead(
     200,{"content-type":mime.lookup(path.basename(filePath))} 
    ); 
    response.end(fileContents);  
} 

UPDATE Если удалить следующую часть из сервер, он работает нормально. До сих пор не могу понять, что происходит на

if (request.url == '/formHandler'){ 
     console.log("inside ajax if"); 
      console.log("inside formPro"); 
      if (request.method=="POST"){ 
       console.log("inside second ajax if"); 
       var rrr="rrr"; 
       response.writeHead(200,{"content-type":"text/plain"}); 
       response.write(rrr); 
       response.end(rrr); 
       console.log("finished sending rrr"); 
      } 
    } 
+1

'fs.createReadStream (filePath) .pipe (response)' и проверить свои ошибки – OrangeDog

+0

Плохие заголовки, проверьте свой конвейер –

ответ

1

Скорее всего fs.readFile возвращается ошибка, которую вы игнорируете.

При обслуживании статических файлов вы не должны читать все это в памяти, как это. Весь смысл Node.JS заключается в том, чтобы свободно перемещаться в режиме ввода-вывода.

Вместо этого используйте fs.createReadStream(filePath).pipe(response), хотя вам нужно будет добавить прослушиватель ошибок или запустить внутри домена.


UPDATE

Ошибки изобилуют - вы не вернете от любых случаев и просто довести до конца к следующему.

Т.е. вы можете позвонить как request.end(), так и serveStatic.

2

Я бы порекомендовал вам использовать модуль узла экспресса http://expressjs.com/ , который позволит вам писать пользовательский шаблон визуализацию, а также статические страницы, включая CSS и JS файлы изображений

просто установить экспресс используя

npm -g install express 
0

В ответ на @Dickens ответьте на это основное экспресс-приложение, которое обрабатывает вашу форму и все статические файлы в ./public/

//dependencies 
var http = require ('http'); 
var express = require('express'); // npm install --save express 
var app = express(); 

app.use(express.static(__dirname+'/public')); 

app.post('/formHandler', function(req, res){ 
    res.status(200).send('rrr'); 
}) 
var server = http.createServer(app); 

server.listen(4000, function(){ 
    console.log("Chatrooms server on port 4000"); 
}); 


// Test with: 
// curl -vX POST http://localhost:4000/formHandler 
// curl -vX GET http://localhost:4000/index.html 
Смежные вопросы