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!