Q&A
app.jsとsignup.jsの全文を乗せたほうがいいのでは？
Q.以下のエラーを解決するにはどのような対処が必要でしょうか？
以下のエラーは、何がNotfoundなのでしょうか？
#node.js #knex #mysql #express
https://zenn.dev/wkb/books/node-tutorial
↑の記事にそって、node.jsでwebアプリケーション(todo app)の作成を行っています。
http://localhost:3000/signup
(サインアップページ)にてサインアップを行おうとすると、
POST /signup 404
とエラーがでます。
・実行環境
windows11
node -v: v16.13.2
npm -v: 8.1.2
-npm module-
todoapp@0.0.0 C:\Users*****\Desktop\todo-app\todoapp
├── cookie-parser@1.4.6
├── debug@2.6.9
├── ejs@2.6.2
├── express@4.16.4
├── http-errors@1.6.3
├── knex@1.0.2
├── morgan@1.9.1
├── mysql@2.18.1
└── mysql2@2.3.3
javascript
1//signup.js 2 3router.post('/', function (req, res, next) { 4 const username = req.body.username; 5 const password = req.body.password; 6 const repassword = req.body.repassword; 7 8 knex("users") 9 .where({name: username}) 10 .select("*") 11 .then(function (result) { 12 if (result.length !== 0) { 13 res.render("signup", { 14 title: "Sign up", 15 errorMessage: ["このユーザ名は既に使われています"], 16 }) 17 } else if (password === repassword) { 18 knex("users") 19 .insert({name: username, password: password}) 20 .then(function () { 21 res.redirect("/"); 22 }) 23 .catch(function (err) { 24 console.error(err); 25 res.render("signup", { 26 title: "Sign up", 27 errorMessage: [err.sqlMessage], 28 }); 29 }); 30 } else { 31 res.render("signup", { 32 title: "Sign up", 33 errorMessage: ["パスワードが一致しません"], 34 }); 35 } 36 }) 37 .catch(function (err) { 38 console.error(err); 39 res.render("signup", { 40 title: "Sign up", 41 errorMessage: [err.sqlMessage], 42 }); 43 }); 44});
html
1//signup.ejs 2 3<!DOCTYPE html> 4<html> 5<head> 6 <meta charset='utf-8'> 7 <meta http-equiv='X-UA-Compatible' content='IE=edge'> 8 <title><%= title %></title> 9 <meta name='viewport' content='width=device-width, initial-scale=1'> 10</head> 11<body> 12<form action="/signup" method="post"> 13 <label>ユーザ名</label> 14 <input required type="text" name="username"/> 15 <br> 16 <label>パスワード</label> 17 <input required type="password" name="password"/> 18 <br> 19 <label>パスワード再入力</label> 20 <input required type="text" name="repassword"/> 21 <br> 22 <input type="submit" value="Sign up"/> 23</form> 24</body> 25</html>
自分で調べたことや試したこと
上画像(トップページ)にて、タスクの追加を行うとmysqlにもきちんとデータの追加、追加されたデータをページに反映まで行われていました。
回答1件
0
Express側では/にサインアップ時の処理が書かれていますが、htmlでは/signupにリクエストを送信するようになっているようです。これが原因かもしれません。
js
1router.post('/', function (req, res, next) { 2 ... 3}
html
1<form action="/signup" method="post">
投稿2022/02/24 08:30
総合スコア181
あなたの回答
tips
プレビュー
