Express で html ファイルを繋げてみます。

ルーターは、前回作成した menu.js を使用します。

routes/menu.js

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

router.get("/menu", (req, res, next) => {
  res.send(
    '<form action="/" method="POST"><input type="text" name="menu"><button type="submit">送信</button></form>'
  )
})

router.post("/", (req, res, next) => {
  console.log(req.body)
  res.send(req.body)
})

module.exports = router

views ファイルを作成し、menu.html を作成します。

views/menu.html

<main>
  <form action="/menu" method="POST">
    <input type="text" name="title" />
    <button type="submit">メニューを追加する</button>
  </form>
</main>

menu.js のrouter.getの部分を menu.html と繋げます。

まずは、requirepathを呼び出します。

const path = require("path")

res.sendの部分を、res.sendFileに書き換えます。

router.get("/menu", (req, res, next) => {
  res.sendFile(
    '<form action="/" method="POST"><input type="text" name="menu"><button type="submit">送信</button></form>'
  )
})

res.sendFileの中に、先程呼び出した path を使ってパスを指定します。

現在の位置を取得するために、__dirnameを使います。

join をファイル名で、結合したパスを取得しましょう。

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

ブラウザで確認すると、

image2

menu.html で作成したフォームが表示されました。

ブログ一覧