vue图片验证码怎么写

<code class="sh">npm install vue-captcha</code>

<code class="js">// Captcha.vue
<template>
  <div>
    <img :src="captchaUrl" alt="验证码">
    <input v-model="input" placeholder="请输入验证码">
    <button @click="submit">提交</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></code>

<code class="php">// 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);

?></code>

<code class="js">// submit.js
axios.post('/api/captcha/verify', { captcha: this.input }).then((res) => {
  if (res.data.success) {
    // 验证码验证成功
    // ...
  } else {
    // 验证码验证失败
    // ...
  }
});</code>

<code class="js">// Captcha.vue
<template>
  <!-- ... -->
  <button @click="refreshCaptcha">刷新验证码</button>
  <!-- ... -->
</template></code>