Nodeをちゃんと学ぶ -フォーム編-

こんにちは、なかにしです。
今回はフォームについてやっていきます。

前回はGetのみだったので、Postもガンガン使ってくよ～

POSTの受け取り方
フォームを作る
値を受け取って表示
動作確認

POSTの受け取り方

簡単です。

「request.method」にリクエスト情報が入るので、
それがGETかPOSTかで処理を分けてあげればOKです。

フォームを作る

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <h1>
      <%= title %>
    </h1>

    <form method="post" action="/form">
      <h2>これはフォームです。</h2>
      <label for="name">名前</label>
      <input type="text" id="name" name="name">
      <input type="submit" value="Go!!" />
    </form>
  </body>

</html>

雑なフォームを作りました。
名前を入力すると、「/form」に「POST」でアクセスします。

Node側も変更します。

const http = require("http");
const fs = require("fs");
const ejs = require("ejs");

// ejsを読み込む
const template = fs.readFileSync("./sample.ejs", "utf-8");

// ルーティングに対して表示するものを書く
const routes = {
  "/": {
    title: "こんちわ～",
  },
  "/form": {
    title: "Nice Submit!!",
  },
  "/get": {
    title: "Getで来るなや",
  },
};

// サーバーを作る
const server = http.createServer();

// サーバーに対して何をするか書く
server.on("request", function (request, response) {
  // URLを取得
  const url = request.url;

  // codeを決めて中身を書く
  const writeContent = (code) => {
    response.writeHead(code, { "content-Type": "text/html" });
    response.write(content);
    response.end();
  };

  let content = "";

  switch (url) {
    case "/":
      content = ejs.render(template, {
        title: routes[url].title,
      });
      writeContent(200);
      break;

    case "/form":
      if (request.method === "POST") {
        content = ejs.render(template, {
          title: routes[url].title,
        });
        writeContent(200);
        break;
      } else {
        content = ejs.render(template, {
          title: routes["/get"].title,
        });
        writeContent(200);
        break;
      }

    default:
      content = ejs.render(template, {
        title: "Page Not Found",
      });
      writeContent(404);
      break;
  }
});

// サーバーを8080で起動
server.listen(8080);

前回とほぼ同じですが、「/form」「/get」というルーティングを追加しました。

POSTで「/form」に来たときは「Nice Submit!!」を表示、
GETで「/form」に来たときは「Getで来るなや」とガチギレします。

動作確認

値を受け取って表示

POSTで受け取った値を表示します。
とりあえず表示する用の「content」変数を作ります。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <h1>
      <%= title %>
    </h1>
    <p>
      <%= content %>
    </p>

    <form method="post" action="/form">
      <h2>これはフォームです。</h2>
      <label for="name">名前</label>
      <input type="text" id="name" name="name">
      <input type="submit" value="Go!!" />
    </form>
  </body>

</html>

server.jsも修正します。

POSTで来た値を処理する為、「querystring」というのを使用します。

const http = require("http");
const fs = require("fs");
const ejs = require("ejs");
const qs = require("querystring");

// ejsを読み込む
const template = fs.readFileSync("./sample.ejs", "utf-8");

// ルーティングに対して表示するものを書く
const routes = {
  "/": {
    title: "こんちわ～",
    content: "なんもないよ",
  },
  "/form": {
    title: "Nice Submit!!",
    content: "",
  },
  "/get": {
    title: "Getで来るなや",
    content: "帰れ！！",
  },
};

// サーバーを作る
const server = http.createServer();

// サーバーに対して何をするか書く
server.on("request", function (request, response) {
  // URLを取得
  const url = request.url;

  // codeを決めて中身を書く
  const writeContent = (code) => {
    response.writeHead(code, { "content-Type": "text/html" });
    response.write(content);
    response.end();
  };

  let content = "";

  switch (url) {
    case "/":
      content = ejs.render(template, {
        title: routes[url].title,
        content: routes[url].content,
      });
      writeContent(200);
      break;

    case "/form":
      if (request.method === "POST") {
        let body = "";
        request.on("data", function (data) {
          body += data;
        });
        request.on("end", function () {
          const post = qs.parse(body);

          content = ejs.render(template, {
            title: routes[url].title,
            content: post.name,
          });
          writeContent(200);
        });
        break;
      } else {
        content = ejs.render(template, {
          title: routes["/get"].title,
          content: routes["/get"].content,
        });
        writeContent(200);
        break;
      }

    default:
      content = ejs.render(template, {
        title: "Page Not Found",
        content: "見せられるものはない！",
      });
      writeContent(404);
      break;
  }
});

// サーバーを8080で起動
server.listen(8080);

ざっくり解説すると、
POSTで来た値を「request.on(“data”)」で取得し、
それを「querystring」でパース。

取り出した中身をcontentとして突っ込み、テンプレートで表示。
といった感じです。