VUE+SPRINGBOOT实现邮箱注册、重置密码、登录功能

随着互联网的发展,网站用户的管理、触达、消息通知成为一个网站设计是否合理的重要标志。目前主流互联网公司都支持手机验证码注册、登录。但是手机短信作为服务端网站是需要付出运营商通信成本的,而邮箱的注册、登录、重置密码,无疑成为了这一问题的最佳解决方案,那么如何通过VUE+SPRINGBOOT实现邮箱网站用户的注册、登录、重置密码呢?下面直接说明效果和代码实现。体验网址点击可以访问:whiteicon-default.png?t=O83Ahttps://wdfgdzx.top/login

一、VUE注册界面,核心逻辑在邮箱正则验证+邮箱验证码发送与存储。

<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-form-item prop="xxx"才能生效--><el-input placeholder="请输入您的邮箱" size="medium" class="inputOneClass" prefix-icon="el-icon-message"v-model="user.name" autocomplete="new-password"></el-input></el-form-item><el-form-item prop="code"><!--邮箱获取的验证码,放置非法注册--><el-input placeholder="邮箱收到的验证码" size="medium" class="inputOneClass" prefix-icon="el-icon-lock"v-model="user.code" style="width: 188px;"></el-input><el-button type="primary" size="medium" class="ml-10" @click="getEmailCode">获取验证码</el-button></el-form-item><el-form-item prop="password"><el-input placeholder="请设置密码" size="medium" class="inputOneClass" prefix-icon="el-icon-lock"v-model="user.password"show-password autocomplete="new-password"></el-input></el-form-item><div class="buttonClass"><el-button type="primary" size="medium" autocomplete="off" @click="registerClick">注册用户</el-button><el-button type="warning" size="medium" autocomplete="off" @click="$router.push('/login')">返回登录</el-button></div></el-form></div></div>
</template><script>
export default {name: "Register",data() {return {user: {},ruleList: { // 在return的第一级别写name: [{required: true, message: '请输入您的邮箱账号', trigger: 'blur'},{min: 3, max: 20, message: '长度在3-9个字符', trigger: 'blur'}],password: [{required: true, message: '请设置密码', trigger: 'blur'},{min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur'}],code: [{required: true, message: '请输入收到的验证码', trigger: 'blur'},{min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur'}]}}},methods: {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}// 都通过请求发送邮箱验证码---name的值其实就是用户邮箱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 => { // 调用后端注册方法// console.log(res.data)if (res.data.code === "200") {this.$router.push("/login")this.$message.success("注册成功,请登录!")} else {this.$message.error(res.data.message)}});}})}}
}
</script><style scoped>
.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;
}.titleClass {margin: 20px 0;text-align: center;font-size: 24px;
}.inputOneClass {margin: 10px 0;
}.buttonClass {margin: 10px 0;text-align: right;
}
</style>

二、后端发送与存储逻辑

@PostMapping("/email_code") // 也需要配置可以直接访问public Res email_code(@RequestBody User user) {if (StringUtils.isBlank(user.getName())) {return Res.error(Constants.CODE_400, "参数错误");}QueryWrapper<Email> emailQueryWrapper = new QueryWrapper<>();emailQueryWrapper.eq("email", user.getName());Email existEmail = emailMapper.selectOne(emailQueryWrapper);Date nowTime = new Date();long diffLongTime = 0L;if (existEmail != null && existEmail.getSendTime() != null) { // 首次注册必为空diffLongTime = nowTime.getTime() - existEmail.getSendTime().getTime(); // 所以如果为空则直接放行,不为空在这里获取时间差距if (diffLongTime <= (5 * 60 * 1000)) {return Res.error(Constants.CODE_600, "您的验证码5分钟内有效,请到您的邮箱查看验证码,或者请您5分钟后再获取。");}}// 发送邮箱验证码SimpleMailMessage simpleMailMessage = new SimpleMailMessage();simpleMailMessage.setFrom("wdfgdzx@126.com"); // 这个发件人必须设置,和配置的一样Date sendDate = new Date();simpleMailMessage.setSentDate(sendDate);simpleMailMessage.setSubject("【人人都有人工智能注册验证码】");String code = RandomUtil.randomNumbers(4);simpleMailMessage.setText("您本次邮箱注册的验证码是:【" + code + "】,请妥善保管,切勿泄露。");simpleMailMessage.setTo(user.getName()); // 用户输入的邮箱Email emailEntity = new Email();emailEntity.setEmail(user.getName());emailEntity.setCode(code);emailEntity.setSendTime(sendDate);if (existEmail == null) { // 验证码存储与更新逻辑emailMapper.insert(emailEntity); // 不存在则插入} else {emailMapper.update(emailEntity, emailQueryWrapper); // 存在则升级code,根据邮箱名称升级}javaMailSender.send(simpleMailMessage);return Res.success(null); // 返回200即可}@PostMapping("/register")public Res register(@RequestBody User user) {User existUser;// 比对验证码QueryWrapper<Email> emailQueryWrapper = new QueryWrapper<>();emailQueryWrapper.eq("email", user.getName());Email existEmail = emailMapper.selectOne(emailQueryWrapper);if (existEmail != null && !existEmail.getCode().equals(user.getCode())) {// System.err.println(existEmail.getCode());// System.err.println(existEmail.getCode() == null);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);}try {QueryWrapper<User> userQueryWrapper = new QueryWrapper<>();userQueryWrapper.eq("name", user.getName());existUser = userMapper.selectOne(userQueryWrapper); // 新技术// existUser = userMapper.selectUserByName(user);} catch (Exception e) { // 如果系统中存在多条等异常情况e.printStackTrace();return Res.error(Constants.CODE_500, "系统错误");}if (existUser != null) {return Res.error(Constants.CODE_600, "用户名已经存在,请更换用户名");}user.setNick("人工智能-热爱者"); // 默认的昵称user.setRole("人工智能"); // 默认角色user.setPassword(MyUtils.getSHA256StrJava(user.getPassword())); // 密码用SHA256加密存储user.setAvatar("https://wdfgdzx.top:3333/document/cd39af3e175b4524890c267e07298f5b.png"); // 设置默认头像,这个每次需要变动的 发布V1.0后再修改userMapper.insert(user); // 不存在,开始插入到数据库return Res.success(null); // 返回200即可}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/59852.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PyTorch——从入门到精通:PyTorch基础知识(张量)【PyTorch系统学习】

什么是张量&#xff08;Tensor&#xff09; ​ 张量在数学中是一个代数对象&#xff0c;描述了与矢量空间相关的代数对象集之间的多重线性映射。张量是向量和矩阵概念的推广&#xff0c;可以理解为多维数组。作为数学中的一个基本概念&#xff0c;张量有着多种类型&#xff0c;…

自动化生成边界测试和极端情况测试用例

在软件测试中&#xff0c;边界测试和极端情况测试是确保代码健壮性和容错能力的关键步骤。许多软件缺陷和错误往往发生在输入数据的边界值或极端情况下。手动生成这些测试用例不仅费时费力&#xff0c;而且容易遗漏。幸运的是&#xff0c;OpenAI的强大功能可以帮助软件测试工程…

ARM(安谋) China处理器

0 Preface/Foreword 0.1 参考博客 Cortex-M23/M33与STAR-MC1星辰处理器 ARM China&#xff0c;2018年4月established&#xff0c;独立运行。 1 处理器类型 1.1 周易AIPU 1.2 STAR-MC1&#xff08;星辰处理器&#xff09; STAT-MC1&#xff0c;主要为满足AIOT应用性能、功…

OpenCV:VideoWriter.write()导致内存不断增长(未解决)

以前某个应用&#xff0c;专门把opencv独立为进程&#xff0c;完成后自动释放。当时我还想优化一下&#xff0c;比如减少frame&#xff0c;结果一点用没用。 这次专门一下&#xff0c;结论就是&#xff1a;每次执行write()&#xff0c;内存必然增加。 输出版本号&#xff0c;是…

如何使用Django写个接口,然后postman中调用

好的&#xff0c;下面是一个详细的步骤&#xff0c;展示如何使用 Django 创建一个简单的 API 接口&#xff0c;并在 Postman 中进行调用。 1. 创建 Django 项目和应用 首先&#xff0c;确保你已经安装了 Django。如果还没有安装&#xff0c;可以使用以下命令安装&#xff1a;…

nfs服务器作业

1.NFS服务器可以让PC将网络中的NFS服务器共享的目录挂载到本地端的文件系统中&#xff0c;而在本地端的系统 中看来&#xff0c;那个远程主机的目录就好像是自己的一个磁盘分区。 2.RPC服务 &#xff1a; 由于当服务器在启动NFS时会随机 选取数个端口号&#xff0c;并主动向RP…

Android中perform和handle方法的区别——以handleLaunchActivity与performLaunchActivity为例

在Android系统中&#xff0c;perform和handle方法经常出现在关键流程中&#xff0c;分别承担不同的职责。这种命名约定反映了框架设计中的分层思想&#xff0c;帮助开发者区分任务的调度与实现。本文通过handleLaunchActivity和performLaunchActivity这两个典型方法的源码分析&…

拉取docker镜像应急方法

发现许多docker hub镜像网址速度也慢得发指啦&#xff0c;如果想速度快点&#xff0c;可以考虑买个按量计费的公有云服务器&#xff0c;用他们的内网镜像&#xff0c;然后再导出&#xff0c;然后传到本地。 开通服务器 可以考虑个开通最低配的&#xff0c;这里我用的是腾讯的…

论文解读《Personalized LoRA for Human-Centered Text Understanding》

引言&#xff1a;感觉这篇蛮不错的&#xff0c;读一读。学一学如何在 LLMs&#xff08;文中说的是PLMs&#xff0c;不过我觉得可以理解为 LLMs&#xff09; 的结构上做改进 ✅ NLP 研 2 选手的学习笔记 笔者简介&#xff1a;Wang Linyong&#xff0c;NPU&#xff0c;2023级&…

SpringBoot+React养老院管理系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码1.入住合同文件上传2.添加和修改套餐的代码3.查看入住记录代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBootReact框架开发的养老院管理系统。首先…

【C++】红黑树封装map—set

1 .关联式容器 C中的map是标准模板库&#xff08;STL&#xff09;中的一种关联容器&#xff0c;它存储的是键值对&#xff08;key-value pairs&#xff09;&#xff0c;其中每个键都是唯一的。 键值对&#xff1a; 用来表示具有一一对应关系的一种结构&#xff0c;该结构中一…

药房智链:中药实验管理的供应链优化

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了中药实验管理系统的开发全过程。通过分析中药实验管理系统管理的不足&#xff0c;创建了一个计算机管理中药实验管理系统的方案。文章介绍了中药实验管理系统的系…

Unity学习---IL2CPP打包时可能遇到的问题

写这篇主要是怕自己之后打包的时候出问题不知道怎么搞&#xff0c;所以记录一下。 问题一&#xff1a;类型裁剪 IL2CPP打包后会自动对Unity工程的dll进行裁剪&#xff0c;将代码中没有引用到的类型裁剪掉。特别是通过反射等方式调用一些类的时候&#xff0c;很容易出问题。 …

商城小程序的流程渠道拓展

传统印象里&#xff0c;小程序的开发制作似乎很难&#xff0c;尤其是商城类型且功能体系完善的&#xff0c;事实也确实如此&#xff0c;没有较高的技术和成本投入或团队各个流程的专业人员合作&#xff0c;很难开发出来成品&#xff0c;或者质量较低。 当然对于大公司来说&…

Linux网络:守护进程

Linux网络&#xff1a;守护进程 会话进程组会话终端 守护进程setsiddaemon 在创建一个网络服务后&#xff0c;往往这个服务进程是一直运行的。但是对于大部分进程来说&#xff0c;如果退出终端&#xff0c;这个终端上创建的所有进程都会退出&#xff0c;这就导致进程的生命周期…

发布jar包到maven仓库中的命令

将JAR包发布到Maven仓库中&#xff0c;可以通过以下步骤和命令来完成&#xff1a; 安装到本地Maven仓库 如果你只是想将JAR包安装到本地Maven仓库中&#xff0c;以便在当前机器上的其他Maven项目可以使用&#xff0c;可以使用以下命令&#xff1a; bash mvn install:instal…

基于gradio+networkx库对图结构进行可视化展示

前言 在gradio框架下对蛋白质-蛋白质相互作用网络&#xff08;PPI网络&#xff09;进行可视化&#xff0c;并将其在网页前端进行展示。 方法 其实很简单 可以直接使用networkx画图后保存图片&#xff0c;然后使用Gradio框架的image组件进行展示即可。 但实际上gradio还配置…

Remora

Remora Remora 模型能够独立于碱基识别过程预测甲基化/修饰碱基的状态。Remora 仓库专注于准备修饰碱基训练数据和训练修饰碱基模型。此外,还提供了一些用于运行 Remora 模型和调查原始信号的功能。对于生产环境中的修饰碱基识别,建议使用 Dorado <https://github.com/na…

【大数据学习 | HBASE高级】hive操作hbase

一般在查询hbase的数据的时候我们可以直接使用hbase的命令行或者是api进行查询就行了&#xff0c;但是在日常的计算过程中我们一般都不是为了查询&#xff0c;都是在查询的基础上进行二次计算&#xff0c;所以使用hbase的命令是没有办法进行数据计算的&#xff0c;并且对于hbas…

Rust:原子操作 AtomicBool

在 Rust 中&#xff0c;你可以使用 std::sync::atomic 模块来进行原子操作。原子操作在多线程环境中特别有用&#xff0c;因为它们可以确保操作的原子性和可见性&#xff0c;从而避免数据竞争和其他并发问题。 为了读取和设置布尔值&#xff0c;你可以使用 AtomicBool 类型。以…