【SDU项目实训2019级】前端设计——注册界面，向后端发送获取验证码请求，后端存储验证码到redis，实现注册功能

柔情只为你懂 2023-09-28 09:06 5阅读 0赞

登录的页面展示在另外的博客，以下实现注册功能的基本表单的标签 ：

<div class="form-group">
                          <label for="fullName" class="form-label">用户名</label>
                          <input type="text" class="form-control" id="fullName" placeholder="请输入你的用户名" v-model="user_name">
                        </div>
                        <div class="form-group">
                          <label for="userPass" class="form-label">密码</label>
                          <input type="password" class="form-control" id="userPass" placeholder="请输入你的密码" v-model="user_pass">
                        </div>
                        <div class="form-group">
                          <label for="userNumber" class="form-label">手机号码</label>
                          <input type="text" class="form-control" id="userNumber" placeholder="请输入你的手机号" v-model="user_phoneNum">
                        </div>
                        <div class="form-group">
                          <label for="userYzm" class="form-label">验证码</label>
                          <input type="text" class="form-control" id="userYzm" placeholder="请输入验证码" v-model="user_yzm">
                          <div class="search-btn1" style="width: 120px;text-align: center">
                            <label @click="getValidCode()" :disabled="disabled" :btnTitle="btnTitled" :class="{active:disabled}">{
       {btnTitled}}</label>
                          </div>
                        </div>
                        <div class="contact-btn pb-0">
                          <a class="btn-1 causes-btn" @click = "Register()">立即注册</a>
                        </div>

注册页面展示：

![96faf76a60c943d99ca2478306603e31.png][]

获取手机短信验证码的基本函数：

![59c6097589e140f6beda2f222f3c3231.png][]

向后端发送获取验证码请求，后端会调用发送短信平台接口提供的方法向该用户手机发送验证码，然后将该手机号和验证码作为键值对存到redis数据库，有效时间为5分钟，需要用户在5分钟之内完成注册。

Controller代码：

![98b0496838644eb6abb289bba2521a98.png][]

![0e2abb8bd37a4c42a5cdc60dc178af96.png][]

Dao层代码：

![584b52539f1b4912a928b8cd03078773.png][]

然后是前端注册功能的实现：

点击立即注册触发的函数：

![7f8c205ad4bc471297ffd01cb960c3e2.png][]

后端注册的Controller：

![f448ee59256f49f3b2fa640c1fd1b838.png][]

![df6e2a3812ef4f1c82e673651bb7e4a5.png][]

![567b4ffb99e24939a777f5281cf92f66.png][] Dao层代码就不展示了~

这是项目实现注册功能的基本流程实现：

①用户填写用户名、密码、手机号

②点击获取验证码，前端判断以及向后端发送获取验证码请求

③发送验证码

④用户填写验证码，点击立即注册，前端向后端发送注册请求

⑤后端验证+完成注册，保存用户信息至数据库，添加用户登录状态信息，返回结果

注册之后会跳转到职业、专业、感兴趣推荐页面，由用户选择。

[96faf76a60c943d99ca2478306603e31.png]: https://img-blog.csdnimg.cn/96faf76a60c943d99ca2478306603e31.png
[59c6097589e140f6beda2f222f3c3231.png]: https://img-blog.csdnimg.cn/59c6097589e140f6beda2f222f3c3231.png
[98b0496838644eb6abb289bba2521a98.png]: https://img-blog.csdnimg.cn/98b0496838644eb6abb289bba2521a98.png
[0e2abb8bd37a4c42a5cdc60dc178af96.png]: https://img-blog.csdnimg.cn/0e2abb8bd37a4c42a5cdc60dc178af96.png
[584b52539f1b4912a928b8cd03078773.png]: https://img-blog.csdnimg.cn/584b52539f1b4912a928b8cd03078773.png
[7f8c205ad4bc471297ffd01cb960c3e2.png]: https://img-blog.csdnimg.cn/7f8c205ad4bc471297ffd01cb960c3e2.png
[f448ee59256f49f3b2fa640c1fd1b838.png]: https://img-blog.csdnimg.cn/f448ee59256f49f3b2fa640c1fd1b838.png
[df6e2a3812ef4f1c82e673651bb7e4a5.png]: https://img-blog.csdnimg.cn/df6e2a3812ef4f1c82e673651bb7e4a5.png
[567b4ffb99e24939a777f5281cf92f66.png]: https://img-blog.csdnimg.cn/567b4ffb99e24939a777f5281cf92f66.png