フォームで入力したデータを、index.html へ送信してみます。

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

まずは、menu.js に、menu を入れるための空の配列を作成します。

const menus = [];

次に、router.postの部分で、先程作成した menus にデータを送るようにします。

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

データを送った後、ホームに遷移するようにします。

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

menus をエクスポートできるようにしておきましょう。

module.exports = router;を削除し、router と menus をエクスポートできるようにします。

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

index.js のmenuRoutesを menus に変更します。

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

menus の内容データをホームで使うようにします。

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

index.html を作っておきます。

<!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>Menu</title>
  </head>
  <body>
    <main>
      <h1>メニュー</h1>
      <p>メニュー一覧</p>
    </main>
  </body>
</html>

menu.js と同様に、routes フォルダに index.js を作成します。

内容は、index.html を表示するよう設定します。

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

router.get("/", (req, res, next) => {
  res.sendFile(path.join(__dirname, "../", "views", "index.html"));
});

module.exports = router;

routes フォルダの index.js に、menu.js を呼び出します。

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

console.logを使って、menu.js の menus を確認しましょう。

router.get("/", (req, res, next) => {
  console.log(menuData.menus);
  res.sendFile(path.join(__dirname, "../", "views", "index.html"));
});

index.js で、routes フォルダの index.js を呼び出します。

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

app.usemenuRoutesを使います。

app.use(menuRoutes);

サーバーを起動して、フォームを使って、メニューを追加してみます。

image2

console.logを確認すると、

image3

ハンバーガーが出力されました。

ブログ一覧