全棧實現發送驗證碼注冊賬號全棧開發之路—

全棧開發一條龍——前端篇
第一篇：框架確定、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,rdfrom 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,rdfrom mail_send import is_valid_email,send_email,random_code,save_random_codeuser_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"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"width="115"height="24"><path fill="none" d="M0 0h24v24H0z"></path><pathfill="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中查看

添加成功~