À l'aide de node.js pour servir de base page web avec les CSS et JS comprend

Je viens d'une (traditionnel) des scripts côté serveur (PHP) à fond et suis en train d'expérimenter avec le Noeud de voir ce que le bruit est tout au sujet.

Objectif: servir un simple document web avec quelques feuilles de style et scripts.

Mon node.js script:

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>

Le problème, je suis confronté:

Les deux script comprend en provenance de Google CDN sont chargés sur le document d'amende. Cependant, chaque autre feuille de style ou un script appelé à partir de mon système de fichier local interprété comme text/html et donc ne pas avoir l'effet escompté. Voici une capture d'écran de Google Chrome console:

À l'aide de node.js pour servir de base page web avec les CSS et JS comprend

Je veux comprendre pourquoi ce qui se passe.

PS: je sais que je peux utiliser un framework comme Exprès pour rendre les choses plus faciles, mais je veux obtenir une prise de les bases en premier.

J'ai écrit un module appelé Cachemere qui vous permet de le faire. Il a également place automatiquement l'ensemble de vos ressources. Lien: github.com/topcloud/cachemere

OriginalL'auteur karancan | 2013-07-04

9

Simple: vous êtes à la définition de la Content-Type en-tête de text/html, toujours. De plus, il sera toujours servir votre index.html fichier. Look:
```
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');
});
```
Vous devez analyser l'URL, cherchez du fichier que vous souhaitez utiliser, lire son contenu et de les écrire dans la réponse, si elle existe, sinon servir une erreur 404. Aussi, vous aurez besoin de régler les paramètres des en-têtes.

Donc, voulez-vous toujours de le faire à votre propre?

Au moins, essayez quelque chose comme envoyer, qui est une base statique du serveur de fichiers.

OriginalL'auteur gustavohenke

Plutôt que de pointer du doigt contentType texte/html, Vous pouvez faire quelque chose comme cela en utilisant le chemin d'accès du module

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

OriginalL'auteur Psyche Genie

1

De la création d'un serveur web qui ne fait qu'une chose et une chose seulement quel que soit le chemin d'accès ou des paramètres sont envoyés: il sert votre fichier HTML index.html avec type MIME text/html.

La demande pour les fichiers CSS sont relatifs demandes de chemin, c'est à dire lorsque le navigateur voit l'instruction à charge css/plugin.css il appelle votre serveur web avec un nouveau chemin; mais votre serveur web ignore le chemin et retourne juste index.html à nouveau avec le type MIME text/html. Votre navigateur web jette les erreurs sur le mauvais type MIME mais ce qu'il ne vous dit pas, c'est que vous venez de charger index.html de nouveau.

À confirmer par vous-même, cliquez sur le lien suivant: http://127.0.0.1:1337/css/plugin.css

Pourquoi était-ce downvoted? Soit c'est incorrect, et la downvoter devrait se clarifier, ou c'est exact, et il devrait probablement être upvoted.
C'était le seul commentaire ici. Merci pour la clarification!

OriginalL'auteur PP.
0

Votre serveur est de répondre à toutes les demande avec une réponse unique... Lorsque le navigateur demande pour les CSS et les Scripts, votre serveur de faire la seule chose qu'il sait !!!

OriginalL'auteur guy777

Vous devez vous connecter pour publier un commentaire.