在 vue 中实现图片验证码可以有效防止恶意请求和垃圾邮件,步骤如下:安装依赖项:npm install vue-captcha创建组件:captcha.vue,显示和验证验证码在服务器端生成验证码:captcha.php发送验证请求并验证:submit.js刷新验证码:refreshcaptcha 方法
Vue 图片验证码指南
简介
图片验证码可有效防止恶意请求和垃圾邮件,在需要身份验证的 Web 应用程序中广泛使用。在 Vue 中实现图片验证码相对简单,本文将介绍如何实现。
1. 安装依赖
首先,使用 npm 安装所需的依赖项:
npm install <a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15721.html" target="_blank">vue</a>-captcha
2. 创建组件
创建一个 Vue 组件,用于显示和验证图片验证码:
// Captcha.vue
<template><div>
<img :src="captchaUrl" alt="验证码"><input v-model="input" placeholder="请输入验证码"><button>提交</button>
</div>
</template><script>
import VueCaptcha from 'vue-captcha';
export default {
components: { VueCaptcha },
data() {
return {
captchaUrl: null,
input: '',
};
},
methods: {
refreshCaptcha() {
this.captchaUrl = `/api/captcha?t=${new Date().getTime()}`;
},
submit() {
// 发送验证码到服务器进行验证
// ...
},
},
mounted() {
this.refreshCaptcha();
},
};
</script>
3. 在服务器端生成验证码
在服务器端创建一个 API 端点来生成图片验证码:
// captcha.php
<?php // 生成随机验证码
$captcha = rand(1000, 9999);
// 创建验证码图片
$image = imagecreate(100, 40);
$textColor = imagecolorallocate($image, 0, 0, 0);
imagestring($image, 5, 20, 10, $captcha, $textColor);
// 输出验证码图片
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
?>
4. 发送验证请求并验证
当用户输入验证码后,发送一个验证请求到服务器:
// submit.js
axios.post('/api/captcha/verify', { captcha: this.input }).then((res) => {
if (res.data.success) {
// 验证码验证成功
// ...
} else {
// 验证码验证失败
// ...
}
});
5. 刷新验证码
当用户输入错误或需要刷新验证码时,调用 refreshCaptcha 方法:
// Captcha.vue
<template><!-- ... --><button>刷新验证码</button>
<!-- ... -->
</template>