Node.js サーバーオブジェクト
html文字列生成
httpモジュールをload
const http = require('http');
サーバーオブジェクト作成
var server = http.createServer(
(request, response) => {
response.setHeader('Content-Type', 'text/html');
response.setHeader('charset', 'utf-8');
let html = '';
html += '<html>';
html += '<body>';
html += 'Welocom to Node.js';
html += '</body>';
html += '</html>';
response.write(html);
response.end();
}
);
サーバーオブジェクトを待ち受け状態に
server.listen(3000);
htmlファイル使用
const http = require('http');
const fs = require('fs');
var server = http.createServer(
(request, response) => {
fs.readFile('./index.html', 'UTF-8',
(error, data) => {
response.writeHead(200, {'Content-Type': 'text/html'});
response.write(data);
response.end();
}
);
}
);
server.listen(3000);
テンプレートエンジン使用
EJS
EJSインストール
npm install ejs
クライアント
※index.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
～
</head>
<body>
<p><%=title%></p>
<%=message%>
</body>
</html>
サーバー
const http = require('http');
const fs = require('fs');
const ejs = require('ejs');
var server = http.createServer(setResponse);
server.listen(3000);
function setResponse(request, response){
テンプレートファイル読込
const page = fs.readFileSync('./index.ejs', 'utf8');
レンダリング
let content = ejs.render(page, {
title: 'Node.js',
message: 'Node.js',
});
レンダリング結果を出力
response.write(content);
response.end();
}
パーシャル
クライアント
※partial.ejs
<tr>
<th><%=id%></th>
<td><%=key%></td>
<td><%=val[0]%></td>
</tr>
※index.ejs
<!DOCTYPE html>
<html lang="ja">
<body>
<p><%=message%></p>
<table>
<% let id=0; %>
<% for(let key in data){ %>
パーシャルファイルをload
<%- include('partial', {id:++id, key:key, val:[data[key]]}) %>
<% } %>
</table>
</body>
</html>
サーバー
var server = http.createServer(setResponse);
server.listen(3000);
function setResponse(request, response){
const data = {
'JavaScript': 'Node.js',
'PHP': 'Laravel',
'Java': 'SpringBoot',
}
const page = fs.readFileSync('./index.ejs', 'utf8');
let content = ejs.render(page, {
message: 'POST',
data: data,
filename: 'partial',
});
response.write(content);
response.end();
}
Follow me!
