全栈实现发送验证码注册账号全栈开发之路——全栈篇（3）

TTTi9er

已于 2024-05-16 22:57:23 修改

阅读量1.3k

点赞数 52

文章标签： vue.js vue 前端全栈开发 flask mysql

于 2024-05-16 22:15:46 首次发布

本文链接：https://blog.csdn.net/m0_74475812/article/details/138876198

版权

全栈开发一条龙——前端篇
第一篇：框架确定、ide设置与项目创建
第二篇：介绍项目文件意义、组件结构与导入以及setup的引入。
第三篇：setup语法，设置响应式数据。
第四篇：数据绑定、计算属性和watch监视
第五篇 : 组件间通信及知识补充
第六篇：生命周期和自定义hooks
第七篇：路由
第八篇：传参
第九篇:插槽，常用api和全局api。
全栈开发一条龙——全栈篇
第一篇：初识Flask&MySQL实现前后端通信
第二篇： sql操作、发送http请求和邮件发送

上次我们实现了发邮件，这次我们来实现一个场景：发送随机验证码，限时5分钟，通过才能注册账号。本文将一步步展开实现这个小功能。
先配置好redis库：参考资料使用zip安装方式更加方便快捷。

后端

一、生成随机验证码

要实现随机验证码，我们先引入python自带的random

def random_code(pure_num = True):
    if pure_num == True:
        rand_temp = random.randint(100000,999999)
        rand_str = str(rand_temp)
    else:
        base_str = "0123456789qwertyuiopasdfghjklzxcvbnm"
        rand_str=""
        for _ in range(6):
            rand_str += random.choice(base_str)
    return rand_str

我们首先加入一个判断，需要的随机序列是否需要是纯数字，如果是我们就生成一个6位数，然后转化为str。如果不是纯数字，我们先写一个选择序列，就是所有数字和字母的字符串，然后用随机函数抽取，添加到我们的结果字符串中，最后返回。
注意不要忘记给rand_str赋初值，不然不能用rand_str += xxx.

有很多人喜欢写列表推导式

性能确实不错，但如果你是我同事，我也略懂一些拳脚。

二、保存验证码

我们首先进入data文件，配置以下redis数据库对象

import redis
rd = redis.Redis(decode_responses=True)

然后我们去业务文件mail_send.py中进行缓存操作。

from data import rd

先导入redis对象
然后用原子操作设定数据对应关系和缓存时间

def save_random_code(email,code,lifelong=300):
    error_ju = rd.setex(email,lifelong,code)
    #返回是否保存成功
    return error_ju

第二行代码参数分别是 key 周期 value
周期就是数据存在的时间，单位是s，此处就是数据存在5分钟。

save_random_code(email="scls@qq.com", code=random_code() , lifelong=50)

测试一下，打开redis的cli界面，发现是存储成功的

过了我设置的50秒lifelong之后再次查询

发现缓存消失了。

redis-cli的语句有如下几句，各位可以自行测试：
ttl key 看剩下的生命周期
get key 查看数据
keys * 查看有哪些key

三、验证邮箱&蓝图创建

接下来，我们准备进入发送验证邮件的步骤了，我们首先要验证邮箱的合法性

import re
def is_valid_email(email):
    ex_email = re.compile(r'^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$')
    #匹配正则
    res = ex_email.match(email)
    return bool(res)

这里正则看不懂没关系，正常业务中都是直接上网查的。此处就是保证一下邮箱的基本格式，然后我们在发邮件，用验证码的方式判断邮箱是否是真实的。

我们为这个发邮件功能专门写一个蓝图（为了方便管理，事实上就是解耦合、对象封装的思想）

from flask import Blueprint,jsonify,request
from flask.views import MethodView
from data import db,rd

from mail_send import is_valid_email
user_view = Blueprint("user_view",__name__)

class code_sending_verify(MethodView):
    def get(self):
        email = request.args.get("email",None)
        if not email:
            return jsonify( {"errcode":1,"msg":"缺失邮箱"} )
        if not is_valid_email(email=email):
            return jsonify( {"errcode":2,"msg":"邮箱不合法"} )
        return jsonify( {"errcode":0,"msg":"发送成功"} )
   
#配置类视图
user_view.add_url_rule("/sendcode/",view_func=code_sending_verify.as_view("code_sending_verify")  )

然后再manage中注册蓝图

from user_verify import user_view
app.register_blueprint(user_view)

这样我们就为/sendcode/路由加上功能了。
然后我们用test尝试是否有bug

res = httpapi.test_get("http://localhost:5000/sendcode/",data={"email":"123123@163.com"})    
res = res.encode('utf-8').decode('unicode_escape')
print(res)

四、功能整合

最后，我们将功能整合，通过get方式访问这个路径就可以完成以下逻辑：
如果传入了一个有效邮箱，那就发送验证码并保存，不然就抛出那一步遇到问题。

from flask import Blueprint,jsonify,request
from flask.views import MethodView
from data import db,rd

from mail_send import is_valid_email,send_email,random_code,save_random_code


user_view = Blueprint("user_view",__name__)

class code_sending_verify(MethodView):
    def get(self):
        # 传入邮箱
        email = request.args.get("email",None)
        if not email:
            return jsonify( {"errcode":1,"msg":"缺失邮箱"} )
        if not is_valid_email(email=email):
            return jsonify( {"errcode":2,"msg":"邮箱不合法"} )
        mail = send_email()
        verify_code = random_code()

        mail.send_mail(dest_mail=email,title="验证码",content=verify_code)
        correctly_save = save_random_code(email=email,code=verify_code,lifelong=180)
        
        if not correctly_save:
            return jsonify( {"errcode":3,"msg":"保存失败"} )
        

        return jsonify( {"errcode":0,"msg":"发送成功"} )
    

#配置类视图
user_view.add_url_rule("/sendcode/",view_func=code_sending_verify.as_view("code_sending_verify")  )

前端

入口文件

下载阿里的组件库，这用就不用你亲自写样式，非常方便
npm install antd

注：如果以下内容有提示报错，请去env.d.ts中加入declare module '*.vue’就好了

import testapi from '@/components/API1.vue'

先把app（前端入口文件写好）

<template>
  <testapi/>   
</template>


<script setup name="app">

import testapi from '@/components/API1.vue'

</script>

<style>
</style>

然后我们主要写组件。

实现组件

style中是样式，可以网上直接找的，不再多说。
说说思路，我们现在上方添加一个输入框，用于输入邮箱，然后将这个数据绑定给email。
然后我们写一个按钮，这个按钮绑定一个方法，点击之后，将email传给我们刚刚发邮箱的后端代码。
然后接收返回值，打印到控制台上方便调试
我们的axios是用来方便我们发送方http请求的，是第三方库，使用很便捷，输入npm i axios就可以安装了。

alert方法是window.alert方法的简写，可以用来唤出提示框

window还有许多很好用的方法和属性，这里附上中文说明window详细说明

完整代码如下：

<template>

<div>
<!-- <input type="text" name="text" placeholder="请输入你的注册id" class="input" v-model="user_id"> -->
<input type="text" name="text" placeholder="请输入你的注册邮箱" class="input" v-model="email">
<!-- <input type="text" name="text" placeholder="请输入你的用户名" class="input" v-model="name">
<input type="text" name="text" placeholder="请输入你的密码" class="input" v-model="pwd"> -->


<button @click="send_mail">
  <div class="svg-wrapper-1">
    <div class="svg-wrapper">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        width="115"
        height="24"
      >
        <path fill="none" d="M0 0h24v24H0z"></path>
        <path
          fill="currentColor"
          d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
        ></path>
      </svg>
    </div>
  </div>
  <span>Send</span>
</button>


</div>

<!-- 
<div>
      <h3>{{ user_id }}</h3>
      <h3>{{ email }}</h3>
      <h3>{{ name }}</h3>
      <h3>{{ pwd }}</h3>

</div> -->
</template>


<script setup name="testapi">
    import { ref } from 'vue';
    import axios from 'axios';
    let user_id =ref("")
    let email =ref("")
    let name =ref("")
    let pwd =ref("")
    

    async function send_mail(){
       try{
      let result=await axios.get('http://127.0.0.1:5000/sendcode/',{params:{email:email.value}})
      if(result.data.errorcode != 0)
            {window.alert(result.data.msg)}
       console.log(result.data)
         } catch(error){alert(error)}
           
    }



</script>


<style>
/* id */
.input[type = "text"] {
  display: block;
  color: rgb(34, 34, 34);
  background: linear-gradient(142.99deg, rgba(217, 217, 217, 0.63) 15.53%, rgba(243, 243, 243, 0.63) 88.19%);
  box-shadow: 0px 12px 24px -1px rgba(0, 0, 0,0.18);
  border-color: rgba(7, 4, 14, 0);
  border-radius: 50px;
  block-size: 20px;
  margin: 7px auto;
  padding: 18px 15px;
  outline: none;
  text-align: center;
  width: 200px;
  transition: 0.5s;
}
.input[type = "text"]:hover {
  width: 240px;
}
.input[type = "text"]:focus {
  width: 280px;
}
/* id */

/* button_send */
button {
  font-family: inherit;
  font-size: 20px;
  background: royalblue;
  color: white;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}

button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

button:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

button:hover span {
  transform: translateX(5em);
}

button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}

/* button_send */
</style>

开放局域网端口

我们用 npm run dev -- --host 0.0.0.0 --port 5173来启动我们的前端服务，然后把我们刚刚写好的访问后端的网址改成后端的服务端口

可以在我们启动后端服务的地方看到

之后我们的前端服务会跳出来我们可以访问的局域网网址，在手机上也可以访问哦~

验证码验证和数据库操作

我们先在api中再加入一个按钮，绑定一个方法


    async function verify_code(){
       try{
       let result=await axios.get('http://127.0.0.1:5000/verify_code/',{params:{    
            email:email.value,
            code:verify_code_txt.value,
            id:user_id.value,
            password:pwd.value,
            name : name.value}})

        window.alert(result.data.msg)
         } catch(error){
           alert(error)

        }         
    }

跟之前一样，讲数据传递给后端进行验证

class verify_code(MethodView):
    #验证验证码
    def get(self):

        email=request.args.get("email",None)
        id=request.args.get("id",None)
        name=request.args.get("name",None)
        password=request.args.get("password",None)
        verify_code = request.args.get("code",None)
        print(email,id,name,password,verify_code,"\n\n\n\n")



        saved_code = rd.get(email)
        
        if not saved_code:
            return jsonify( {"errcode":5,"msg":"未向该邮箱发送验证码或超时"} )
        
        if saved_code != verify_code:
            return jsonify( {"errcode":6,"msg":"验证码错误"} )
        
        res = test_post("http://localhost:5000/insert/",data={"id":id,"name":name,"email":email,"password":password})

        return jsonify( {"errcode":0,"msg":"注册成功"} )
        
user_view.add_url_rule("/verify_code/",view_func=verify_code.as_view("verify_code")  )

我们先判断，如果验证码是一样的，拿我们就调用之前写好的加入数据库的接口。
进入mysql中查看

添加成功~