SpringBoot项目实战杂货铺登录注册功能附邮箱验证以及头像绑定（三）

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

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

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

账号根据数据库中的账号一次递增࿰c;默认加载出来࿰c;显示在账号输入框࿰c;且为不可编辑状态。

邮箱验证

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

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

输入邮箱࿰c;并点击发送验证码：

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

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

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

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

上传头像

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

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

点击上传图片后࿰c;我们来看看效果：

选择图片后：

显示上传成功࿰c;我们来到默认路径下看看文件是否已经生成：

如图࿰c;图片命名已经重置为账号。

注册功能

如果再没有输入相应的必填信息时࿰c;点击注册会提示相应的字段未填：

其他字段未填写效果相同࿰c;就不一一展示了。

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

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

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

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

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

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

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

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;

/**
 * 由于头像文件是存储在本地的项目路径以外的盘符下࿰c;所以需配置前端访问本地路径下文件
 *
 * @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/");
    }
}

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

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

登录

接下来我们将刚才注册好的账号进行等录操作࿰c;既可以看到前端主页面显示的此账号相关信息：

代码已经同步开源至GitHub中࿰c;有需要的同学可以私聊博主。