Node+Express+Mongoose+MongoDB注册登录功能实现

注册和登录是任何网站或应用最基本的功能之一。在以下内容中，我将详细介绍如何使用Node.js、Express、Mongoose和MongoDB实现注册和登录功能。

项目初始化

在开始编码之前，需要先初始化项目所需的技术栈：

安装必要的依赖：

使用npm安装Express和相关插件：

npm install express mongoose body-parser cookie-parser

安装MongoDB数据库（如果没有安装，需要先下载并安装MongoDB）。

创建项目文件结构：

项目根目录下创建app.js，这是应用的主文件。

创建routes目录用于存放路由文件。

创建models目录用于存放数据库模型。

创建utils目录用于存放一些常用工具函数。

##注册功能

1. 页面实现

在页面上，注册功能通常通过AJAX请求实现。具体步骤如下：

HTML页面：

JavaScript代码：

function signup() {  const username = document.getElementById('username').value;  const password = document.getElementById('password').value;  if (!username || !password) {    alert('请填写所有字段');    return;  }  // 使用AJAX发送请求  fetch('/api/signup', {    method: 'POST',    headers: {      'Content-Type': 'application/json',    },    body: JSON.stringify({      username,      password    }),  })  .then(response => response.json())  .then(data => {    if (data.success) {      alert('注册成功！请登录');    } else {      alert('注册失败：' + data.error);    }  });}

2. 后端处理

注册功能的后端处理逻辑主要在api.js中：

// 导入必要的模块const express = require('express');const router = express.Router();const mongoose = require('mongoose');const User = mongoose.model('User');// 定义路由router.post('/signup', async (req, res) => {  const { username, password } = req.body;    // 判断是否为空  if (!username || !password) {    return res.status(400).json({ success: false, error: '请填写所有字段' });  }    // 检查用户名是否已存在  const existingUser = await User.findOne({ username });  if (existingUser) {    return res.status(400).json({ success: false, error: '用户名已存在' });  }    // 创建新用户  const user = new User({    username,    password: require('bcrypt').hash(password, 10)  });    // 保存用户并返回响应  await user.save();  res.json({ success: true, message: '注册成功' });});

3. 数据库操作

在注册功能中，我们需要对数据库进行操作。以下是详细的步骤：

检查用户名是否存在：

const existingUser = await User.findOne({ username: username });

创建新用户：

const user = new User({  username: username,  password: hashedPassword});

保存用户数据：

await user.save();

登录功能

1. 页面实现

登录功能的页面实现与注册类似：

HTML页面：

JavaScript代码：

function login() {  const username = document.getElementById('username').value;  const password = document.getElementById('password').value;  if (!username || !password) {    alert('请填写所有字段');    return;  }  fetch('/api/login', {    method: 'POST',    headers: {      'Content-Type': 'application/json',    },    body: JSON.stringify({      username,      password    }),  })  .then(response => response.json())  .then(data => {    if (data.success) {      alert('登录成功！');      // 可以在这里设置cookie来保存用户信息      window.location.href = '/home';    } else {      alert('登录失败：' + data.error);    }  });}

2. 后端处理

登录功能的后端处理逻辑也在api.js中：

router.post('/login', async (req, res) => {  const { username, password } = req.body;    if (!username || !password) {    return res.status(400).json({ success: false, error: '请填写所有字段' });  }    const user = await User.findOne({ username });    if (!user) {    return res.status(400).json({ success: false, error: '账号或密码错误' });  }    const isPasswordCorrect = await user.comparePassword(password);  if (!isPasswordCorrect) {    return res.status(400).json({ success: false, error: '账号或密码错误' });  }    // 设置cookie保存用户信息  res.cookie('user', {    id: user.id,    username: user.username  });    res.json({ success: true, message: '登录成功' });});

3. cookie设置

为了保存用户登录状态，可以使用cookie-parser来设置cookie：

const cookieParser = require('cookie-parser');app.use(cookieParser());// 在路由处理后设置cookieres.cookie('user', {  id: user.id,  username: user.username});

退出登录

退出登录功能可以通过清除cookie来实现：

router.get('/logout', (req, res) => {  res.clearCookie('user');  res.json({ success: true, message: '已成功退出登录' });});

整体结构

整个项目的文件结构可以如下：

app.js: 主控制器文件，包含Express路由和中间件routes:  |  -- api.js: 处理注册、登录等API路由  |  -- login.js: 登录相关路由  |  -- signup.js: 注册相关路由models:  |  -- user.js: 用户模型定义utils:  |  -- auth.js: 身份验证相关工具