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

   
  
  

页面布局元素

// regs.vue

具体功能模块

// regs.vue

具体布局样式

// regs.vue

效果展示：

 

动态验证码

 

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

大致思路：

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

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

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

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

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

成功后跳转到首页

逻辑很简单，自己试试看