全栈开发一条龙——前端篇
第一篇：框架确定、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中查看
添加成功~
