【Node.js】 htmlファイルを読み込んで画面を表示しよう。
2017.01.09Node.js
前回は画面(ブラウザ)に表示する内容を “.write” メソッドに記載していました。
今回は画面自体を読み込んで表示します。
プログラム構成として、画面と処理は分けるという考えをするはずです。
画面の作成
server.jsと同じディレクトリにhtmlファイルを作成します。
|
1 2 3 |
<html> <h1>this is test.</h1> </html> |
server.jsの修正
以下の通り、プログラムを修正します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; var server = http.createServer(); server.on('request', doRequest); // ファイルモジュールを読み込む var fs = require('fs'); // リクエストの処理 function doRequest(req, res) { // ファイルを読み込んだら、コールバック関数を実行する。 fs.readFile('./test.html', 'utf-8' , doReard ); // コンテンツを表示する。 function doReard(err, data) { res.writeHead(200, {'Content-Type': 'text/html'}); res.write(data); res.end(); } } server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); }); |
以降、修正箇所について説明します。
ファイルモジュール読み込み
htmlファイルを読み込むために、Node.jsのファイルモジュールを読み込みます。
|
1 |
var fs = require('fs'); |
ファイル読み込み
ファイル読み込みメソッドを記載します。
|
1 |
fs.readFile('./test.html', 'utf-8' , doReard ); |
第一引数に読込先ファイルのパスを指定して下さい。なおカレントから指定する為、’./～’と記載します。
第二引数は文字コードを指定下さい。
第三引数はコールバック関数を指定します。
このコールバック関数は第一引数にエラー、第二引数に読み込んだデータを指定します。
以下に、コールバック関数を記載します。
|
1 2 3 4 5 6 |
// コンテンツを表示する。 function doReard(err, data) { res.writeHead(200, {'Content-Type': 'text/html'}); res.write(data); res.end(); } |
なお、コンテンツタイプはhtmlにして下さい。
実行
Node.jsが実行されている場合はctr + cで停止して下さい。
Node server.js で実行し、http://127.0.0.1:3000へブラウザよりアクセスしましょう。
this is test. が表示されるはずです。
以上です。
