nodejs無法提供靜態文件 - 下載它們

-1

我正在玩nodejs，創建一個簡單的服務器，也處理一些Ajax。當我去localhost:4000頁面不呈現，而是一個空文件被自動下載。它被命名爲「下載文件」，零字節且沒有擴展名。nodejs無法提供靜態文件 - 下載它們

我認爲我的客戶和我的服務器非常簡單。對不起，通用的問題，但我不明白爲什麼會發生這種情況。

預先感謝

客戶端 - 一個簡單的表格，併發送JSON型數據的XHR

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

來源

2015-06-12 slevin

'fs.createReadStream（filePath）.pipe（response）'，並檢查您的錯誤 – OrangeDog

錯誤的標題，請檢查您的管道 –

最有可能fs.readFile返回錯誤，你所忽略。

當提供靜態文件，你不應該看整個事情變成這樣的記憶。 Node.JS的重點是保持I/O的自由流動。

使用fs.createReadStream(filePath).pipe(response)相反，雖然你將需要添加一個錯誤監聽，或運行域內。

UPDATE

錯誤比比皆是 - 你沒有任何回報的情況下，只是貫徹到下一個。

即可以最終調用都request.end()和serveStatic。

來源

2015-06-12 16:21:39 OrangeDog

我會建議你使用使用節點Express模塊http://expressjs.com/ 這將允許你寫自定義模板渲染器以及靜態頁面，包括CSS和JS圖像文件

只需安裝快遞

npm -g install express

來源

2015-06-12 16:23:50 Dickens

以下是@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

來源

2015-06-12 17:02:26 Plato

nodejs無法提供靜態文件 - 下載它們

回答

相關問題