使用 router.Post() 系统时抛出 404 错误（找不到页面）

Question

在 index.js 文件中，当我使用 router.get(...) 时，它可以工作，但如果我使用 router.post(...)，它会在浏览器上给我 404 错误（找不到页面）这是什么问题以及原因当我使用 POST METHOD 而不是当我使用 GET METHODE 时会导致错误？

package.json 文件中的模块和版本：

"bcrypt-nodejs": "0.0.3",

“正文解析器”：“^1.19.0”，

"cookie-parser": "~1.4.4",

“调试”：“~2.6.9”，

“快递”：“~4.16.1”，

"express-handlebars-sections": "^1.0.1",

"hbs": "~4.0.4",

"http-errors": "~1.6.3",

“猫鼬”：“^5.9.2”，

“摩根”：“~1.9.1”

index.js

// index.js File

var express = require('express');
var router = express.Router();


/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Courstak | Home', main_style: 'style.css', main_js: 'coursatak.js' });
});


const students = require('../model/students');
router.post('/signup', (req, res, next)=>{
  res.render('signup', { title: 'Courstak | Sign Up', main_style: 'style.css', profile_instructor_style: 'inst.css', signup_style: 'signup.css' });
  const student = new students ({
    username: 'req.body.name',
    email: 'req.body.email',
    password: ' '
  });
  student.save((err, doc)=>{
    if(!err){
      console.log(req.body.email);

    }else{
      console.log('ERR while saving..' + err);
    }
  });
});

router.get('/login', function (req, res, next) {
  res.render('login', { title: 'Courstak | Log In', main_style: 'style.css', profile_instructor_style: 'inst.css', signup_style: 'signup.css' });
});


/* GET learn more. */
router.get('/learn-more/web-development', function (req, res, next) {
  res.render('./learn-more/web-development', { title: 'Courstak | Web Development', main_style: 'style.css', desktop_style: 'desktop.css', web_dev_style: 'web-dev.css' });
});

router.get('/learn-more/web-design', function (req, res, next) {
  res.render('./learn-more/web-design', { title: 'Courstak | Web Design', main_style: 'style.css', desktop_style: 'desktop.css', web_des_style: 'web-design.css' });
});

router.get('/learn-more/desktop-development', function (req, res, next) {
  res.render('./learn-more/desktop-development', { title: 'Courstak | Desktop Devlopment', main_style: 'style.css', desktop_style: 'desktop.css' });
});

router.get('/learn-more/comming-soon', function (req, res, next) {
  res.render('./learn-more/comming-soon', { title: 'Courstak | Comming Soon', main_style: 'style.css', desktop_style: 'desktop.css', commig_soon_style: 'comming-soon.css' });
});


/* Profiles */
//instructor
router.get('/profiles/instructor', function (req, res, next) {
  res.render('./profiles/instructor', { title: 'Courstak | Instructor Profile', name: 'Eng. Muhammad Abd Elhamied', profile_instructor_style: 'inst.css' });
});

//student
router.get('/profiles/student', function (req, res, next) {
  res.render('./profiles/student', { title: 'Courstak | Student Profile', profile_instructor_style: 'inst.css', profile_student_style: 'student.css' });
});


module.exports = router;

signup.hbs

<!-- signup.hbs -->


<div class="container">

    <div class="s-f">
        <div class="card">
            <div class="card-body">
                <div>
                    <h6>Sign Up | <a href='/' target="_blank">Coursatak</a></h6>
                </div>
                <form action="/signup" method="POST">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" placeholder="Enter your Name" class="form-control" name="a" />
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input placeholder="Enter Your Email" type="email" class="form-control" name="b" />

                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" placeholder="Enter your Password" class="form-control" name="c" />
                    </div>
                    <div class="form-group">
                        <label>Re-Enter Password</label>
                        <input placeholder="Re-Enter Your Password" type="password" class="form-control" name="repassword">
                    </div>
                    <div class="form-group form-check">

                    </div>
                    <div>
                        <p class='if'></span><a href="/login">Log In</a>, <span>If you already registered before.</p>
                    </div>
                    <button class="btn btn-primary">Sign Up</button>
                </form>
            </div>
        </div>
    </div>
</div>

app.js

// app.js File

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var mongoose = require('mongoose');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');


var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.use(logger('dev'));

//body parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

mongoose.connect('mongodb://localhost/shopping-cart',  {useNewUrlParser: true, useUnifiedTopology: true }, (err)=>{
  if(err){
    console.log('err from DB ===> ' + err);
  }else{
    console.log('DB is connected successfully! ..');
  }
});

app.use('/', indexRouter);
app.use('/users', usersRouter);



//////////////////////////  DB  //////////////////////
// mongoose.connect('mongodb://localhost/students', { useNewUrlParser: true, useUnifiedTopology: true }, (err, doc)=>{(err)?console.log('ERR while connectig DB at app.js => ' + err):console.log('DB is running...');});
//////////////////////////////////////////////////////


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

package.json

// package.json


{
  "name": "regsys",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.19.0",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "express-handlebars-sections": "^1.0.1",
    "hbs": "~4.0.4",
    "http-errors": "~1.6.3",
    "mongoose": "^5.9.2",
    "morgan": "~1.9.1"
  }
}

Answer 1

如果您从浏览器中点击发布请求，它将无法正常工作。因为默认情况下浏览器只能点击获取请求。你应该使用邮递员。