質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.48%
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

MySQL

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

Node.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

397閲覧

formから入力したデータの取得について(node.js,mysql,ejs)

moe___

総合スコア10

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

MySQL

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

Node.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/07/31 00:29

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" にしてみた

最終的には、入力したデータを集めてグラフを作りたいと思っています。
勉強し始めたばかりで、いろんな記事を読んでもあまり理解できず質問させていただきます。

よろしくお願いいたします!!

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問