node.jsとmysqlの勉強をしていて、入力したデータを他のページで表示したいのですがうまく行きません。
consoleに以下のようなエラーが出ます。
POST http://localhost:3000/data 404 (Not Found)
input.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="/css/style.css"><!--【注意】publicを基点としたパスを指定--> <link rel="stylesheet" href="https://use.typekit.net/xuu7bgk.css"> <title>健康データ</title> </head> <body> <header> <div class="header_left"> <div class="header_logo">KEEP FIT</div> <div class="header_nav"> <div class="header_menu"><a href="/">ダッシュボード</a></div> <div class="header_menu"><a href="/input">記録</a></div> <div class="header_menu">お問合せ</div> </div> </div> <div class="header_right"> <div class="header_account"> <div class="header_mypage"><img src="/images/mypage_icon.svg" alt="マイページへ"></div> <div class="header_setting"><img src="/images/setting_icon.svg" alt="設定へ"></div> </div> </div> </header> <main> <div class="container"> <h1>輪プロテンプレート</h1> <div> <input type="text" id="text_name"> <input type="button" value="追加" onclick="addName()"> </div> <p id="output"></p> <p id="sum"></p><!--自分で追加--> </div> <form action="/data" method="POST"> <input type="text" name="message"> <input type="submit" value="送信"> </form> </main> <footer>フッター</footer> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script type="text/javascript" src="/js/input.js"></script> </body> </html>
app.js
//expressを使うための記述らしい const express = require('express'); const ejs = require('ejs');//この記述いる? const app = express(); app.use(express.static('public')); app.get('/', (req, res) => { res.render('hello.ejs'); }); app.get('/input', (req, res) => { //データベースからデータを取得する処理//Progateからそのまま持ってきたけど、使える?? connection.query( 'SELECT * FROM callist', (error, results) => { console.log(results); res.render('input.ejs'); } ); }); app.get('/input', (req, res) => { //データベースからデータを取得する処理//Progateからそのまま持ってきたけど、使える?? connection.query( 'SELECT * FROM items', (error, results) => { console.log(results); res.render('fdata.ejs', {items: results}); } ); }); var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next){ var data = { title: 'PAGE_A' , content: 'メッセージを入力してください' }; res.render('page_a', data); }); router.post('/post',function(req, res, next){ var msg = req.body['message']; var data = { title: 'PAGE_A' , content: 'あなたのメッセージは「'+msg+'」です。' }; res.render('data', data); }); module.exports = router;
参考にしたサイト:https://tamotech.blog/2020/04/24/form_data_express/
試したこと:formのactionを参考サイト通り action="/data/post" にしてみた
最終的には、入力したデータを集めてグラフを作りたいと思っています。
勉強し始めたばかりで、いろんな記事を読んでもあまり理解できず質問させていただきます。
よろしくお願いいたします!!
あなたの回答
tips
プレビュー