🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

1415閲覧

一つのNode.jsファイルで2つのフォームからPOSTしたい

Kumampet

総合スコア5

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2021/01/08 05:10

前提・実現したいこと

現在Node.jsを用いてMysqlと連携したフォームを作っています。
一つのjsファイルで二つのフォームを操作できるようにしたいと考えています。
ミドルウェアにはExpressを使用しています。

ファイルの構成は次の通りです

[sensor_management] index.js [views] index.pug list.pug register.html p-list.pug p-register.html [routes] index.js

list.pugとp-list.pugはmysqlに登録してある情報を表示します。
それぞれ同じDatabase[facility]のfacility_listとusersから引っ張ります。

register.htmlとp-register.htmlはそれぞれfacility_listとusersに情報を書き込みます。

現在で来ていること

list.pugとp-list.pugの情報の表示
register.html(facility_list)の情報の書き込み

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

現在p-register.html側の情報を書き込む際になぜかregister.htmlで動作しているsql文が実行されているようで、情報が登録できません。
ページごとに分岐をさせたいのですが、いまいちやり方がわからず詰まってしまいました。

C:\node_modules\mysql\lib\protocol\Parser.js:437 throw err; // Rethrow non-MySQL errors ^ Error: ER_BAD_FIELD_ERROR: Unknown column 'name' in 'field list' at Query.Sequence._packetToError (C:node_modules\mysql\lib\protocol\sequences\Sequence.js:47:14) at Query.ErrorPacket (C:node_modules\mysql\lib\protocol\sequences\Query.js:79:18) at Protocol._parsePacket (C:node_modules\mysql\lib\protocol\Protocol.js:291:23) at Parser._parsePacket (C:node_modules\mysql\lib\protocol\Parser.js:433:10) at Parser.write (C:node_modules\mysql\lib\protocol\Parser.js:43:10) at Protocol.write (C:node_modules\mysql\lib\protocol\Protocol.js:38:16) at Socket.<anonymous> (C:node_modules\mysql\lib\Connection.js:88:28) at Socket.<anonymous> (C:node_modules\mysql\lib\Connection.js:526:10) at Socket.emit (events.js:315:20) at addChunk (internal/streams/readable.js:309:12) -------------------- at Protocol._enqueue (C:node_modules\mysql\lib\protocol\Protocol.js:144:48) at Connection.query (C:node_modules\mysql\lib\Connection.js:198:25) at C:sensor_management\index.js:69:13 at Layer.handle [as handle_request] (C:node_modules\express\lib\router\layer.js:95:5) at next (C:node_modules\express\lib\router\route.js:137:13) at Route.dispatch (C:node_modules\express\lib\router\route.js:112:3) at Layer.handle [as handle_request] (C:node_modules\express\lib\router\layer.js:95:5) at C:node_modules\express\lib\router\index.js:281:22 at Function.process_params (C:node_modules\express\lib\router\index.js:335:12) at next (C:node_modules\express\lib\router\index.js:275:10) { code: 'ER_BAD_FIELD_ERROR', errno: 1054, sqlMessage: "Unknown column 'name' in 'field list'", sqlState: '42S22', index: 0, sql: "INSERT INTO facility_list SET `id` = '406E8B22', `name` = '太郎', `family_name` = '二郎', `related_name` = '三郎', `mail` = 'sample@example.com', `address` = '市', `family_number` = '0000-00-0000', `related_number` = '9999-99-9999', `flag` = '0'" }

該当のソースコード

Node.js

1const hostname = 'localhost'; 2const port = 8080; 3 4const http = require('http'); 5const fs = require('fs'); 6const url = require('url'); 7 8const express = require('express'); 9const app = express(); 10const mysql = require('mysql'); 11 12const router = express.Router(); 13 14const connection = mysql.createConnection({ 15 host: 'localhost', 16 user: 'root', 17 password: 'p/W', 18 database: 'facility' 19}); 20 21app.set('view engine', 'pug'); 22app.use(express.static('views')); 23 24// localhost:8080にアクセスできたとき 25const recordLog = function (req, res, next) { 26 console.log('localhost:8080にアクセスしました'); 27 next(); 28}; 29 30app.use(recordLog); 31 32// DBの中身を取得しに行く 33// 施設一覧 34app.get('/page/list', function (req, res) { 35 var sql = 'select * from facility.facility_list'; 36 connection.query(sql, (err, rows, fields) => { 37 if (err) throw err; 38 res.render('list', { 39 title: 'Facility List', 40 f_data: rows 41 }); 42 }); 43}); 44 45// 利用者一覧 46app.get('/page/p-list', function (req, res) { 47 var sql = 'select * from facility.users'; 48 connection.query(sql, (err, rows, fields) => { 49 if (err) throw err; 50 res.render('p-list', { 51 title: 'Users List', 52 f_data: rows 53 }); 54 }); 55}); 56 57// DBに情報を登録する 58const path = require('path'); 59const bodyParser = require('body-parser'); 60 61// 施設登録 62app.get('/page/register.html', (req, res) => res.sendFile(path.join(__dirname, '/register.html'))); 63app.use(bodyParser.urlencoded({ extended: true })); 64 65app.post('/', (req, res) => { 66 var sql = "INSERT INTO facility_list SET ?"; 67 68 connection.query(sql,req.body,function(err, result, fields){ 69 if (err) throw err; 70 console.log(result); 71 res.redirect("/page/list"); 72 //登録が完了したら一覧ページに飛ぶ 73 74 }); 75}); 76 77// 利用者登録 78app.get('/page/p-register.html', (req, res) => res.sendFile(path.join(__dirname, '/p-register.html'))); 79app.use(bodyParser.urlencoded({ extended: true })); 80 81app.post('/', (req, res) => { 82 var sql = "INSERT INTO users SET ?"; 83 84 connection.query(sql,req.body,function(err, result, fields){ 85 if (err) throw err; 86 console.log(result); 87 res.redirect("/page/p-list"); 88 //登録が完了したら一覧ページに飛ぶ 89 90 }); 91}); 92 93//ルーティング 94var index = require('./routes/index'); 95//var page = require('./routes/page'); 96 97// ルーティングの設定(./routes/index.jsなどに飛ばす) 98app.use('/', index); 99//app.use('/page', page); 100 101// 上のルーティングに当てはまらなかった場合、404を設定 102app.use(function(req, res, next) { 103 var err = new Error('Not Found'); 104 err.status = 404; 105 next(err); 106}); 107 108app.listen(8080); 109

試したこと

アロー関数を通常のfunctionなどにしてみましたがNot found 404になったりしてよくわからなかったです。

伝わりにくいかと思いますが、どなたか救いの手を差し伸べていただけると助かります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/01/08 06:07

app.post('/', (req, res) が2つあるからじゃない?
Kumampet

2021/01/08 06:13

ご指摘ありがとうございます /register.htmlからPostしたときはvar sql = "INSERT INTO facility_list SET ?";を発火させ、/p-register.htmlからPostしたときはvar sql = "INSERT INTO users SET ?";を発火させたいのですが、app.post('/',(req, res))を一つにする方法がよくわかりません。
guest

回答1

0

自己解決

強引だけどフォームのURLで処理を分けた

①ページのURLをgetで取得し、グローバル変数に格納しておく

Node,js

1var fulUrl; // Global 2 3//--略 4// デバイス登録ページか利用者登録ページか取得する 5app.get('/page/p-register.html', (req, res) => { 6 fullUrl = req.protocol + '://' + req.get('Host') + req.originalUrl; 7 res.sendFile(__dirname + '/views/p-register.html'); 8 console.log(fullUrl); 9}); 10app.get('/page/register.html', (req, res) => { 11 fullUrl = req.protocol + '://' + req.get('Host') + req.originalUrl; 12 res.sendFile(__dirname + '/views/register.html'); 13 console.log(fullUrl); 14});

②取得したURLに応じて書き込み先を変更し、DBのクエリを書き換える

Node.js

1app.use(bodyParser.urlencoded({ extended: true })); 2app.post('/', (req, res) => { 3 if (fullUrl == "http://localhost:8080/page/p-register.html") { 4 5 const sql = "INSERT INTO users SET ?"; 6 7 connection.query(sql, req.body, function (err, result, fields) { 8 if (err) throw err; 9 console.log(result); 10 res.redirect("/page/p-list"); 11 //登録が完了したら一覧ページに飛ぶ 12 }); 13 } else if (fullUrl == "http://localhost:8080/page/register.html") { 14 15 const sql = "INSERT INTO devices SET ?"; 16 17 connection.query(sql, req.body, function (err, result, fields) { 18 if (err) throw err; 19 console.log(result); 20 res.redirect("/page/list"); 21 //登録が完了したら一覧ページに飛ぶ 22 }); 23 } 24});

投稿2021/01/08 19:05

Kumampet

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kumampet

2021/01/08 19:06

もっといい方法があったら、教えてください・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問