一、引言
前端拿到了后端给的QQ邮箱发送验证码和验证验证码的接口之后，改如何将其融入到前端项目之中呢？
本文帮助大家在前端项目中整合QQ邮箱登录、注册、找回密码等功能
如果想学习后端如何编写QQ邮箱发送验证码和验证验证码的接口，请移步上回——
如何在springboot+vue项目中整合qq邮箱发送验证码实现登陆、注册、修改密码等功能(超简单无脑复制粘贴版)(后端部分) - 掘金 (juejin.cn)
二、代码部分
1.接口封装
找到你的vue项目中管理API的部分，在你想放置封装方法的地方加入以下代码
// 枚举管理注册模块接口地址
enum API {
// 注册接口地址
REGISTER = '/user/register',
GET_CODE = '/auth',
VERIFY_CODE = '/auth',
LOGIN = '/user/login',
FIND_PASSWORD = '/user/changePasswordByEmail',
}
//注册函数
export const goRegister = (user: userLogin) => {
// 直接传递 user 对象
return request.post(API.REGISTER, user)
}
export const getCode = (email: string) => {
return request
.post(`${API.GET_CODE}/send-code?email=${encodeURIComponent(email)}`) // 将 email 作为查询参数
.then((response) => response.data)
.catch((error) => {
console.error('获取验证码失败:', error)
throw error // 抛出错误以便调用者处理
})
}
export const verifyCode = (email: string, code: string) => {
return request
.post(
`${API.VERIFY_CODE}/verify-code?email=${encodeURIComponent(email)}&code=${encodeURIComponent(code)}`
) // 将 email 作为查询参数
.then((response) => response.data)
.catch((error) => {
console.error('校验验证码失败:', error)
throw error // 抛出错误以便调用者处理
})
}
export const goLogin = (email: string, password: string) => {
return request.post(API.LOGIN, { email, password })
}
export const findPassword = (email: string, password: string) => {
return request.post(API.FIND_PASSWORD, { email, password })
}
这里封装了来自后端的登录、注册、找回密码、发送验证码、验证验证码的接口，大家如果看了我的上一篇博客可以直接操作，如果没有也没关系只需要把API枚举类中的接口url改为自己后端工程的url即可
2.接口的使用
1.注册模块
在页面中的效果如下
编辑
下面是实现上述效果的html部分代码，css部分就不展示了，太多了，有需要的可以私聊我
<form class="form" v-show="register">
<p class="heading">注册账号</p>
<el-input
v-model="user.email"
style="width: 250px; height: 45px"
placeholder="邮箱"
/>
<div v-show="!validateEmail(user.email)" class="warning">请输入有效的邮箱格式！</div>
<el-input v-model="code" style="width: 150px; height: 45px" placeholder="验证码" />
<span class="space"
><el-button @click="toCode" color="#709DCA" plain>获取</el-button></span
>
<el-input
v-model="user.password"
style="width: 250px; height: 45px"
type="password"
placeholder="密码"
show-password
/>
<div v-show="!validatePassword(user.password)" class="warning">
密码至少8个字符,包含数字和特殊字符!
</div>
<button class="btn" @click="submitForm">立即注册</button>
<div class="space1" @click="toLogin" color="">返回登录</div>
</form>
下面对其中的部分方法进行解释
1)validateEmail(user.email)
代码如下
function validateEmail(email: string) {
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/
if (email == '') {
return true
}
return regex.test(email)
}
用来验证邮箱格式是否正确
2)validatePassword(returnPassword)
代码如下
function validatePassword(password: string) {
const regex = /^(?=.*[0-9])(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/
if (password == '') {
return true
}
return regex.test(password)
}
同理用来验证密码格式是否正确
3)@click="toCode"
这里是点击“获取”即会调用toCode方法
toCode方法代码如下
const toCode = () => {
getCode(user.email)
alert('验证码已发送')
}
用于向user.email所指向的邮箱发送验证码，getCode方法是我们在API部分封装的方法
4)@click="submitForm"
这里表示点击"立即注册"调用的方法
代码如下
async function submitForm() {
if (validateEmail(user.email) && validatePassword(user.password)) {
if (user.email == '' || user.password == '') {
alert('邮箱和密码不能为空')
return
}
const verificationResult = await verifyCode(user.email, code.value)
if (verificationResult !== '验证码验证成功') {
alert(verificationResult) // 显示验证码验证失败的消息
return // 终止后续流程
}
try {
// 使用 toRaw 将响应式对象转换为普通对象
const rawUser = toRaw(user)
await goRegister(rawUser)
console.log(rawUser)
alert('注册成功！')
// 在这里清空表单
user.email = ''
user.password = ''
code.value=''
} catch (error) {
alert('注册失败，请重试！')
}
} else {
alert('邮箱或密码格式错误')
}
}
改方法首先调用了validateEmail(user.email)和validatePassword(returnPassword)方法来验证邮箱和密码格式是否正确，若不正确便无法提交表单
之后调用verifyCode()方法用于验证验证码是否有效，改方法也是我们在API部分封装的方法
剩下的代码起到清空表单的作用，意思是注册成功之后将表单内的内容去除，更加美观
2.找回密码模块
在页面中的效果如下
编辑
同样，下面是实现上述效果的html部分代码，css部分就不展示了，太多了，有需要的可以私聊我
<form class="form" v-show="!login&&!register">
<p class="heading">找回密码</p>
<el-input
v-model="user.email"
style="width: 250px; height: 45px"
placeholder="邮箱"
/>
<div v-show="!validateEmail(user.email)" class="warning">请输入有效的邮箱格式！</div>
<el-input v-model="code" style="width: 150px; height: 45px" placeholder="验证码" />
<span class="space"
><el-button @click="toCode" color="#709DCA" plain>获取</el-button></span
>
<el-input
v-model="returnPassword"
style="width: 250px; height: 45px"
type="password"
placeholder="新密码"
show-password
/>
<div v-show="!validatePassword(returnPassword)" class="warning">
密码至少8个字符,包含数字和特殊字符!
</div>
<button class="btn" @click="toChange">确认修改</button>
<div class="space1" @click="toLogin" color="">返回登录</div>
</form>
其使用的方法和注册功能使用的方法大体一致，包括验证邮箱密码格式是否正确，发送验证码和验证验证码格式是否正确等，这里不再赘述
这里着重说明一下点击修改之后的方法 @click="toChange" ——
代码如下
async function toChange() {
const verificationResult = await verifyCode(user.email, code.value)
if (verificationResult !== '验证码验证成功') {
alert(verificationResult) // 显示验证码验证失败的消息
return // 终止后续流程
}
findPassword(user.email, returnPassword.value)
alert('修改成功')
}
这里主要是调用了一个findPassword()方法这个也是我们前文在API封装的方法
三、结语
至此，前端将后端的接口融入了我们的前端项目，希望本文可以帮助到大家
如果想学习后端如何编写QQ邮箱发送验证码和验证验证码的接口，请移步上回——
如何在springboot+vue项目中整合qq邮箱发送验证码实现登陆、注册、修改密码等功能(超简单无脑复制粘贴版)(后端部分) - 掘金 (juejin.cn)
