前后端对接求助：实现点击注册按钮在MongoDB创建用户

一、前端代码优化（规范写法+错误处理） #

原代码通过DOM查询获取表单值，改用React的useState管理表单状态更符合框架规范，同时增强用户反馈：

import React, { useState } from "react";
import client from "../../apis/client";

export default function SignUp() {
  const [formData, setFormData] = useState({
    username: "",
    email: "",
    password: ""
  });
  const [errorMsg, setErrorMsg] = useState("");

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.id]: e.target.value
    });
  };

  const handleSignup = async (event) => {
    event.preventDefault();
    setErrorMsg("");

    // 基础表单验证
    if (!formData.password) {
      setErrorMsg("密码不能为空");
      return;
    }

    try {
      const response = await client.post("/auth/signup", formData);
      console.log("注册成功", response.data);
      // 注册成功后的操作：比如跳转登录页
      // window.location.href = "/login";
    } catch (error) {
      console.error("注册失败:", error);
      // 提取后端返回的错误信息
      setErrorMsg(error.response?.data?.error || "注册失败，请稍后重试");
    }
  };

  return (
    <form id="signup-form" onSubmit={handleSignup}>
      <h1>注册</h1><br />
      {errorMsg && <p style={{ color: "red" }}>{errorMsg}</p>}
      
      <span className="input"></span>
      <input
        type="text"
        className="name"
        placeholder="全名"
        required
        id="username"
        value={formData.username}
        onChange={handleChange}
      />
      
      <span className="input"></span>
      <input
        type="email"
        className="email"
        placeholder="邮箱地址"
        required
        id="email"
        value={formData.email}
        onChange={handleChange}
      />
      
      <span id="passwordMeter"></span>
      <input
        type="password"
        className="password"
        id="password"
        placeholder="密码"
        required
        value={formData.password}
        onChange={handleChange}
      />

      <button type="submit"><span>注册</span></button>
    </form>
  );
}

前端改动说明： #

• 用useState管理表单数据和错误信息，避免直接操作DOM
• 添加表单输入的双向绑定，实时更新状态
• 增加基础的客户端验证（密码必填）
• 优化错误提示，将后端返回的错误信息展示给用户

二、后端代码修正（逻辑修复+安全优化） #

原后端存在密码明文存储、逻辑顺序不合理、登录接口未验证密码等问题，修正后代码如下：

const router = require('express').Router();
const User = require('../models/User');
const bcrypt = require('bcrypt'); // 需要先安装：npm install bcrypt

// 注册接口
router.post('/signup', async (req, res) => {
  try {
    // 先检查用户是否已存在
    const existingUser = await User.findOne({ email: req.body.email });
    if (existingUser) {
      return res.status(409).json({ error: "该邮箱已被注册" });
    }

    // 加密密码
    const salt = await bcrypt.genSalt(10);
    const hashedPassword = await bcrypt.hash(req.body.password, salt);

    // 创建新用户（默认isAdmin为false）
    const newUser = new User({
      username: req.body.username,
      email: req.body.email,
      password: hashedPassword,
      isAdmin: req.body.isAdmin || false
    });

    const savedUser = await newUser.save();
    // 返回用户信息时隐藏密码字段
    const { password, ...userWithoutPassword } = savedUser._doc;
    res.status(200).json(userWithoutPassword);
  } catch (error) {
    res.status(500).json({ error: "服务器内部错误" });
    console.error("注册错误:", error);
  }
});

// 登录接口（完善密码验证）
router.post('/login', async (req, res) => {
  try {
    const user = await User.findOne({ email: req.body.email });
    if (!user) {
      return res.status(401).json({ error: "邮箱或密码错误" });
    }

    // 验证密码
    const validPassword = await bcrypt.compare(req.body.password, user.password);
    if (!validPassword) {
      return res.status(401).json({ error: "邮箱或密码错误" });
    }

    // 返回用户信息时隐藏密码字段
    const { password, ...userWithoutPassword } = user._doc;
    res.status(200).json(userWithoutPassword);
  } catch (error) {
    res.status(500).json({ error: "服务器内部错误" });
    console.error("登录错误:", error);
  }
});

module.exports = router;

后端改动说明： #

• 调整用户存在检查的顺序，避免不必要的实例创建
• 使用bcrypt加密用户密码，禁止明文存储
• 默认设置isAdmin为false，防止权限泄露
• 登录接口补充密码验证逻辑
• 返回用户信息时过滤掉密码字段，提升安全性
• 统一错误返回格式，方便前端处理

三、对接关键配置 #

1. 前端API客户端配置（client.js）
   确保axios实例的baseURL指向后端服务地址，例如：

import axios from 'axios';

const client = axios.create({
  baseURL: 'http://localhost:5000', // 后端服务地址
  headers: {
    'Content-Type': 'application/json'
  }
});

export default client;

2. 后端启用CORS
   安装cors中间件：npm install cors，然后在主入口文件（如server.js）中添加：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // 允许所有跨域请求，生产环境可配置具体域名
app.use(express.json()); // 解析JSON格式请求体

// 挂载auth路由
const authRouter = require('./routes/auth');
app.use('/auth', authRouter);

// 启动服务
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

3. MongoDB连接配置
   确保后端已正确配置mongoose连接，例如在server.js中：

const mongoose = require('mongoose');

mongoose.connect('你的MongoDB连接字符串')
  .then(() => console.log('MongoDB连接成功'))
  .catch(err => console.error('MongoDB连接失败:', err));

四、对接验证步骤 #

1. 安装依赖：后端执行npm install express mongoose bcrypt cors，前端确保axios已安装
2. 启动后端服务，确认控制台输出“MongoDB连接成功”和“服务器运行在端口5000”
3. 启动前端项目，访问注册页面
4. 填写邮箱、用户名、密码提交，检查：
   • 控制台打印“注册成功”和用户信息
   • MongoDB数据库中新增了加密密码的用户文档
5. 用已注册的邮箱再次提交，验证前端显示“该邮箱已被注册”的错误提示

内容的提问来源于stack exchange，提问作者Max Hao