当前位置：首页 > VUE

vue注册功能实现

2026-01-19 09:39:49VUE

Vue 注册功能实现

前端实现

使用 Vue.js 和 Axios 发送注册请求到后端 API：

<template>
  <div>
    <form @submit.prevent="register">
      <input v-model="username" placeholder="用户名" required>
      <input v-model="email" placeholder="邮箱" type="email" required>
      <input v-model="password" placeholder="密码" type="password" required>
      <button type="submit">注册</button>
    </form>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      email: '',
      password: '',
      error: ''
    };
  },
  methods: {
    async register() {
      try {
        const response = await axios.post('/api/register', {
          username: this.username,
          email: this.email,
          password: this.password
        });
        console.log('注册成功:', response.data);
        this.$router.push('/login');
      } catch (err) {
        this.error = err.response?.data?.message || '注册失败';
      }
    }
  }
};
</script>

后端实现（Node.js Express）

创建注册 API 端点处理用户注册：

vue注册功能实现

const express = require('express');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const User = require('../models/User');

const router = express.Router();

router.post('/register', async (req, res) => {
  try {
    const { username, email, password } = req.body;

    // 检查用户是否已存在
    const existingUser = await User.findOne({ email });
    if (existingUser) {
      return res.status(400).json({ message: '用户已存在' });
    }

    // 哈希密码
    const hashedPassword = await bcrypt.hash(password, 12);

    // 创建新用户
    const newUser = new User({
      username,
      email,
      password: hashedPassword
    });

    await newUser.save();

    // 生成 JWT token
    const token = jwt.sign(
      { userId: newUser._id },
      process.env.JWT_SECRET,
      { expiresIn: '1h' }
    );

    res.status(201).json({ token, userId: newUser._id });
  } catch (error) {
    res.status(500).json({ message: '注册失败' });
  }
});

module.exports = router;

数据验证

在前端和后端都应进行数据验证：

前端验证示例：

vue注册功能实现

methods: {
  validateForm() {
    if (!this.username || !this.email || !this.password) {
      this.error = '所有字段都必须填写';
      return false;
    }
    if (this.password.length < 6) {
      this.error = '密码长度至少为6个字符';
      return false;
    }
    return true;
  },
  async register() {
    if (!this.validateForm()) return;
    // 其余注册代码...
  }
}

后端验证示例（使用 express-validator）：

const { body, validationResult } = require('express-validator');

router.post('/register', 
  [
    body('email').isEmail().normalizeEmail(),
    body('password').isLength({ min: 6 }),
    body('username').not().isEmpty().trim().escape()
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }
    // 其余注册代码...
  }
);