javascript - 为什么我的索引 POST 请求不起作用？

Question

const express = require('express');
const expressLayouts = require('express-ejs-layouts');
const mongoose = require('mongoose');

const app = express();

//DB config
const db = require('./config/keys').mongoURI;

//Connect to Mongo
mongoose.connect(db, { useNewUrlParser: true, useUnifiedTopology: true})
.then(() => console.log('MongoDB connected...'))
.catch(err => console.log(err));

//EJS
app.use(expressLayouts);
app.set('view engine', 'ejs');

//Styles middleware
app.use('/css', express.static('css'));
app.use('/fonts', express.static('fonts'));
app.use('/vendor', express.static('vendor'));
app.use('/js', express.static('js'));

//Bodyparser
app.use(express.urlencoded({extended: false}));

//Routes
app.use('/', require('./routes/index'));


const PORT = process.env.PORT || 5000;

app.listen(PORT, console.log(`Server started on port ${PORT}`));

const express = require('express');

const router = express.Router();

//Welcome/register page
router.get('/', (req, res) => res.render('register'));




router.post('/', (req, res) => {
    console.log(req.body);
    
    res.send('Hello')
});

module.exports = router;

<div class="signup">
    <!-- HEADER -->
    <header class="signup__header">
        <div class="container">
            <div class="signup__header-content">
                <p><a href="#">Already have an account?</a></p>
                <a href="/login" class="btn">Sign In</a>
            </div>
        </div>
    </header>

    <!-- MAIN -->
    <main class="signup__main">
        <img class="signup__bg" src="" alt="">

        <div class="container">
            <form class="signup__container">
                <div class="signup__logo">
                    <a href="#"><img src="fonts/icons/main/Logo_Forum.svg" alt="logo">Musevista</a>
                </div>

                <div class="signup__head">
                    <h3>Create a New Account</h3>
                    <p>By singin up you can start posting, replaying to topics, earn badges, favorite, vote topics and many more.</p>
                </div>
                <form action="/" method="POST">
                <div class="signup__form">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="signup__section">
                                <label class="signup__label" for="first-name">First Name</label>
                                <input type="text" class="form-control" name="firstname" id="first-name" value="<%= typeof firstname != 'undefined' ? firstname : '' %>">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="signup__section">
                                <label class="signup__label" for="last-name">Last Name</label>
                                <input type="text" class="form-control" name="lastname" id="last-name" value="<%= typeof lastname != 'undefined' ? lastname : '' %>">
                            </div>
                        </div>
                    </div>
                    <div class="signup__section">
                        <label class="signup__label" for="username">Username</label>
                        <input type="text" class="form-control" name="username" id="username" value="<%= typeof username != 'undefined' ? username : '' %>">
                    </div>
                    <div class="signup__section">
                        <label class="signup__label" for="email">Email Address</label>
                        <input type="text" class="form-control" name="email" id="email" value="<%= typeof email != 'undefined' ? email : '' %>">
                    </div>
                    <div class="signup__section">
                        <label class="signup__label" for="password">Password</label>
                        <div class="message-input">
                            <input type="password" class="form-control" name="password" id="password" value="<%= typeof password != 'undefined' ? password : '' %>">
                            <span class="message-input__strong">strong</span>
                        </div>
                    </div>
                    <div class="signup__checkbox">
                        <div class="row">
                            <div class="col-md-6">
                                <label class="signup__box">
                                    <label class="custom-checkbox">
                                        <input type="checkbox" checked="checked">
                                        <i></i>
                                    </label>
                                    <span>I agree to the Terms & Conditions.</span>
                                </label>
                            </div>
                            <div class="col-md-6" data-visible="desktop">
                                <label class="signup__box">
                                    <label class="custom-checkbox">
                                        <input type="checkbox">
                                        <i></i>
                                    </label>
                                    <span>Subscribe to newsletter</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <input class="signup__btn-create btn btn--type-02" type="submit" value="Create New Account">
                </div>
            </form>
            </div>
        </div>
    </main>

    <!-- FOOTER -->
    <footer class="signup__footer">
        <div class="container">
            <div class="signup__footer-content">
                <ul class="signup__footer-menu">
                    <li><a href="#">Teams</a></li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Send Feedback</a></li>
                </ul>
                <ul class="signup__footer-social">
                    <li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-rss" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </div>
    </footer>
</div>

默认情况下，我已将我的网站加载到寄存器中，但响应不起作用，正文请求已发布到 url 中。我有一个使用相同索引文件的登录页面，该帖子正在查找。我认为这可能与我的表单操作没有正确的路径有关。我确信即使是起始页也能收到帖子。

Answer 1

您正在嵌套表格。这就是它不起作用的原因。每当嵌套表单时，都会忽略子表单。在 this page , 请参阅 Content-model ，其中指出:

Flow content, but with no form element descendants.

页面上当然可以有多个表单，但它们要独立。然而，使用一些聪明的 javascript，您可能能够让它工作，但这将是不必要的，而且负担太大。此外，它们可能仅适用于某些浏览器，并且在同一浏览器中，表单将无法跨版本兼容。

我能想到的实现相同结果的另一种方法是使用 form HTML5 中引入的属性。它使您能够通过使用其 ID 指向特定的表单。此属性用于 <input>标签。

注意:不在<form> ... </form>内标签，但它仍然是上述表格的一部分

这是一个相同的例子:

<form action="#" id="form1"></form>  //outer form or parent form
<form action="#" id="form2"></form> //inner form or child form

<div> //for parent form
<input type="text" name="name1" form="form1">

    <div> //for inner form
    <input type="text" name="name2" form="form2">
    <input type="submit" value="Submit" form="form2>
    </div>

<input type="submit" value="Submit" form="form2">
</div>

您可以将此结构应用于您自己的表单以解决问题。