सीएसएस और जेएस के साथ मूल वेब पेज की सेवा के लिए node.js का उपयोग करना

मैं एक (पारंपरिक) सर्वर साइड स्क्रिप्टिंग (PHP) पृष्ठभूमि से आ रहा हूं और यह देखने के लिए नोड के साथ प्रयोग करने की कोशिश कर रहा हूं कि झगड़ा क्या है।सीएसएस और जेएस के साथ मूल वेब पेज की सेवा के लिए node.js का उपयोग करना

उद्देश्य: कुछ स्टाइल शीट्स और स्क्रिप्ट के साथ एक साधारण वेब दस्तावेज़ प्रस्तुत करते हैं।

मेरे Node.js स्क्रिप्ट:

var http = require('http'); 
var fs = require('fs'); 

fs.readFile('index.html', function (err, html) { 
    if (err) { 
     throw err; 
    }  
    http.createServer(function(request, response) { 
     response.writeHeader(200, {"Content-Type": "text/html"}); 
     response.write(html); 
     response.end(); 
    }).listen(1337, '127.0.0.1'); 
});

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset='utf-8'> 
     <title>Node.js test</title> 
     <link rel="stylesheet" media="screen" type="text/css" href="css/plugin.css" /> 
     <link rel="stylesheet" media="screen" type="text/css" href="css/xGrid.css" /> 
     <link rel="stylesheet" media="screen" type="text/css" href="css/jquery-ui/jquery-ui-1.10.1.custom.min.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
     <script src="js/slate.js"></script> 
     <script src="js/slate.portlet.js"></script> 
     <script src="js/slate.message.js"></script> 
     <script src="js/plugin.js"></script> 
    </head> 
    <body> 
     <h1 class="styled-h1">Test</h1> 
    </body> 
</html>

समस्या का सामना करना पड़ रहा हूँ

दो स्क्रिप्ट शामिल है गूगल से आ रही सीडीएन दस्तावेज़ को ठीक से लोड कर रहे हैं। हालांकि, मेरे स्थानीय फाइल सिस्टम से बुलाए जाने वाले हर दूसरे स्टाइल शीट या स्क्रिप्ट को text/html के रूप में व्याख्या किया जाता है और इसलिए इसका कोई प्रभाव नहीं पड़ता है।

enter image description here

मैं समझने के लिए क्यों यह हो रहा है चाहता हूँ: यहाँ गूगल क्रोम कंसोल से एक स्क्रीनशॉट है।

पीएस: मुझे पता है कि मैं चीजों को आसान बनाने के लिए एक्सप्रेस जैसे ढांचे का उपयोग कर सकता हूं लेकिन मैं पहले बुनियादी सिद्धांतों को पकड़ना चाहता हूं।

स्रोत

2013-07-04 karancan

जैसे कुछ बात कर सकते हैं मैं एक मॉड्यूल cachemere कहा जाता है जो आप यह कर देता है लिखा था। यह स्वचालित रूप से आपके सभी संसाधनों को भी कैश करता है। लिंक: https://github.com/topcloud/cachemere – Jon

सरल: आप text/html को Content-Type हैडर स्थापित कर रहे हैं, हमेशा। इसके अलावा, यह हमेशा आपकी index.html फ़ाइल की सेवा करेगा। देखो:

fs.readFile('index.html', function (err, html) { 
    if (err) { 
     throw err; 
    }  
    http.createServer(function(request, response) { 
     response.writeHeader(200, {"Content-Type": "text/html"}); // <-- HERE! 
     response.write(html); // <-- HERE! 
     response.end(); 
    }).listen(1337, '127.0.0.1'); 
});

आप यूआरएल को पार्स चाहिए, ऊपर देखो क्या फ़ाइल की आवश्यकता करना चाहते हैं, उसकी सामग्री पढ़ सकते हैं और उन्हें जवाबी कार्रवाई के लिए लिख यदि वह मौजूद है, अन्यथा एक 404 त्रुटि सेवा करते हैं। इसके अलावा, आपको सही शीर्षलेख सेट करने की आवश्यकता होगी।

तो, क्या आप अभी भी इसे अपने आप करना चाहते हैं?
कम से कम, send जैसी कुछ कोशिश करें, जो एक मूल स्थैतिक फ़ाइल सर्वर है।

स्रोत

2013-07-04 22:13:09 gustavohenke

आपका सर्वर एक अद्वितीय प्रतिक्रिया के साथ सभी अनुरोधों का जवाब दे रहा है ... जब ब्राउज़र सीएसएस और स्क्रिप्ट के लिए अनुरोध करता है, तो आपका सर्वर केवल एक ही चीज़ जानता है !!!

स्रोत

2013-07-04 22:07:00 guy777

आपको लगता है कि केवल पर ध्यान दिए बिना क्या पथ या मापदंडों भेजा जाता है की एक बात और एक चीज़ करने वाला वेब सर्वर पैदा कर रहे: यह MIME प्रकार text/html के साथ अपने HTML फ़ाइल index.html कार्य करता है।

सीएसएस फाइलों के लिए अनुरोध सापेक्ष पथ अनुरोध हैं, यानी जब वेब ब्राउज़र css/plugin.css लोड करने के लिए निर्देश देखता है तो यह आपके वेब सर्वर को एक नए पथ से कॉल करता है; लेकिन आपका वेब सर्वर पथ को अनदेखा करता है और फिर एमआईएमई प्रकार text/html के साथ index.html लौटाता है। आपका वेब ब्राउज़र गलत MIME प्रकार के बारे में त्रुटियों को फेंक देता है लेकिन यह आपको यह नहीं बताता था कि आपने अभी index.html लोड किया है।

पुष्टि करने के लिए अपने आप को नीचे दिए गए लिंक पर क्लिक करें के लिए: http://127.0.0.1:1337/css/plugin.css

स्रोत

2013-07-04 22:07:11

यह डाउनवॉट क्यों किया गया था? या तो यह गलत है, और डाउनवॉटर को स्पष्टीकरण देना चाहिए, या यह सही है और इसे शायद ऊपर उठाया जाना चाहिए। – mickey

यह एकमात्र सहायक टिप्पणी थी। स्पष्ट करने के लिए आपको धन्यवाद! – Kafeaulait

ओर इशारा करते हुए contentType पाठ में/HTML के बजाय, आप इस का उपयोग करते हुए पथ मॉड्यूल

var filePath = req.url; 
if (filePath == '/') 
    filePath = '/index.html'; 

filePath = __dirname+filePath; 
var extname = path.extname(filePath); 
var contentType = 'text/html'; 

switch (extname) { 
    case '.js': 
     contentType = 'text/javascript'; 
     break; 
    case '.css': 
     contentType = 'text/css'; 
     break; 
} 


fs.exists(filePath, function(exists) { 

    if (exists) { 
     fs.readFile(filePath, function(error, content) { 
      if (error) { 
       res.writeHead(500); 
       res.end(); 
      } 
      else {     
       res.writeHead(200, { 'Content-Type': contentType }); 
       res.end(content, 'utf-8');     
      } 
     }); 
    }

स्रोत

2014-06-17 09:48:51

सीएसएस और जेएस के साथ मूल वेब पेज की सेवा के लिए node.js का उपयोग करना

उत्तर

संबंधित मुद्दे