Utilizzo di node.js per pubblicare la pagina Web di base con CSS e JS include

Provengo da uno sfondo (tradizionale) di script side (PHP) e sto provando a sperimentare con Node per vedere di cosa si tratta.Utilizzo di node.js per pubblicare la pagina Web di base con CSS e JS include

Obiettivo: pubblicare un semplice documento Web con alcuni fogli di stile e script.

Il mio script 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>

Il problema che sto affrontando:

I due script include proveniente da Google CDN sono caricati sulla multa del documento. Tuttavia, ogni altro foglio di stile o script chiamato dal mio file system locale viene interpretato come text/html e quindi non ha l'effetto desiderato. Ecco uno screenshot dalla console di Google Chrome:

enter image description here

voglio capire perché questo sta accadendo.

PS: So che posso usare un framework come Express per semplificare le cose, ma voglio prima ottenere i concetti fondamentali.

fonte

2013-07-04 karancan

ho scritto un modulo chiamato cachemere, che ti permette di fare questo. Memorizza automaticamente tutte le tue risorse in cache. Link: https://github.com/topcloud/cachemere – Jon

semplice: si sta impostando l'intestazione Content-Type a text/html, sempre. Inoltre, sarà sempre pubblicare il tuo file index.html. Guardate:

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

Si dovrebbe analizzare l'URL, guardare in alto quello file che si desidera richiedere, leggerne il contenuto e li scrive alla risposta se esiste, altrimenti servire un errore 404. Inoltre, dovrai impostare le intestazioni corrette.

Quindi, vuoi ancora farlo da solo?
Almeno, provare qualcosa come send, che è un file server statico di base.

fonte

2013-07-04 22:13:09 gustavohenke

Il server risponde a tutte le richieste con una risposta univoca ... Quando la richiesta del browser per CSS e script, il server fa l'unica cosa che sa !!!

fonte

2013-07-04 22:07:00 guy777

si sta creando un web server che fa una cosa e una cosa sola indipendentemente da quale strada o parametri vengono inviati: serve il file HTML index.html con il tipo MIME text/html.

Le richieste di file CSS sono relative richieste di percorso, vale a dire quando il browser Web visualizza le istruzioni per caricare css/plugin.css chiama il server Web con un nuovo percorso; ma il tuo server web ignora il percorso e restituisce semplicemente index.html di nuovo con il tipo MIME text/html. Il tuo browser web genera errori relativi al tipo MIME sbagliato ma ciò che non ti ha detto è che hai appena caricato di nuovo index.html.

Per confermare per voi stessi, cliccate sul seguente link: http://127.0.0.1:1337/css/plugin.css

fonte

2013-07-04 22:07:11

Perché è stato downvoted? O questo non è corretto, e il downvoter dovrebbe chiarire, o questo è corretto e dovrebbe probabilmente essere upvoted. – mickey

Questo è stato l'unico commento utile qui. Grazie per il chiarimento! – Kafeaulait

Piuttosto che puntare contentType a text/html, Si può fare qualche cosa di simile utilizzando il modulo percorso

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

fonte

2014-06-17 09:48:51

Utilizzo di node.js per pubblicare la pagina Web di base con CSS e JS include

risposta

Problemi correlati