vue3动态验证码

首先下载了vant4组件库，element-plus组件库，配置了路由，及接口的封装

element-plus组件库可全局配置：快速开始 | Element Plus

vant4组件库，我是按需引入：Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

封装api接口，例如utils/api.js

// api.js
import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:3000', // 后端接口地址
  timeout: 5000,
})

export default api

将此文件引入到regs文件中

// Sidentify.vue
<template>
    <div class="s-canvas">
      <canvas id="s-canvas" :width="props.contentWidth" :height="props.contentHeight"></canvas>
    </div>
  </template>
   
  <script setup>
  import { onMounted, watch } from 'vue'
  
  const props = defineProps({
    identifyCode: {
      type: String,
      default: '1234'
    },
    fontSizeMin: {
      type: Number,
      default: 25
    },
    fontSizeMax: {
      type: Number,
      default: 35
    },
    backgroundColorMin: {
      type: Number,
      default: 255
    },
    backgroundColorMax: {
      type: Number,
      default: 255
    },
    colorMin: {
      type: Number,
      default: 0
    },
    colorMax: {
      type: Number,
      default: 160
    },
    lineColorMin: {
      type: Number,
      default: 40
    },
    lineColorMax: {
      type: Number,
      default: 180
    },
    dotColorMin: {
      type: Number,
      default: 0
    },
    dotColorMax: {
      type: Number,
      default: 255
    },
    contentWidth: {
      type: Number,
      default: 112
    },
    contentHeight: {
      type: Number,
      default: 40
    }
  })
  // 生成一个随机数
  const randomNum = (min, max) => {
    return Math.floor(Math.random() * (max - min) + min)
  }
   
  // 生成一个随机的颜色
  const randomColor = (min, max) => {
    let r = randomNum(min, max)
    let g = randomNum(min, max)
    let b = randomNum(min, max)
    return 'rgb(' + r + ',' + g + ',' + b + ')'
  }
   
  // 绘制干扰线
  const drawLine = (ctx) => {
    for (let i = 0; i < 5; i++) {
      ctx.strokeStyle = randomColor(props.lineColorMin, props.lineColorMax)
      ctx.beginPath()
      ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight))
      ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight))
      ctx.stroke()
    }
  }
  //在画布上显示数据
  const drawText = (ctx, txt, i) => {
    ctx.fillStyle = randomColor(props.colorMin, props.colorMax)
    ctx.font = randomNum(props.fontSizeMin, props.fontSizeMax) + 'px SimHei'
    let x = (i + 1) * (props.contentWidth / (props.identifyCode.length + 1))
    let y = randomNum(props.fontSizeMax, props.contentHeight - 5)
    var deg = randomNum(-45, 45)
    // 修改坐标原点和旋转角度
    ctx.translate(x, y)
    ctx.rotate((deg * Math.PI) / 180)
    ctx.fillText(txt, 0, 0)
    // 恢复坐标原点和旋转角度
    ctx.rotate((-deg * Math.PI) / 180)
    ctx.translate(-x, -y)
  }
  // 绘制干扰点
  const drawDot = (ctx) => {
    for (let i = 0; i < 80; i++) {
      ctx.fillStyle = randomColor(0, 255)
      ctx.beginPath()
      ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI)
      ctx.fill()
    }
  }
  //画图
  const drawPic = () => {
    let canvas = document.getElementById('s-canvas')
    let ctx = canvas.getContext('2d')
    ctx.textBaseline = 'bottom'
    // 绘制背景
    ctx.fillStyle = randomColor(props.backgroundColorMin, props.backgroundColorMax)
    ctx.fillRect(0, 0, props.contentWidth, props.contentHeight)
    // 绘制文字
    for (let i = 0; i < props.identifyCode.length; i++) {
      drawText(ctx, props.identifyCode[i], i)
    }
    drawLine(ctx)
    drawDot(ctx)
  }
  //组件挂载
  onMounted(() => {
    drawPic()
  })
  // 监听
  watch(
    () => props.identifyCode,
    () => {
      drawPic()
    }
  )
  </script>
  <style scoped lang="scss">
  .s-canvas {
    cursor: pointer;
  }
  </style>

页面布局元素

// regs.vue
<template>
    <div class="reg-all">
        <div class="reg-tu">123</div>
        <div class="reg-bt">
            <h1>注册</h1>
        </div>
        <van-form @submit="onSubmit" class="reg-login">
            <van-cell-group inset>
                <van-field v-model="phone" name="手机号" label="手机号" placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />
                <van-field v-model="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-model="code" type="code" name="验证码" label="验证码" placeholder="验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]" />
                <div class="reg-yzm" @click="refreshCode">
                    // 引入的模块
                    <SIdentify :identifyCode="identifyCode" class="code"></SIdentify>
                </div>
            </van-cell-group>
            <div style="margin: 0 16px;">
                <van-button block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
        <ul class="reg-bot">
            <li>忘记密码？</li>
            <li @click="router.push('/log')">密码登录</li>
        </ul>
    </div>
</template>

具体功能模块

// regs.vue
<script setup>
// 引入的模块
import SIdentify from './Sidentify.vue'
// 引入的接口地址
import api from './utils/api'
import { ElMessage } from 'element-plus'
import { Form, Field, CellGroup } from 'vant';
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
const router = useRouter()

const phone = ref('');
const password = ref('');
const code = ref('');
const onSubmit = (values) => {
    regs()
};

let identifyCode = ref('') //图形验证码
let identifyCodes = ref('1234567890abcdefjhijklinopqrsduvwxyz') //验证码出现的数字和字母

//组件挂载
onMounted(() => {
    identifyCode.value = ''
    makeCode(identifyCodes.value, 4)
})

// 生成随机数
const randomNum = (min, max) => {
    max = max + 1
    return Math.floor(Math.random() * (max - min) + min)
}
// 随机生成验证码字符串
const makeCode = (o, l) => {
    for (let i = 0; i < l; i++) {
        identifyCode.value += o[randomNum(0, o.length)]
        console.log('验证码:--',identifyCode.value);
    }
}
// 更新验证码
const refreshCode = () => {
    identifyCode.value = ''
    makeCode(identifyCodes.value, 4)
}
//登录
const regs = () => {
    //验证验证码不为空
    if (phone.value.length!==11) {
        ElMessage({ type: 'error', message: '手机号必须为11位' })
        return
    }
    if (password.value.length!==6) {
        ElMessage({ type: 'error', message: '密码必须为6位' })
        return
    }
    //验证验证码是否正确
    if (code.value != identifyCode.value) {
        ElMessage({ type: 'error', message: '验证码错误' })
        refreshCode()
        return
    } else {
        goes()  
    }
}

const goes= async () => {
      try {
        const response = await api.post('/l/regs', {
          username: phone.value,
          password: password.value
        })
        const data=response.data
        if(data.code==401){
            ElMessage({ type: 'error', message: data.message })
        }else{
            ElMessage({ type: 'success', message: 'go to 登录' })
            router.push('/log')
        }
      } catch (error) {
        console.error("登录失败：", error);
      }
    }
</script>

具体布局样式

// regs.vue
<style scoped lang="less"></style>
<style scoped >
.reg-all {
    text-align: center;
}

.reg-bt {
    margin: 180px 0 30px 0;
}

.reg-tu {
    background-color: aquamarine;
    height: 300px;
    border-radius: 50%;
    position: fixed;
    width: 375px;
    top: -150px;
}

.reg-bot {
    display: flex;
    justify-content: space-between;
    li {
        padding: 10px 20px;
        font-size: 14px;
        /* color: red; */
    }
}

.reg-yzm {
    width: 100px;
    height: 15px;
    background-color: red;
    position: relative;
    top: -40px;
    left: 220px;
    .code{
        height: 20px;
    }
}
</style>

效果展示：

?

?

前端提供，后端根据自己的需要自己写就好

大致思路：

注册时根据输入的手机号判断数据库中是否存在

如果存在就提示账户已存在

如果没有就接着注册自己的账号密码

登陆成功后跳转页面，跳到登录页

登录页输入刚刚创建的账号密码

成功后跳转到首页

逻辑很简单，自己试试看