nuxt3模拟手机验证码

前言

真实应该要连接短信验证码服务，但是众所周知所有的服务和IT都是靠服务来挣钱的，所以我们目前只能模拟手机验证码登陆

考虑到账号的唯一值就想到了手机和验证码(基本上的网站都会使用)但是输入手机号后有"获取验证码"的操作，这个操作就是需要供应商支持(交钱)但是身无分文的我又没有像别人一样有收入来源所以我这里模拟的手机注册登陆的效果共大家做参考。

里面还有nuxt使用qrcode的方法，大家可以看看

前端

需要安装

yarn add nuxt-mongodb

yarn add --dev @types/mongodb

#生成二维码的依赖
yarn add qcode

<!--app.vue-->
<script setup lang="ts">
import Qrcode from 'qrcode.vue';
import ysn_kt from "./public/images/ysn_kt.png"
import type {
      Reactive } from 'vue';

const qrcodeRef = ref(null)

interface phoneInter {
     
  phone:string,//手机号
  can:string,//验证码
}

const phoneReactive:Reactive<phoneInter> = reactive({
     
  phone:"",
  can:""
})

//是否显示登陆页
const isLoginShow = ref(false)
//扫码配置
const qrcodeValue = ref("hello world") //扫码后里面的信息
const qrcodeSize = ref(200) //二维码的大小
const qrcodeColor = ref("#09fff7") //二维码的颜色
const qrcodeBack = ref("#ffffff")//二维码的背景颜色
const logoMargin = 5 // Logo 边距
const logoScale = 0.2 // Logo 缩放比例

//打开登陆
function goToLogin(){
     
  isLoginShow.value = true
  // new Qrcode('')
}
//关闭登陆
function closeLogin(){
     
  isLoginShow.value = false
}

//发送验证码
async function postSubCan(){
     
  fetch('/api/getPhone',{
     
    method: 'POST',
    body: JSON.stringify(phoneReactive),
    headers:{
     
      'Content-Type': 'application/json'
    }
  }).then(async res =>{
     return res.json()}).then(async(data:any) => {
     
    console.log(data)
    //弹出验证码
    alert(`你的验证码是:${
       data.message.can}`)
  }).catch(err=>console.log(err))
}

//注册用户
function postRegisterUser(){
     
  fetch('/api/registerUser',{
     
    method:'POST',
    body:JSON.stringify(phoneReactive),
    headers:{
     
      'Context-Type':"application/json"
    }
  }).then(async res =>{
     return res.json()}).then(async(data:any) => {
     
    console.log(data)
  }).catch(err=>console.log(err))
}
</script>

<template>
  <!-- 登陆页面 -->
  <div ref="loginRef" v-if="isLoginShow" class="loginClass">
    <div class="masterBox">
      <div @click="closeLogin()" class="closeBtn">关闭</div>
      <div class="scanNameTitle">扫码登陆</div>
      <div class="qrcodeClass">
        <qrcode :value="qrcodeValue" 
        :foreground="qrcodeColor"
        :margin="1"
        :logo-src="ysn_kt" 
        :logo-scale="logoScale"
        :logo-margin="logoMargin"
        :size="qrcodeSize" class="qrcodeMaster" 
        ref="qrcodeRef"/>
        <div class="phoneRegNameTitle">手机注册</div>
        <div class="phoneRegMaster">
          <input type="text" v-model="phoneReactive.phone" placeholder="手机号" />
          <input type="text" v-model="phoneReactive.can" placeholder="验证码" />
          <button @click="postSubCan">发送验证码</button><br />
          <button @click="postRegisterUser">注册</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 主页 -->
  <div class="">
    <nuxt-link to="/" class="">首页</nuxt-link>
    <nuxt-link to="/">测试</nuxt-link>
    <span @click="goToLogin()" class="loginBtn">登录</span>
  </div>
  <div>
    <nuxt-page></nuxt-page>
  </div>
</template>

<style scoped>
/*样式，可以自定义*/
.loginClass{
     
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100%);
  height: calc(100%);
  background: rgba(0, 0, 0, .3);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginBtn{
     
  user-select: none;
  cursor: pointer;
}
.masterBox{
     
  width: 70%;
  height: 70%;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}
.closeBtn{
     
  position: absolute;
  right: calc(20%);
  top: calc(20%);
  user-select: none;
  cursor: pointer;
}
.qrcodeClass{
     
  position: relative;
  left: 100px;
  top: 200px;
  width: 200px;
  height: 200px;
  /* background: rgba(0, 255, 200, 1); */
}
.qrcodeMaster{
     
  border: 2px solid #09fff7; /* 添加边框 */
  padding: 10px; /* 添加内边距 */
  border-radius: 15px;
}
.scanNameTitle{
     
  position: absolute;
  left: 26%;
  top: 30%;
  font-size: calc(20px);
}
/* 注册样式 */
.phoneRegNameTitle{
     
  position: absolute;
  left: 190%;
  top: -40%;
  width: 40%;
  font-size: 20px;
}
.phoneRegMaster{
     
  position: absolute;
  left: 150%;
  top: -5%;
  width: 150%;
  height: 100%;
  /* background: rgba(255, 100, 100, 1); */
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

后端

/server/api/getPhone.ts

// server/api/getPhone.ts (模拟获取验证码服务)
//接口
interface phoneInter {
   
    phone:string,
    can:string,//验证码
}

//随机浮点数
function getRandomFloatInRange(min: number, max: number): number {
   
    return Math.random() * (max - min) + min;
}
//随机四位整数
function getRandomFourDigitInt(): number {
   
    return Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000;
}

//导出can信息
export let canMes:number = 0



//只有注册账号才能使用(模拟手机短信发送(因为真正的短信发送要钱))
export default defineEventHandler(async(event:any)=><