【Node.js】MVCに沿って、コントローラーを作成する
Node.js

【Node.js】MVCに沿って、コントローラーを作成する

作成日:2021年10月23日
更新日:2021年10月23日

MVC は、Model View Controller の略です。

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

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

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

nodejs-ejs

【Node.js】EJSを使って、ブラウザにデータを表示する方法

views/index.ejs

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

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

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

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

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 に貼り付けます。

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

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

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

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

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

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

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

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

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

controllers/menus.js

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

routes/menu.js

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

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

routes/index.js

js
const menuController = require("../controllers/menus");
router.get("/", menuController.getAddMenus);

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

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

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

image2

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

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

image3

image4

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

© 2024あずきぱんウェブスタジオ