vue 实现 登录验证码功能代码

Vue 实现登录验证码功能的代码可以分为前端和后端两部分。

前端部分：

在登录页面中添加验证码输入框和验证码图片展示区域：

<template>
  <div>
    <input type="text" v-model="captcha" placeholder="请输入验证码">
    <img :src="captchaUrl" @click="refreshCaptcha">
  </div>
</template>

在 script 标签中定义相关数据和方法：

<script>
export default {
  data() {
    return {
      captcha: '',
      captchaUrl: ''
    }
  },
  methods: {
    // 刷新验证码图片
    refreshCaptcha() {
      this.captchaUrl = '/api/captcha?' + Math.random()
    }
  },
  mounted() {
    this.refreshCaptcha()
  }
}
</script>

后端部分：

后端需要实现一个生成验证码图片的接口，该接口返回一个包含验证码图片和验证码值的 JSON 数据。可以使用第三方库 `captcha` 生成验证码图片。

from flask import Flask, jsonify, make_response
from captcha.image import ImageCaptcha
import random

app = Flask(__name__)

# 生成验证码图片的接口
@app.route('/api/captcha')
def generate_captcha():
    # 随机生成验证码
    captcha = ''.join(random.sample('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', 4))
    # 生成验证码图片
    image = ImageCaptcha().generate_image(captcha)
    # 将验证码图片转为二进制流
    image_data = image.getvalue()
    # 将验证码保存在 session 中
    session['captcha'] = captcha.lower()
    # 返回包含验证码图片和验证码值的 JSON 数据
    response = make_response(image_data)
    response.headers['Content-Type'] = 'image/png'
    return response

if __name__ == '__main__':
    app.run()

在前端的登录页面中，通过调用 `/api/captcha` 接口获取验证码图片和验证码值，并在页面中展示。用户输入验证码后，将验证码值和用户名密码一起提交到后端进行验证。