时间戳

首页 > 解决方案 > 带有路由的 NodeJS 不会发布并返回 404 异常

node.js - 带有路由的 NodeJS 不会发布并返回 404 异常

问题描述

我正在写一篇简单的博客文章，但是当我按下提交时，它只会打印我在控制台上的表单中输入的内容的数组。按下提交后，我的登录页面上返回了 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;

标签： node.jsexpresspostroutes

解决方案

您的 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，只需导出一个带有单独路由处理程序的对象。

PS我发现您的代码非常难以阅读，因为您从变量名中删除了随机字母，否则这些字母将是真实的单词，例如sucessandpgroutr和blgroutr。在键入应该引用它们的代码时，在精神上很难记住确切的拼写。我更愿意看到success和。请注意，我建议将操作 URL 也更改为from，因为在 REST 传统中，您希望使 URL 具有有意义的描述性。pgrouterblgrouter/createBlogsucess

推荐阅读