Node.js
【Node.js】Expressで別ページにデータを送信する方法
作成日：2021年10月21日
更新日：2021年10月21日
フォームで入力したデータを、index.html へ送信してみます。
コードは、前回のコードを使用します。
【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.useでmenuRoutesを使います。
js
app.use(menuRoutes);
サーバーを起動して、フォームを使って、メニューを追加してみます。
console.logを確認すると、
ハンバーガーが出力されました。
お知らせ
私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。
Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。
詳しくはこちら（Udemyの外部サイトへ遷移します）
