MVC は、Model View Controller の略です。

Model がデータ取扱の部分にあたり、View がブラウザを表示する部分にあたります。

Controller は、Model と View を繋げる役割にあたります。

コードは、前回のコードを利用します。

views/index.ejs

<!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><%= pageTitle %></title>
  </head>
  <body>
    <main>
      <h1>メニュー</h1>
      <p>メニュー一覧</p>
      <% if(menus.length > 0) { for (let menu of menus){ %>
      <p><%= menu.menuTitle %></p>
      <%} %> <% } else { %>
      <p>注文がありません</p>
      <% } %>
    </main>
  </body>
</html>

views/menu.ejs

<!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" />
    <link rel="stylesheet" href="/css/styles.css" />
    <title><%= pageTitle %></title>
  </head>
  <body>
    <main>
      <form action="/menu" method="POST">
        <input type="text" name="title" />
        <button type="submit">メニューを追加する</button>
      </form>
    </main>
  </body>
</html>

index.js

const express = require("express");
const app = express();
const path = require("path");

app.set("view engine", "ejs");
app.set("views", "views");

const menuRoutes = require("./routes/index.js");
const menus = require("./routes/menu.js");

app.use(express.urlencoded({ extended: true }));

app.use(express.static(path.join(__dirname, "public")));

app.use("/", menus.routes);
app.use(menuRoutes);

app.use((req, res, next) => {
  res.status(404).send("<h1>ページが見つかりません</h1>");
});

app.listen(8000, () => console.log("Server is running ..."));

routers/menu.js

const express = require("express");
const router = express.Router();
const path = require("path");

const menus = [];

router.get("/menu", (req, res, next) => {
  res.render("menu", { pageTitle: "メニュー追加" });
});

router.post("/menu", (req, res, next) => {
  menus.push({ menuTitle: req.body.title });
  res.redirect("/");
});

exports.routes = router;
exports.menus = menus;

routes/index.js

const express = require("express");
const router = express.Router();
const path = require("path");

const menuData = require("./menu");

router.get("/", (req, res, next) => {
  console.log(menuData.menus);
  res.render("index", {
    pageTitle: "メニュー一覧",
    menus: menuData.menus,
  });
});

module.exports = router;

routes フォルダの中の index.js や menu.js にある、req, res, nextを、controller として管理します。

まずは、controllers フォルダを作成し、menus.js を作成します。

menu にある router.get の req, res, next の部分をコピーして、controller フォルダの menus.js に貼り付けます。

(req, res, next) => {
  res.render("menu", { pageTitle: "メニュー追加" });
};

貼り付けたコードを getAddMenu 関数としてエクスポートします。

exports.getAddMenu = (req, res, next) => {
  res.render("menu", { pageTitle: "メニュー追加" });
};

menu.js に menus.js を呼び出します。

const menuController = require("../controllers/menus");

menu.js でコピーした部分に、geaAddMenu をインポートします。

router.get("/menu", menuController.getAddMenu);

menu.js のrouter.getrouter.postと同様に修正します。

この時、menu.js のconst menus = [];を、menus.js にコピーします。

controllers/menus.js

const menus = [];

exports.postAddMenu = (req, res, next) => {
  menus.push({ menuTitle: req.body.title });
  res.redirect("/");
};

routes/menu.js

router.post("/menu", menuController.postAddMenu);

exports.routes = router;exports.menus = menus;を削除し、module.exports = router;を入力します。

routes/index.js の router.get の部分も routes/menu.js と同様に修正します。

controllers/menus.js

exports.getAddMenus = (req, res, next) => {
  res.render("index", {
    pageTitle: "メニュー一覧",
    menus,
  });
};

routes/index.js

const menuController = require("../controllers/menus");

router.get("/", menuController.getAddMenus);

index.js の routes を修正します。

const menuRoutes = require("./routes/index.js");
const menus = require("./routes/menu.js");

app.use("/", menus);
app.use(menuRoutes);

サーバーを起動して、確認してみます。

image2

サーバーが立ち上がりました。

データ送信を確認します。

image3

image4

データの送信も機能しています。

ブログ一覧