Node.js+Express+MongoDB+AngularJS注册页POST请求失效问题排查

看起来你踩了几个常见的小坑，咱们一步步来解决这个注册无响应的问题：

1. 注册按钮无法触发表单提交 #

你的注册按钮用的是<a>标签，它本身没有提交表单的功能，点击只会触发空链接跳转（所以没反应）。同时原代码还缺少<form>的闭合标签，这也会导致表单结构异常。

修改注册页的表单代码：

<div class="main">
 <p class="sign" align="center">Register</p>
 <form class="form1" action="/Register" method="POST">
 <input class="un " type="email" align="center" placeholder="Email" name="username" required>
 <input class="pass" type="password" align="center" placeholder="Password" name="password" required>
 <!-- 替换为submit按钮，并补上form闭合标签 -->
 <button class="submit" type="submit" align="center">Register</button>
 </form>
</div>

2. Express路由定义顺序错误 #

在你的server.js中，app.use(router)是在POST路由定义之前调用的。Express的中间件/路由是按顺序匹配的，这会导致后面定义的app.post("/Register")永远不会被执行。

调整server.js的代码顺序，把POST路由移到app.use(router)之前：

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();
const router = express.Router();

app.use(bodyParser.urlencoded({ extended: true }))
app.use(express.static('node_modules'));
app.use(express.static('public'));

mongoose.connect("mongodb://localhost:27017/userDB", { useNewUrlParser: true });
const userSchema = { email: String, password: String };
const User = new mongoose.model("User", userSchema);

// 先定义POST路由，确保能被匹配到
app.post("/Register", function (req, res) {
 const newUser = new User({ email: req.body.username, password: req.body.password });
 newUser.save(function (err) {
 if (err) { 
   console.log(err); 
   res.status(500).send("注册失败，请重试");
 } else { 
   res.redirect("/Home"); // 注册成功后跳转到首页
 }
 });
})

// 再定义GET路由和router
app.get("/", function (req, res) { res.render("Login"); });
app.get("/Register", function (req, res) { res.render("Register"); });
app.get("/Home", function (req, res) { res.render("Home"); });
app.get("/CocktailDetails", function (req, res) { res.render("CocktailDetails"); });
app.get("/Favourites", function (req, res) { res.render("Favourites"); });

app.use(router);

const port = 3000;
app.listen(port);
console.log('Server is running on port 3000');

3. 关于AngularJS哈希模式（#!）的疑问 #

其实你不需要开启HTML5模式，浏览器处理表单提交时会自动忽略URL中的哈希部分，表单action="/Register"实际请求的是http://localhost:3000/Register，和Express的路由是匹配的。如果之后想改用AngularJS的方式处理表单（比如用ng-submit和$http发送请求），再进一步优化即可。

额外检查项 #

• 确保MongoDB服务正常运行（执行mongod命令启动）
• 确认所有依赖已安装：npm install express body-parser mongoose
• 如果res.render报错，需要设置模板引擎（比如用EJS渲染HTML）：

  app.engine('html', require('ejs').renderFile);
  app.set('view engine', 'html');
  

按上面的步骤修改后，点击注册按钮应该就能正常发送POST请求并将用户信息存入MongoDB了。

内容的提问来源于stack exchange，提问作者OrangeJuice1-