Question

我正在一个项目中，我用express创建一个简单的CRUD。我正在尝试使用express.Router()通过HTTP POST方法发送表单数据。表单在浏览器上的外观如下：

整个过程都没有错误，但是当我填写表格并单击“提交”按钮时，它在浏览器中显示了此消息：

Cannot POST '/login'

这是我的server.js文件（配置文件）：

// variables
var express = require('express');
var path = require('path');
var router = require('./routes/router');
var app = express();
var port = process.env.PORT || 3000;

// static files
app.use(express.static(path.join(__dirname, 'public')));
app.use('/login', router);

// setting the view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// Create the paths
app.get('/', (req, res) => {
    res.render('index', { title : "Hello world" });
});
app.get('/login', (req, res) => {
    res.render('login');
});

// deploy the app
app.listen(port, function() {
    console.log(`Server is listening on port ${port}`);
});

这是我的router.js文件（./routes/router）：

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

router.post('/login', (req, res) => {
    res.json(req.body);
});

module.exports = router;

这是我的login.pug文件：

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Details
    body
        h1 Details
        p Please fill out this form 
        form(action="/", method="POST")
            label(for="fname") First Name:
            input(type="text", name="fname", id="fname")
            label(for="lname") Last Name:
            input(type="text", name="lname", id="lname")
            button(type="submit") Submit

这是我的文件夹结构的样子：

│─ node_modules
│─ routes
│ └─ router.js
│─ views
│ │─ index.pug
│ └─ login.pug
│─ package-lock.json
│─ package.json
│─ server.js

有人可以向我解释我在这里做错什么吗，还是上述文件之一存在问题？

Answer 1

您正在引用：

app.use('/login', yourRouter)

这将为您的路由器设置一个基本名称。因此，下面带有前缀的任何内容。这意味着您设置的POST路由位于POST: /login/login下。

您的表单action属性似乎未路由到正确的路径，请正确设置以上内容后认为它应该为/login

Answer 2

将路由器内容移动到应用文件中，然后与应用一起使用，否则您将必须向/login/login发布请求。

// variables
var express = require('express');
var path = require('path');
var router = require('./routes/router');
var app = express();
var port = process.env.PORT || 3000;

// static files
app.use(express.static(path.join(__dirname, 'public')));

// app.use('/login', router); // (you will have to use the app.post method here or if you want to use router renaming it to auth and making a post request to /auth/post will be good)

// anyway this will work out directly if you don't want auth as router part
app.post('/login', (req, res) => {
    res.json(req.body);
});

// setting the view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// Create the paths
app.get('/', (req, res) => {
    res.render('index', { title : "Hello world" });
});
app.get('/login', (req, res) => {
    res.render('login');
});

// deploy the app
app.listen(port, function() {
    console.log(`Server is listening on port ${port}`);
});

expressjs路由器无法发布表单数据

2 个答案: