vue实现账号注册功能

Vue 实现账号注册功能

前端部分

创建注册表单组件，包含用户名、密码、确认密码和邮箱等字段：

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

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      },
      error: ''
    }
  },
  methods: {
    async handleSubmit() {
      if (this.form.password !== this.form.confirmPassword) {
        this.error = '两次输入的密码不一致'
        return
      }
      try {
        const response = await axios.post('/api/register', this.form)
        // 注册成功后的处理，如跳转登录页
        this.$router.push('/login')
      } catch (err) {
        this.error = err.response.data.message || '注册失败'
      }
    }
  }
}
</script>

后端API部分

使用Node.js和Express创建注册接口：

const express = require('express')
const bcrypt = require('bcrypt')
const User = require('../models/User') // 假设有User模型

const router = express.Router()

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

    // 检查用户是否已存在
    const existingUser = await User.findOne({ $or: [{ username }, { email }] })
    if (existingUser) {
      return res.status(400).json({ message: '用户名或邮箱已存在' })
    }

    // 密码加密
    const hashedPassword = await bcrypt.hash(password, 10)

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

    await newUser.save()
    res.status(201).json({ message: '注册成功' })
  } catch (error) {
    res.status(500).json({ message: '服务器错误' })
  }
})

module.exports = router

表单验证

添加前端表单验证逻辑：

validateForm() {
  if (!this.form.username.trim()) {
    this.error = '请输入用户名'
    return false
  }
  if (!this.form.email.trim()) {
    this.error = '请输入邮箱'
    return false
  }
  if (!this.isValidEmail(this.form.email)) {
    this.error = '请输入有效的邮箱地址'
    return false
  }
  if (this.form.password.length < 6) {
    this.error = '密码长度不能少于6位'
    return false
  }
  return true
},

isValidEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return re.test(email)
}

密码强度检查

实现密码强度检查功能：

checkPasswordStrength(password) {
  let strength = 0
  if (password.length >= 8) strength++
  if (/[A-Z]/.test(password)) strength++
  if (/[0-9]/.test(password)) strength++
  if (/[^A-Za-z0-9]/.test(password)) strength++

  return {
    level: strength,
    text: ['弱', '中', '强', '非常强'][strength - 1] || ''
  }
}

注册成功处理

注册成功后跳转登录页并显示提示：

this.$router.push({ 
  path: '/login',
  query: { registered: 'true' }
})

在登录页组件中检查URL参数：

created() {
  if (this.$route.query.registered === 'true') {
    this.successMessage = '注册成功，请登录'
  }
}