当前位置：首页 > news >正文

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

news 2025/8/5 16:25:33

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

一、功能概述

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

用户填写邮箱、验证码和密码进行注册
邮箱验证码发送与验证
表单前端验证
密码加密存储
默认用户信息设置

二、前端实现

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);
}