当前位置: article > 正文

SpringBoot项目实战杂货铺登录注册功能附邮箱验证以及头像绑定（三）_springboot写一个带头像上传的用户注册

作者：我家自动化 | 2024-04-09 14:38:14

踩

springboot写一个带头像上传的用户注册

在常规情况下的网商项目中，会用到Spring Cloud微服务，这里将在下一期中对Spring Cloud微服务的五大组件进行一个介绍。

在上一期中，SpringBoot项目实战杂货铺登录功能（二）杂货铺更新了登录功能，今天带来注册功能页面，在注册界面中加入了邮箱绑定验证，以及头像的上传保存。

我们由登录界面点击去注册，切换到注册模块的div：

注册模块div
账号根据数据库中的账号依次递增，默认加载出来，显示在账号输入框，且为不可编辑状态。

邮箱验证

输入邮箱，点击发送验证码后，所填写的邮箱就会收到一个随机六位数的验证码，同时存储在数据库中，我们来看看效果。

如果对于邮件发送不知道怎么写的同学，可以查看一下博主的这篇文章Java发送邮件一行代码解决，里面有超级详细的解释。

输入邮箱，并点击发送验证码：

当我们重复点击发送验证码时：
重复发送验证码

将发送的验证码记录于数据库中，可再根据验证码的创建时间设置验证码的有效时长：

数据库存储验证码

我们再来看看邮箱中有没有收到验证码：
邮箱中接收验证码

这个验证码用于最后点击注册时核对此验证码是否是正确。

上传头像

头像上传，我们默认保存在本地路径下的D盘中，具体路径为D:\storeProject\image\，在image包下生成一个当天日期的包，例如今天是2021-10-17，默认路径为D:\storeProject\image\20211017，我们的头像就默认储存在这个包下，用于前端显示。

在将图片保存到本地以后，我们将图片重命名为账号的名字。

点击上传图片后，我们来看看效果：
选中图片
选择图片后：
上传头像
显示上传成功，我们来到默认路径下看看文件是否已经生成：
头像保存
如图，图片命名已经重置为账号。

注册功能

如果再没有输入相应的必填信息时，点击注册会提示相应的字段未填：
没有输入密码的注册
没有输入用户名的注册
其他字段未填写效果相同，就不一一展示了。

我们填写号相应的字段，再次点击注册按钮。

当我们输入的验证码错误时，点击注册按钮提示验证码错误，并且注册失败：

我们输入刚才邮件里面接收到的验证码显示注册成功即可进行登录：

当我们注册成功再次点击注册按钮时，提示您已注册：

在这里插入图片描述

此处会将图片路径同步存储到用户表中：

头像路径数据库存储
然后我们前端将这个路径回显到相应的img标签上就可以展示出来了。

注意，这里默认是不可以访问本地资源的，所以我们还需要写一个类配置一下我们的静态资源访问路径：

package com.gantiexia.webconfig;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 由于头像文件是存储在本地的项目路径以外的盘符下，所以需配置前端访问本地路径下文件
 *
 * @author GanTieXia
 * @date 2021/10/17 2:58
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/storeProject/image/**").addResourceLocations("file:D:/storeProject/image/");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这样配置以后前端也买你就可以成功访问本地资源了。

当我们重复使用同一个邮箱进行绑定注册时，会提示此邮箱已被绑定：

邮箱重复绑定