【Node.js】Expressで別ページにデータを送信する方法
Node.js

【Node.js】Expressで別ページにデータを送信する方法

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

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

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

nodejs-express-static

【Node.js】Expressで静的ファイルを繋げる方法

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

js
const menus = [];

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

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

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

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

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

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

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

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

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

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

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

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

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 を表示するよう設定します。

js
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 を呼び出します。

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

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

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

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

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

app.usemenuRoutesを使います。

js
app.use(menuRoutes);

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

image2

console.logを確認すると、

image3

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

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