时间戳

首页 > 解决方案 > expressjs 路由器无法发布表单数据

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

问题描述

我正在做一个项目，我在 express 中创建一个简单的 CRUD。我正在尝试使用HTTP方法express.Router()发送表单数据。POST这是表单在浏览器上的样子：

表格.png

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

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

有人可以向我解释我在这里做错了什么，或者上面提到的文件之一有问题吗？

标签： javascriptnode.jsexpress

解决方案

您正在参考：

app.use('/login', yourRouter)

这将为您的路由器设置一个基本名称。所以下面的任何东西都带有前缀。这意味着您设置的 POST 路由位于POST: /login/login.

此外，您的表单action属性似乎没有路由到正确的路径，认为它需要/login在您正确设置上述内容时

推荐阅读