首先下载了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 + 1return 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.dataif(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>

效果展示：

 

 

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

大致思路：

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

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

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

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

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

成功后跳转到首页

逻辑很简单，自己试试看