[英]NodeJS with Routes wont Post and returns a 404 Exception
我正在寫一篇簡單的博客文章,但是當我按下提交時,它只會打印我在控制台上的表單中輸入的內容的數組。 按下提交后,我的登錄頁面上返回了 404。
這是我的表單ejs
:
<form class="form-container" method="POST">
<div id="logs">
<div class="group">
<input id="title" type="title" name="title" required>
<label for="title" id="title1">Email</label>
<div class="bar"></div>
</div>
<div class="form-group row">
<div class="col-8">
<input type="date" name="date" id="dateToday" required>
</div>
</div>
<div class="group">
<input id="blogcont" type="text" name="blogcont" required>
<label for="password" id="label2">Blog Content</label>
<div class="bar"></div>
</div>
<div class="submitdiv">
<input type="submit" value="Submit Blog" id="sub" formaction="sucess">
<p class="regbutt">registration</p>
</div>
</div>
</form>
app.js
文件(從該文件返回 404 錯誤處理程序)
const mongoose = require('mongoose'); require('dotenv').config() const pages = require('./pages'); const express = require('express'); const path = require('path'); const flash = require('connect-flash') const session = require('express-session') const regroutr = require('./routes/regRoutes'); const logroutr = require('./routes/logRoutes'); const blgroutr = require('./routes/internalroutes') const passport = require('passport'); const app = express(); require('./config/passport')(passport); mongoose.connect(process.env.DB_CONNECTION, { useUnifiedTopology: true,useNewUrlParser: true }); const db = mongoose.connection; db.on('error', console.error.bind(console, 'connection error:')); db.once('open', function() { console.log('DB Connected;;.'), }); app.set('view engine'. 'ejs'): app.use(express:urlencoded({ extended, false })) app:use(session({ secret, 'secret': resave, true; saveUninitialized. true. })); app.use(passport.initialize()); app.use(passport,session()). app.use('/'; require('./routes/index,js')), app.get('/newblog'. function(request, response){ //this is where i route my blog form response,render('blog') }) app.use('/sucess', blgroutr) //this is where the submit button will direct me; but im getting 404 app.use('/registered', regroutr); app.use('/profile'. logroutr). app,use(express;static(path.join(__dirname, 'public'))). app.use(function (err. response) { console.error(err,body) response.status(404);render('notfound'. pages.notfound); }) const PORT = process.env,PORT || 3000. app.listen(PORT, function(){ console.log(`Listening on PORT ${PORT}`) })
internalroute.js
) 的路線要么這不會檢測到我的表單,要么我的表單不會檢測到文件。
const express = require('express'); const pgroutr = express.Router(); const blgschema = require('../models/blogschema'); pgroutr.post('/newblog', function(req, res){ const usr = req.body.userna; const blgtt = req.body.title; const dtToday = req.body.date; const blgcont = req.body.blogcont; const newbPost = new blgschema( { username: usr, title: blgtt, date: dtToday, blog_cont: blgcont } ); newbPost.save(function (err, newbPost){ if (err) return res.render('error', pages.error); console.log('document added to collection') res.render('sucess') }) }); module.exports = pgroutr;
您的 HTML 表單似乎正在提交到formaction
屬性在提交按鈕中指定的 URL :
<input type="submit" value="Submit Blog" id="sub" formaction="sucess">
那可能應該是formaction="/sucess"
所以它與頁面 URL 無關。 在這種情況下,它會被 app.js 中的這個路由定義捕獲:
app.use('/sucess', blgroutr)
因此,這會將其發送到您似乎正在從中加載的blgroutr
:
const blgroutr = require('./routes/internalroutes')
然后,如果我們查看您的 internalroutes.js 文件,只有一條路線,就是這條路線:
pgroutr.post('/newblog', function(req, res){...}
為此,您必須將 HTML 更改為:
<input type="submit" value="Submit Blog" id="sub" formaction="/sucess/newblog">
路由器被分配到的路徑被添加到路由器路由定義中指定的路徑中。
但是,正如我在評論中所說,僅將路由器用於單個路由確實沒有任何意義。 您可以只導出一個路由處理程序。 如果你問我,最干凈的設計是這樣的:
<input type="submit" value="Submit Blog" id="sub" formaction="/createBlog">
const blgroutr = require('./routes/internalroutes')
app.post('/createBlog', blgroutr.createBlog);
然后,在blgroutr
的代碼中,只需導出一個帶有單獨路由處理程序的 object 即可。
PS 我發現您的代碼非常難以閱讀,因為您從變量名稱中刪除了隨機字母,否則這些字母將是真實的單詞,例如sucess
和pgroutr
和blgroutr
。 在鍵入應該引用它們的代碼時,在精神上很難記住確切的拼寫。 我更希望看到success
、 pgrouter
和blgrouter
。 請注意,我建議將操作 URL 也從sucess
更改為/createBlog
,因為在 REST 傳統中,您希望使 URL 具有有意義的描述性。
我想出了一個解決方案,我刪除了 internalroutes 文件,並從中復制了我的代碼並將其直接粘貼到 app.js 中,這就是這部分:
const blgschema = require('../models/blogschema');
pgroutr.post('/sucess', function(req, res){
const usr = req.body.userna;
const blgtt = req.body.title;
const dtToday = req.body.date;
const blgcont = req.body.blogcont;
const newbPost = new blgschema(
{
username: usr,
title: blgtt,
date: dtToday,
blog_cont: blgcont
}
);
newbPost.save(function (err, newbPost){
if (err) return res.render('error', pages.error);
console.log('document added to collection')
res.render('sucess')
})
});
並將我的 EJS/HTML 更改為:
<input type="submit" value="Submit Blog" id="sub" formaction="/sucess">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.