node.jsでPOSTの値を受け取れるようにしたいです。

前提・実現したいこと

node.jsでお問合せフォームの作成。

発生している問題・エラーメッセージ

入力フォームを作り、送信しても遷移先のページで値を受け取れていません。
パスも変えたりなど試しましたが、さっぱり原因が分からない状況です。
まだファイル構成やどこが作用しているのかなど理解ができていない為このような問題に直面しております。

参考になるサイトやアドバイスを頂けますと助かります。

送信すると　↓　が出ます。
Cannot POST /post.html

該当のソースコード

sample/src/ejs/contact/index.ejs(入力フォーム)

<% var title = "contact"; var description = "お問合せページのdescription"; %>
<% include src/ejs/template/_head %>

<!-- prettier-ignore -->

<!-- 問合せフォーム ▼ここから▼ -->
<form action="/post.html" method="POST"
      onsubmit="return verifyContactForm();">
  <div class="form-group">
    <label for="guest_name">お名前 : </label>
    <input id="guest_name" class="form-control" placeholder="（例）山田  太郎"  />
  </div>
  <div class="form-group">
    <label for="guest_email">メールアドレス : </label>
    <input id="gurst_email" class="form-control" placeholder="（例）example.com" />
  </div>
  <div class="form-group">
    <label for="mail_subject">件名 : </label>
    <input type="text" id="mail_subject" class="form-control" placeholder="（例）javascriptについて" />
  </div>
  <div class="form-group">
    <label for="mail_body">本文 : </label>
    <textarea id="mail_body" class="form-control" placeholder="※お問合せ内容をご記載ください。" ></textarea>
  </div>
  <div class="form-group text-right">
    <button class="btn btn-primary" >送信</button>
  </div>
</form>


<% include src/ejs/template/_footer %>

/sample/src/ejs/contact/post.ejs(受け取り先)

<% var title = "contact"; var description = "お問合せページのdescription"; %>
<% include src/ejs/template/_head %>
<% var guest_name = $_POST['guest_name'] %>
<!-- prettier-ignore -->


<script type="text/javascript">
  console.log($guest_name);
</script>


<% include src/ejs/template/_footer %>

試したこと

routerやwebpackの所の設定かと思い、いじってみましたが変化がないので
初期の状態に戻しました。

sample/src/js/modules/Router.js

import Home from '../pages/Home'
import About from '../pages/About'

export default class Router {
  constructor() {
    this.model = {
      pathName: location.pathname,
    }

    this.initRouting()
  }

  initRouting() {
    const pathName = this.model.pathName
    switch (pathName) {
      case '/':
        new Home()
        break
      case '/about':
        new About()
        break
      default:
        break
    }
  }
}

sample/webpack.config.js

const webpack = require('webpack')
const path = require('path')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const globImporter = require('node-sass-glob-importer')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = (env, argv) => {
  const PRODUCTION = argv.mode === 'production'

  return {
    entry: './src/js/index.js',
    output: {
      filename: PRODUCTION
        ? 'assets/javascripts/bundle[hash].js'
        : 'assets/javascripts/bundle.js',
      path: path.join(__dirname, 'public'),
    },
    plugins: [
      new CleanWebpackPlugin([
        'public/assets/stylesheets',
        'public/assets/javascripts',
      ]),
      new MiniCssExtractPlugin({
        filename: PRODUCTION
          ? 'assets/stylesheets/bundle[hash].css'
          : 'assets/stylesheets/bundle.css',
      }),

      // ejs
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'src/ejs/index.ejs',
      }),
      new HtmlWebpackPlugin({
        filename: 'about/index.html',
        template: 'src/ejs/about/index.ejs',
      }),
      new HtmlWebpackPlugin({
        filename: 'introduction/index.html',
        template: 'src/ejs/introduction/index.ejs',
      }),
      new HtmlWebpackPlugin({
        filename: 'contact/index.html',
        template: 'src/ejs/contact/index.ejs',
      }),
      new HtmlWebpackPlugin({
        filename: 'contact/post.html',
        template: 'src/ejs/contact/post.ejs',
      }),
      new HtmlWebpackPlugin({
        filename: 'work/index.html',
        template: 'src/ejs/work/index.ejs',
      }),
      new HtmlWebpackPlugin({
        filename: '404.html',
        template: 'src/ejs/404/index.ejs',
      }),


      // php
      new CopyWebpackPlugin(
        PRODUCTION
          ? [
              {
                from: './src/api/*.php',
                to: path.resolve(__dirname, 'public/api'),
                flatten: true,
              },
            ]
          : []
      ),
    ],
    resolve: {
      extensions: [
        '.js', // for style-loader
      ],
    },
    devtool: PRODUCTION ? 'none' : 'source-map',
    optimization: {
      minimizer: PRODUCTION
        ? [
            new UglifyJSPlugin({
              uglifyOptions: {
                compress: {
                  drop_console: true,
                },
              },
            }),
          ]
        : [],
    },
    module: {
      rules: [
        {
          test: /.ejs$/,
          use: 'ejs-compiled-loader',
        },
        {
          test: /.scss$/,
          use: [
            MiniCssExtractPlugin.loader, // javascriptとしてバンドルせず css として出力する
            {
              loader: 'css-loader',
              options: {
                url: false,// sassで相対パスを書けるようにする
                sourceMap: true,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
                plugins: [
                  require('cssnano')({
                    preset: 'default',
                  }),
                  require('autoprefixer')({
                    grid: true
                  }),
                ],
              },
            },
            {
              loader: 'sass-loader',
              options: {
                importer: globImporter(),
                sourceMap: true,
              },
            },
          ],
        },
        {
          test: /.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [['@babel/preset-env', { modules: false }]],
              },
            },
          ],
        },
        {
          enforce: 'pre',
          test: /.js$/,
          exclude: /node_modules/,
          loader: 'eslint-loader',
        },
      ],
    },
    devServer: {
      contentBase: path.resolve(__dirname, 'public'),
      port: 8080,
    },
  }
}

補足情報（FW/ツールのバージョンなど）

node v12.6.0
npm 6.9.0
webpack 5.65.0

行動規範の内容に同意します

回答1件

送信すると　↓　が出ます。
Cannot POST /post.html

とのことですので、

<form action="/post.html" method="POST"

ここが異なるように見えました。

パスも変えたりなど試しましたが、

こちらの試した内容も具体的にご記載いただいた方が良いのかな？とも思いました。

js
1      new HtmlWebpackPlugin({
2        filename: 'contact/index.html',
3        template: 'src/ejs/contact/index.ejs',
4      }),
5      new HtmlWebpackPlugin({
6        filename: 'contact/post.html',
7        template: 'src/ejs/contact/post.ejs',
8      }),

こちらを見ると、contact/post.htmlのパスに送信する必要があると思いました。
post.html(ドキュメントルートを表す先頭のスラッシュなし・相対的なパス)か/contact/post.htmlに変更してみたらいかがでしょうか。

・contact/index.html は表示できているのかな？と思いまして、上記のような回答をさせていただきました

投稿2021/12/19 09:06

退会済みユーザー

総合スコア0

退会済みユーザー

2021/12/20 02:19

`$_POST['guest_name']` は送信した値を取得するためのものですかね。全体的な構成やejsなどの知識がないためわからないのですが、 `$_POST`はPHPの事前定義された変数のことでしょうか？ https://www.php.net/manual/en/reserved.variables.post.php ejsはテンプレートのためのものだと思っていましたので、 `$_POST`などを使って送信した値なども参照することができるのか・・ Node.jsで送信された値を使用するには、Expressなどが必要そうに思いました。 http://expressjs.com/en/5x/api.html#app.post.method

harigoE8

2021/12/20 02:32

`$_POST['guest_name']` は送信した値を取得するためのものですかね。ーーーはい。おっしゃる通りです。全体的な構成やejsなどの知識がないためわからないのですが、 `$_POST`はPHPの事前定義された変数のことでしょうか？ーーーーーPHPの方には何も定義しておりません。自分も今回初めてejsに触れているのでよく分かっていない次第です。 Node.jsで送信された値を使用するには、Expressなどが必要そうに思いました。ーーーーーなるほど。Expressですね！試してみます！ありがとうございます！！

行動規範の内容に同意します