VUE+SPRINGBOOT从0-1打造前后端-前后台系统-注册实现

在现代Web应用中，用户注册是一个基础而重要的功能。本文将详细介绍如何使用Vue.js前端框架和SpringBoot后端框架实现一个完整的邮箱注册功能，包含验证码发送、表单验证等关键环节。

一、功能概述

这个注册系统主要包含以下功能点：

1. 用户填写邮箱、验证码和密码进行注册

2. 邮箱验证码发送与验证

3. 表单前端验证

4. 密码加密存储

5. 默认用户信息设置

二、前端实现

1. Vue组件结构

前端使用Vue.js框架，结合Element UI组件库实现了一个简洁的注册表单：

<template>
  <div class="Register-container">
    <div class="allClass">
      <div class="titleClass"><b>没有账号请邮箱注册</b></div>
      <el-form :rules="ruleList" :model="user" ref="userForm">
        <!-- 邮箱输入 -->
        <el-form-item prop="name">
          <el-input placeholder="请输入您的邮箱" v-model="user.name" prefix-icon="el-icon-message"></el-input>
        </el-form-item>
        
        <!-- 验证码输入 -->
        <el-form-item prop="code">
          <el-input placeholder="邮箱收到的验证码" v-model="user.code" prefix-icon="el-icon-lock"></el-input>
          <el-button type="primary" @click="getEmailCode">获取验证码</el-button>
        </el-form-item>
        
        <!-- 密码输入 -->
        <el-form-item prop="password">
          <el-input placeholder="请设置密码" v-model="user.password" show-password></el-input>
        </el-form-item>
        
        <!-- 操作按钮 -->
        <div class="buttonClass">
          <el-button type="primary" @click="registerClick">注册用户</el-button>
          <el-button type="warning" @click="$router.push('/login')">返回登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

2. 表单验证

使用Element UI的Form组件内置验证功能：

ruleList: {
  name: [
    {required: true, message: '请输入您的邮箱账号', trigger: 'blur'},
    {min: 3, max: 60, message: '长度在3-60个字符', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请设置密码', trigger: 'blur'},
    {min: 3, max: 60, message: '长度在3-60个字符', trigger: 'blur'}
  ],
  code: [
    {required: true, message: '请输入收到的验证码', trigger: 'blur'},
    {min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur'}
  ]
}

3. 核心方法

获取验证码方法：

getEmailCode() {
  if (!this.user.name) {
    this.$message.warning("请输入邮箱账号")
    return
  }
  // 邮箱格式验证
  if (!/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(this.user.name)) {
    this.$message.warning("请输入正确的邮箱账号")
    return
  }
  // 发送请求
  this.$http.post("/big/email_code", this.user).then(res => {
    if (res.data.code === "200") {
      this.$message.success("邮箱验证码发送成功，请到对应邮箱查看")
    } else {
      this.$message.error(res.data.message)
    }
  })
}

注册方法：

registerClick() {
  this.$refs["userForm"].validate(valid => {
    if (valid) { // 表单校验合法
      this.$http.post("/big/register", this.user).then(res => {
        if (res.data.code === "200") {
          this.$router.push("/login")
          this.$message.success("注册成功，请登录！")
        } else {
          this.$message.error(res.data.message)
        }
      });
    }
  })
}

4. 样式设计

使用CSS实现了渐变背景和卡片式布局：

.Register-container {
  height: 100vh;
  background-image: linear-gradient(to bottom right, deepskyblue, darkcyan);
  overflow: hidden;
}

.allClass {
  margin: 200px auto;
  background-color: #ffffff;
  width: 350px;
  height: 400px;
  padding: 20px;
  border-radius: 10px;
}

三、后端实现

1. 注册接口

@PostMapping("/register")
public Res register(@RequestBody User user) {
    // 验证码校验
    QueryWrapper<Email> emailQueryWrapper = new QueryWrapper<>();
    emailQueryWrapper.eq("email", user.getName());
    Email existEmail = emailMapper.selectOne(emailQueryWrapper);
    if (existEmail != null && !existEmail.getCode().equals(user.getCode())) {
        if (existEmail.getCode().isEmpty()) {
            return Res.error(Constants.CODE_600, "验证码已经失效，请重新获取验证码");
        } else {
            return Res.error(Constants.CODE_600, "验证码验证失败，请检查验证码是否填写正确");
        }
    }
    
    // 验证码使用后清空
    if (existEmail != null && (existEmail.getCode() != null)) {
        existEmail.setCode("");
        emailMapper.updateById(existEmail);
    }
    
    // 检查用户是否已存在
    QueryWrapper<User> userQueryWrapper = new QueryWrapper<>();
    userQueryWrapper.eq("name", user.getName());
    User existUser = userMapper.selectOne(userQueryWrapper);
    if (existUser != null) {
        return Res.error(Constants.CODE_600, "用户名已经存在，请更换用户名");
    }
    
    // 设置默认用户信息
    user.setNick("人工智能-热爱者");
    user.setRole("人工智能");
    user.setPassword(MyUtils.getSHA256StrJava(user.getPassword())); // 密码加密
    user.setBalance(String.valueOf(10)); // 默认10次调用次数
    user.setAvatar("https://wdfgdzx.top:3333/document/cd39af3e175b4524890c267e07298f5b.png");
    
    userMapper.insert(user);
    return Res.success(null);
}

2. 关键点解析

1. 验证码验证：

   • 查询数据库验证码记录

   • 比较用户输入的验证码

   • 验证后清空验证码防止重复使用

2. 用户唯一性检查：

   • 通过用户名(邮箱)查询是否已存在

3. 安全措施：

   • 密码使用SHA256加密存储

   • 验证码一次性使用

4. 默认信息设置：

   • 昵称、角色、头像、初始余额等

四、技术亮点

1. 前后端分离架构：Vue.js前端 + SpringBoot后端，通过RESTful API交互

2. 表单验证双重保障：

   • 前端使用Element UI进行基础验证

   • 后端进行业务逻辑验证

3. 安全性考虑：

   • 密码加密存储

   • 验证码机制防止机器注册

   • 验证码一次性使用

4. 用户体验优化：

   • 清晰的错误提示

   • 表单实时验证

   • 操作反馈消息

五、总结

本文详细讲解了一个完整的邮箱注册功能的实现过程，从前端页面到后端接口，涵盖了表单验证、验证码发送与验证、密码加密等关键环节。这种实现方式具有良好的安全性和用户体验，可以广泛应用于各种Web系统中。

在实际项目中，还可以进一步优化：

1. 添加图片验证码防止刷接口

2. 实现验证码有效期限制

3. 增加密码强度检测

4. 添加注册邮件通知功能

希望本文对大家实现用户注册功能有所帮助！