前提・実現したいこと
このようなWEB上の入力フォームに、MongoDBからデータを取り出して表示させたい。
が、入力フォームとDBを連携させる方法がよく分かっていません...。
発生している問題・エラーメッセージ
MongoDBとNode.jsの連携がうまくいかない
該当のソースコード
JavaScript
1const MongoClient = require("mongodb").MongoClient; 2const express = require('express'); 3const ejs = require("ejs"); 4 5 6const app = express(); 7app.engine('ejs', ejs.renderFile); 8app.use(express.static('public')); 9 10 11const bodyParser = require('body-parser'); 12app.use(bodyParser.urlencoded({ extended: false })); 13 14 15// 接続文字列 16const url = "mongodb://localhost:27017/syuzouDB"; 17var collection; 18 19 20// MongoDB へ 接続 21MongoClient.connect(url, (err, client) => { 22 const db = client.db("syuzouDB")//dbの定義を追加 23 24 // コレクションの取得 25 collection = db.collection("kouji"); 26 collection.find().toArray().then((data) => { 27 28 //入力フォーム 29 app.get('/', (req, res) => { 30 31 const msg = `This is Index Page!<br>※製麴番号を書いて送信して下さい。<br>※入力したメッセージをDBに格納します。`; 32 res.render('index.ejs', { 33 title: '麹入力フォーム', 34 content: msg, 35 content2: data.seikiku, 36 content3: data.date1, 37 content4: data.stime1, 38 content5: data.etime1, 39 content6: data.sensor11, 40 content7: data.sensor12, 41 content8: data.sensor13, 42 content9: data.memo, 43 }); 44 45 }); 46 }); 47 48}); 49 50 51// ※POST送信の処理 52//検索 53app.post('/search', (req, res) => { 54 const msg = `This is Posted Page!<br>製麴番号「<b>${req.body.seikiku}</b>」の検索結果。`; 55 //ここに「検索」ボタンが押された時の処理 56 //製麴番号を指定し、最新のデータの表示 57 collection.find({ seikiku: 1 }).toArray((error, documents) => { 58 console.log(result) 59 res.render('index.ejs', 60 { 61 title: '検索', 62 content: msg, 63 content2: req.body.seikiku, 64 content3: req.body.date1, 65 content4: req.body.stime1, 66 content5: req.body.etime1, 67 content6: req.body.sensor11, 68 content7: req.body.sensor12, 69 content8: req.body.sensor13, 70 content9: req.body.memo, 71 } 72 ); 73 }); 74 75}); 76
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta http-equiv="content-type" 5 content="text/html; charset=UTF-8"> 6 <title><%=title %></title> 7 <link type="text/css" href="./style.css" rel="stylesheet"> 8 <script> 9 const hogehoge = () =>{ 10 alert("入力内容に間違いはないですか?") 11 } 12 </script> 13</head> 14 15 16<body> 17 <head> 18 <h1><%=title %></h1> 19 </head> 20 <div role="main"> 21 <p><%-content %></p> 22 <form action="/search" method="post"> 23 <input type="text" name="seikiku" value="<%-content2 %>"> 24 <input type="submit" value="検索" onclick="hogehoge()"> 25 </form> 26 <form action="/" method="post"> 27 28 <table> 29 <tr><td>工程番号</td> <td>工程名</td> <td>日付</td><td>開始時間</td><td>終了時間</td><td>センサ番号1</td><td>センサ番号2</td><td>センサ番号3</td><td>メモ</td> </tr> 30 <tr><td>1</td> <td>引き込み</td> <td><input type="text" name="date1" value="<%-content3 %>"></td> 31 <td><input type="text" name="stime1" value="<%-content4 %>"></td> 32 <td><input type="text" name="etime1" value="<%-content5 %>"></td> 33 <td><input type="text" name="sensor11" value="<%-content6 %>"></td> 34 <td><input type="text" name="sensor12" value="<%-content7 %>"></td> 35 <td><input type="text" name="sensor13" value="<%-content8 %>"></td> 36 <td><input type="text" name="memo1" value="<%-content9 %>"></td></tr> 37 </tr> 38 </table> 39 40 <input type="text" name="seikiku" value="<%-content2 %>"> 41 <input type="submit" value="格納"> 42 43 </form> 44 </div> 45</body> 46 47</html>
データベースの中身
seikiku:"1"
date1:"12/2"
stime1:"11:30"
etime1:"12:30"
sensor11:"001"
sensor12:"002"
sensor13:"003"
memo1:"備考"
※1の工程のみ
補足情報(FW/ツールのバージョンなど)
あなたの回答
tips
プレビュー