Node.JS et la gestion des CSS et JS

**Neewd** · 21/12/2013, 16h46

Bonjour,

Je viens de lire ce très bon tutoriel sur Node.js, trouvé sur dans les meilleurs cours et tutoriels pour apprendre Node.js

Je comprend maintenant parfaitement les routes, et autres gestionnaires de requêtes.
Mais par exemple, quand je demande la page "index.html" comme-ceci.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
fileStream.readFile( "../public/views" + pathName , "utf8" , function(error , file){
     if(error) {
          logWriter.writeInLog("Une erreur à été remontée : " + error , fileStream);
     }else{
          response.writeHead(200 , {"Content-Type" : "text/html" }); 
          response.write(file);
          response.end();
     }		
});

Ma page index.html se trouvant dans mon dossier "views" est celle-ci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>François Pageot</title>
 
	<!-- Laisons des fichiers CSS -->
	<link rel="stylesheet" href="../css/bootstrap.css">
	<link rel="stylesheet" href="../css/style.css">
</head>
<body>
 
	<div class="hero-unit">
		J'affichage ma page
	</div>
 
 
	<!-- Liaisons des fichiers Javascript -->
	<script src="../js/jquery.js"></script>
	<script src="../js/app/js"></script>
 
</body>
</html>

Code très simple qui embarque bootstrap, mais cependant, cela m'affiche bien mon texte, mais cela ne prend pas en compte le CSS qui se trouve dans bootstrap ou bien dans mon style.css.
Et pourtant c'est bien les bons chemins.

Ce serait possible avec express, mais je préfère maîtriser Node.js avant de passer sur un framework.

Comment cela est possible donc avec Node.js ?

Merci d'avance pour vos réponses !

**NoSmoking** · 21/12/2013, 17h51

Bonjour,
tu as, me semble t-il, plus un problème de chemin d'accès à tes différents fichiers CSS

**Neewd** · 21/12/2013, 18h12

Qu'entends tu par "chemin d'accès" ?

L'arborescence de mon projet s'effectue comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
- public 
   - css 
       - bootstrap.css
       - style.css
   - js 
       - app.js
       - jquery.js
   - views
       - index.html
-modules
   - router.js
   - requestHandler.js
   - server.js
-index.js

Quelque chose est à changé ?

**Neewd** · 21/12/2013, 18h29

Après ta réponse, j'ai creusé de ce côté là, en déboggant, en affichant les chemins que j'avais lors de l'exécution, j'ai enfin réussi mis le point sur ce qu'il fallait

Merci , en attente d'éventuels autres problème

**NoSmoking** · 22/12/2013, 08h15

...en affichant les chemins que j'avais lors de l'exécution,...

si tu pouvais laisser une indication sur la façon de résoudre cela pourrait en aider d'autres ce trouvant dans le même cas

**Neewd** · 22/12/2013, 16h58

Pas bête, j'ai été un peu la tête dans le guidon sur ce coup-ci.

Donc, j'ai créer une fonction qui permet de lire les fichiers CSS et JS quand une requête sur ces fichiers surviennent.
Seulement, j'avais simplement mis le "path" dans la fonction readFile, qui était donc : "/css/style.css".

D'après l'arborescence que j'ai, j'avais une erreur puisque mes fichiers CSS et JS se trouvent dans le dossier "public" , et non dans le dossier "modules".

J'ai donc le fichier html suivant. (du moins les links css)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">

Ainsi que la fonction readFile suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
fileStream.readFile("./public/" + pageDemandee, 'utf8', function (errors, contents) {
     if(errors){
          console.log(errors);
     }else{
          response.end(contents);
     }
});

J'espère que ça aidera des futurs néophytes comme moi.

**Mathrogue** · 16/04/2017, 19h05

MERCI !!

Node.JS et la gestion des CSS et JS

NodeJS

Discussions similaires

Partager

Partager