Javascript Girl
  1. Javascript Girl
  3. Node.js Générer html
Intereting Posts
Les feux d'événement marqueur marqueur au mauvais moment Est-ce une mauvaise pratique d'accéder à l'objet arguments à chaque fonction prenant des paramètres? Node.js: Comment écrire les valeurs d'entrée d'un formulaire dans un fichier JSON lorsque vous appuyez sur le bouton de soumission? Réactivité de l'interface utilisateur et javascript Envoi de plusieurs options de case à cocher D3.js interpolation de matrice 3D La création Javascript / jQuery DOM est-elle sûre jusqu'à ce qu'elle soit ajoutée au document? Comment changer le temps d'intervalle sur le carrousel bootstrap? Quelle est la différence entre "javascript:", "#" et "javascript: false" dans l'attribut iframe.src Pourquoi cette regex javascript ne fonctionne pas? Retournez le résultat de la promesse au lieu de Promise in Nodejs Comment servir les fichiers image en utilisant le cadre express dans node.js? Déplacer HTML5 Canvas avec une image d'arrière-plan Constructeur à l'intérieur du constructeur – mauvaise pratique? Calculer la largeur du texte avec JavaScript

Node.js Générer html

J'ai créé un programme JavaScript qui génère une liste de données. Exemple de sortie ci-dessous: 

output one output two output three ...

Je voudrais pouvoir générer un fichier HTML qui peut être sauvegardé sur le disque et ouvert avec un navigateur. Voici un échantillon du HTML que je voudrais générer. 

 <html> <head> </head> <body> <table id="history_table"> <tr> <td>header 1</td> <td>header 2</td> <td>header 3</td> </tr> <tr> <td>output one</td> </tr> ... </table> </body> </html>

J'ai essayé de faire ceci: 

 var htmlDoc = document.createElement("HMTL"); htmlDoc.innerhtml('<head></head><body>...</body>');

Mais ceci est clairement erroné, car l'objet du document n'existe pas.

Node.js ne s'exécute pas dans un navigateur, vous n'aurez donc pas d'objet de document disponible. En fait, vous n'aurez même pas d'arbre DOM. Si vous êtes un peu confus à ce stade, je vous encourage à en lire plus avant d'aller plus loin.

Il existe quelques méthodes dont vous pouvez choisir de faire ce que vous voulez.

Méthode 1: Servir le fichier directement via HTTP

Parce que vous avez écrit sur l'ouverture du fichier dans le navigateur, pourquoi ne pas utiliser un cadre qui servira le fichier directement comme un service HTTP, au lieu d'avoir un processus en deux étapes? De cette façon, votre code sera plus dynamique et facilement maintenable (sans mentionner votre HTML toujours à jour).

Il existe de nombreux cadres pour cela:

  • Http (Node native API)
  • Relier
  • Koa
  • Express (utilisant Connect)
  • Sails (build on Express)
  • Geddy
  • CompoundJS
  • Etc.

La façon la plus simple de faire ce que vous voulez est la suivante: 

 var http = require('http'); http.createServer(function (req, res) { var html = buildHtml(req); res.writeHead(200, { 'Content-Type': 'text/html', 'Content-Length': html.length, 'Expires': new Date().toUTCString() }); res.end(html); }).listen(8080); function buildHtml(req) { var header = ''; var body = ''; // concatenate header string // concatenate body string return '<!DOCTYPE html>' + '<html><header>' + header + '</header><body>' + body + '</body></html>'; };

Et accédez à ce HTML avec http://localhost:8080 depuis votre navigateur.

( Modifier : vous pouvez également les servir avec un petit serveur HTTP .)

Méthode 2: générer le fichier uniquement

Si ce que vous essayez de faire, c'est simplement générer des fichiers HTML, passez simplement. Pour effectuer l'accès IO sur le système de fichiers, Node a une API pour cela, documentée ici . 

 var fs = require('fs'); var fileName = 'path/to/file'; var stream = fs.createWriteStream(fileName); stream.once('open', function(fd) { var html = buildHtml(); stream.end(html); });

Remarque: la fonction buildHtml est exactement la même que dans la méthode 1 .

Méthode 3: Dumping du fichier directement dans stdout

Il s'agit de la mise en œuvre Node.js la plus simple et nécessite l'application appelante pour gérer la sortie elle-même. Pour sortir quelque chose dans Node (c.-à-d. Stdout), la meilleure façon est d'utiliser console.log(message) où le message est une chaîne ou un objet, etc. 

 var html = buildHtml(); console.log(html);

Remarque: la fonction buildHtml est exactement la même que dans la méthode 1 (à nouveau)

Si votre script s'appelle html-generator.js (par exemple), dans le système Linux / Unix, faites simplement 

 $ node html-generator.js > path/to/file

Conclusion

Parce que Node est un système modulaire, vous pouvez même mettre la fonction buildHtml l'intérieur de son propre module et écrire simplement des adaptateurs pour gérer le HTML comme vous le souhaitez. Quelque chose comme 

 var htmlBuilder = require('path/to/html-builder-module'); var html = htmlBuilder(options); ...

Vous devez penser "server-side" et non "côté client" lors de l'écriture de JavaScript pour Node.js; Vous n'êtes pas dans un navigateur et / ou limité à un bac à sable, autre que le moteur V8.

Lecture supplémentaire, en savoir plus sur npm . J'espère que cela t'aides.

Bien que la réponse @ yanick-rochon soit correcte, la façon la plus simple d'atteindre votre objectif (si elle sert à un HTML généré dynamiquement) est: 

 var http = require('http'); http.createServer(function (req, res) { res.write('<html><head></head><body>'); res.write('<p>Write your HTML content here</p>'); res.end('</body></html>'); }).listen(1337);

De cette façon, lorsque vous naviguez sur http://localhost:1337 vous obtiendrez votre page html.

Si vous souhaitez créer des fichiers statiques, vous pouvez utiliser Node.js File System Library pour faire cela. Mais si vous cherchez un moyen de créer des fichiers dynamiques à la suite de votre base de données ou des requêtes similaires, vous aurez besoin d'un moteur de modèle comme SWIG . Outre ces options, vous pouvez toujours créer des fichiers HTML comme vous le feriez normalement et les servir sur Node.js. Pour ce faire, vous pouvez lire des données à partir de fichiers HTML avec Node.js File System et l'écrire en réponse. Un exemple simple serait: 

 var http = require('http'); var fs = require('fs'); http.createServer(function (req, res) { fs.readFile(req.params.filepath, function (err, content) { if(!err) { res.end(content); } else { res.end('404'); } } }).listen(3000);

Mais je vous suggère d'examiner certains frameworks comme Express pour des solutions plus utiles.

Vous pouvez utiliser jade + express: 

 app.get('/', function (req, res) { res.render('index', { title : 'Home' } ) });

Ci-dessus, vous voyez 'index' et un objet {title: 'Home'}, 'index' est votre html et l'objet est vos données qui seront rendues dans votre html.