web-dev-qa-db-ja.com

Node.js HTMLを生成

データのリストを生成するJavaScriptプログラムを作成しました。以下の出力例:

output one 
output two 
output three 
...

ディスクに保存してブラウザで開くことができるHTMLファイルを生成できるようにしたいと思います。以下は、生成したいHTMLのサンプルです。

<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>

私はこれをやってみました:

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

しかし、ドキュメントオブジェクトが存在しないため、これは明らかに間違っています。

この質問は、特に得票率が高いことから理にかなっていると思います。再開できますか?

25
lufthansa747

Node.jsはブラウザーで実行されないため、documentオブジェクトを使用できません。実際、DOMツリーさえまったくありません。この時点で少し混乱している場合は、先に進む前に、 それについて詳しく読む ことをお勧めします。

あなたが望むことをするために選択できるいくつかの方法があります。


方法1:HTTP経由でファイルを直接提供する

ブラウザーでファイルを開くことについて書いたので、2段階のプロセスではなく、ファイルをHTTPサービスとして直接提供するフレームワークを使用してみませんか?これにより、コードがより動的になり、メンテナンスが容易になります(HTMLが常に最新であることに言及しません)。

そのためのフレームワークはたくさんあります:

あなたが望むことを行うことができる最も基本的な方法はこれです:

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

そして、ブラウザから_http://localhost:8080_を使用してこのHTMLにアクセスします。

Edit:小さい [〜#〜] http [〜#〜] で提供することもできます server 。)


方法2:ファイルのみを生成する

あなたがやろうとしているのが単にいくつかのHTMLファイルを生成することであるなら、それから単純に行きなさい。 IOファイルシステムへのアクセス、NodeにはAPIがあり、ドキュメント化された here )を実行します。

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

注:buildHtml関数はexactlyと同じ方法1


方法3:ファイルをstdoutに直接ダンプする

これは最も基本的なNode.js実装であり、出力自体を処理するために呼び出し側アプリケーションが必要です。 Node(つまりstdout))で何かを出力するには、console.log(message)を使用するのが最善の方法です。ここでmessageは任意の文字列またはオブジェクトなどです。

_var html = buildHtml();

console.log(html);
_

注:buildHtml関数はexactlyと同じ方法1(もう一度)

スクリプトが_html-generator.js_(たとえば)と呼ばれる場合、Linux/Unixベースのシステムでは、単に

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

結論

Nodeはモジュラーシステムであるため、buildHtml関数を独自のモジュール内に配置し、必要に応じてHTMLを処理するアダプターを記述することもできます。

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

var html = htmlBuilder(options);
...
_

Node.js用のJavaScriptを記述するときは、「クライアント側」ではなく「サーバー側」を考える必要があります。ブラウザを使用していない、またはV8エンジン以外のサンドボックスに限定されていない。

余分な読書、 npm について学びます。お役に立てれば。

56
Yanick Rochon

@ yanick-rochonの答えは正しいですが、目標を達成する最も簡単な方法は(動的に生成されたhtmlを提供する場合)です。

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

このようにすると、http://localhost:1337 htmlページが表示されます。

9
gfpacheco

静的ファイルを作成する場合は、 Node.js File System Libraryを使用して作成できます。ただし、データベースまたは同様のクエリの結果として動的ファイルを作成する方法を探している場合は、 [〜#〜] swig [〜#〜] のようなテンプレートエンジンが必要になります。これらのオプションに加えて、通常の方法でHTMLファイルをいつでも作成し、Node.jsで提供できます。そのためには、 Node.js File System を使用してHTMLファイルからデータを読み取り、それを応答に書き込むことができます。簡単な例は次のとおりです。

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

しかし、より便利なソリューションについては、 Express などのフレームワークを検討することをお勧めします。

4
ozantunca

ヒスイ+エクスプレスを使用できます。

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

上に「インデックス」とオブジェクト{title:「Home」}が表示されます。「インデックス」はHTMLで、オブジェクトはHTMLでレンダリングされるデータです。

1
Rodrigo Fonseca