web-dev-qa-db-fra.com

Node.js Générer du 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 
...

J'aimerais pouvoir générer un fichier HTML qui peut être enregistré sur un disque et ouvert avec un navigateur. Vous trouverez ci-dessous un exemple du code 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 c'est clairement faux puisque l'objet document n'existe pas.

Je pense que cette question a du sens surtout compte tenu du nombre de votes positifs reçus. peut-il être rouvert?

javascripthtmlnode.js
20
lufthansa747

Node.js ne s'exécute pas dans un navigateur. Par conséquent, aucun objet document n'est disponible. En fait, vous n'aurez même pas d'arborescence DOM. Si vous êtes un peu confus à ce stade, je vous encourage à pour en savoir plus avant d’aller plus loin.

Vous pouvez choisir parmi quelques méthodes pour 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 n'utilisez-vous pas un framework qui servira le fichier directement en tant que service HTTP, au lieu de suivre un processus en deux étapes? De cette façon, votre code sera plus dynamique et facilement maintenable (sans mentionner votre code HTML toujours à jour).

Il existe de nombreux cadres pour cela:

La manière 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><head>' + header + '</head><body>' + body + '</body></html>';
};

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

(Edit: vous pouvez aussi les servir avec un petit HTTPserveur .)

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

Si vous essayez simplement de générer des fichiers HTML, optez pour la simplicité. Pour effectuer un accès IO sur le système de fichiers, Node dispose d'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 identique à celle de Méthode 1.

Méthode 3: Déposer le fichier directement dans stdout

Ceci est l'implémentation Node.js la plus élémentaire et nécessite que l'application appelante gère la sortie elle-même. Pour sortir quelque chose dans Node (par exemple, sur stdout), le meilleur moyen consiste à utiliser console.log(message) où message est une chaîne, un objet, etc.

var html = buildHtml();

console.log(html);

Remarque: La fonction buildHtml est exactement identique à celle de la méthode Méthode 1 (à nouveau)

Si votre script s'appelle html-generator.js (par exemple), sur un système Linux/Unix, il suffit de faire

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

Conclusion

Comme Node est un système modulaire, vous pouvez même insérer la fonction buildHtml dans son propre module et simplement écrire des adaptateurs pour gérer le code HTML comme vous le souhaitez. Quelque chose comme

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

var html = htmlBuilder(options);
...

Vous devez penser "côté serveur" et non pas "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.

45
Yanick Rochon

Bien que la réponse de @ yanick-rochon soit correcte, le moyen le plus simple d'atteindre votre objectif (s'il s'agit de servir un fichier html généré de manière dynamique) 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 obtenez votre page HTML.

8
gfpacheco

Si vous voulez créer des fichiers statiques, vous pouvez utiliser Node.js File System Library pour le faire. Mais si vous cherchez un moyen de créer des fichiers dynamiques à la suite de votre base de données ou de requêtes similaires, vous aurez besoin d'un moteur de template tel que SWIG . Outre ces options, vous pouvez toujours créer des fichiers HTML comme vous le feriez normalement et les servir via Node.js. Pour ce faire, vous pouvez lire les données de fichiers HTML avec Node.js File System et les écrire dans la 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 cadres tels que Express pour des solutions plus utiles.

3
ozantunca

Vous pouvez utiliser jade + express: 

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

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

1
Rodrigo Fonseca