Verwendung von node.js um einfache Webseite mit CSS und JS bereitzustellen enthält

Ich komme aus einem (traditionellen) Server Side Scripting (PHP) Hintergrund und versuche mit Node zu experimentieren, um zu sehen, worum es geht.Verwendung von node.js um einfache Webseite mit CSS und JS bereitzustellen enthält

Ziel: servieren Sie ein einfaches Web-Dokument mit einigen Stylesheets und Skripten darauf.

Mein node.js Skript:

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>

Das Problem, das ich bin vor:

Die beiden Skript enthält aus dem Google kommt CDN werden in das Dokument eingefügt. Jedes andere Stylesheet oder Skript, das von meinem lokalen Dateisystem aufgerufen wird, wird jedoch als text/html interpretiert und hat daher nicht den beabsichtigten Effekt. Hier ist ein Screenshot von Google Chrome Konsole:

enter image description here

ich verstehen will, warum dies geschieht.

PS: Ich weiß, dass ich ein Framework wie Express verwenden kann, um Dinge einfacher zu machen, aber ich möchte zuerst die Grundlagen bekommen.

Quelle

2013-07-04 karancan

Ich schrieb ein Modul Cachemere genannt, die Sie dies tun können. Es speichert auch automatisch alle Ihre Ressourcen. Link: https://github.com/topcloud/cachemere – Jon

Ganz einfach: Sie Content-Type Header text/html sind Einstellung, immer. Es wird auch immer dienen Ihre Datei index.html. Schauen Sie:

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

Sie sollten die URL analysieren, schauen, was Datei, die Sie möchten, benötigen, lesen Sie dessen Inhalt und schreibe sie auf die Antwort, wenn es vorhanden ist, sonst dazu dienen, ein 404-Fehler. Außerdem müssen Sie die richtigen Header festlegen.

Also, willst du es immer noch selbst machen?
Versuchen Sie zumindest etwas wie send, die eine grundlegende statische Dateiserver ist.

Quelle

2013-07-04 22:13:09 gustavohenke

Ihr Server reagiert auf alle Anfragen mit einer eindeutigen Antwort ... Wenn der Browser nach CSS und Skripten fragt, tut Ihr Server das einzige, was er weiß !!!

Quelle

2013-07-04 22:07:00 guy777

Sie erstellen einen Web-Server, der eine Sache und eine Sache tut nur unabhängig von welchem Pfad oder Parameter gesendet: Sie dient der HTML-Datei index.html mit MIME-Typ text/html.

Die Anforderungen für CSS-Dateien sind relative Pfadanforderungen, d. H. Wenn der Webbrowser die Anweisung zum Laden css/plugin.css sieht, ruft er Ihren Webserver mit einem neuen Pfad auf; aber Ihr Webserver ignoriert den Pfad und gibt nur index.html erneut mit MIME-Typ text/html zurück. Ihr Webbrowser gibt Fehler über den falschen MIME-Typ aus, aber was er Ihnen nicht mitteilte, war, dass Sie gerade index.html erneut geladen haben.

Um zu bestätigen, für sich selbst auf den folgenden Link klicken: http://127.0.0.1:1337/css/plugin.css

Quelle

2013-07-04 22:07:11

Warum wurde das abgelehnt? Entweder das ist falsch, und der Downvoter sollte klären, oder das ist richtig und es sollte wahrscheinlich upvoted werden. – mickey

Dies war der einzige hilfreiche Kommentar hier. Danke für das Aufklären! – Kafeaulait

Anstatt zeigen content auf text/html, Sie können wie diese mit Pfadmodul ein Ding tun

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

Quelle

2014-06-17 09:48:51

Verwendung von node.js um einfache Webseite mit CSS und JS bereitzustellen enthält

Antwort

Verwandte Themen