前提・実現したいこと
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
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/12/20 02:19
2021/12/20 02:32