全栈开发一条龙——前端篇
第一篇：框架确定、ide设置与项目创建
第二篇：介绍项目文件意义、组件结构与导入以及setup的引入。
第三篇：setup语法，设置响应式数据。
第四篇：数据绑定、计算属性和watch监视
第五篇 : 组件间通信及知识补充
第六篇：生命周期和自定义hooks
第七篇：路由
第八篇：传参
第九篇:插槽，常用api和全局api。
全栈开发一条龙——全栈篇
第一篇：初识Flask&MySQL实现前后端通信
第二篇： sql操作、发送http请求和邮件发送
第三篇：全栈实现发送验证码注册账号
本章将实现另一种防刷和验证的方法：图像验证码的实现，在这之后，我们介绍一些基础知识。
图像验证码的生成和显示
1）后端
如果我们不想要验证邮箱的真实性，但又想要防刷，就需要用图像验证码。
我们简单的实现一下。
from PIL import ImageDraw,Image
import io
from flask import make_response
首先我们导入库，PIL是pillow库，如果你没有，可以pip install pillow安装。是用来绘制图片验证码的。
io是用来实现内存（缓存）存储图片的。
make_response用来写返回格式。
接下来，我们先定义画布
size是一个元组，左边是宽，右边是长。
img_size = (240,70)
image = Image.new("RGB",img_size,'white')
然后我们定义绘图工具并生成随机序列（之前博客中实现过的）
draw = ImageDraw.Draw(image,'RGB')
verify_code = random_code(pure_num=False)
然后将内容画到画布上，.text方法的属性意义为：横坐标/纵坐标 内容 内容颜色
for i in verify_code:
draw.text( (20+40*counter,28) , i , 'purple' )
counter += 1
最后设置文件流对象buf，将图片存进内存。用response定制返回值，在请求头中规定返回类型为图片，最后将内容返回即可。
buf = io.BytesIO()
image.save(buf,'png')
response = make_response(buf.getvalue())
#设置请求头
response.headers['Content-Type'] = 'image/png'
return response
最后效果如下
然后封装为类视图就好啦~完整代码如下：
from PIL import ImageDraw,Image
import io
from flask import make_response
class image_verify(MethodView):
def get(self):
img_size = (240,70)
image = Image.new("RGB",img_size,'white')
draw = ImageDraw.Draw(image,'RGB')
verify_code = random_code(pure_num=False)
counter = 0
for i in verify_code:
draw.text( (20+40*counter,28) , i , 'purple' )
counter += 1
buf = io.BytesIO()
image.save(buf,'png')
response = make_response(buf.getvalue())
response.headers['Content-Type'] = 'image/png'
return response
user_view.add_url_rule("/image_verify_code/",view_func=image_verify.as_view("image_verify") )
注：用文件流来存储，可以极大程度上节省服务器的硬盘空间。
2）前端
我们首先要实现将图像验证码显示在前端
<img :src="urcl" >
let urcl = ref("http://127.0.0.1:5000/image_verify_code/")
这样最基础的就做好了。
但是这不够，我们先加一个很简单的功能：点击验证码就给你换一个新的。
我们先给图片绑定一个click方法
<img :src="urcl" @click="refresh">
编辑方法：
function refresh(){
urcl.value = "http://127.0.0.1:5000/image_verify_code/" + "?i=" + Math.ceil( Math.random()*10 )
}
我们通过给图片url加上一个参数来实现刷新（url变了就要重新加载图片）
?i= 表示传递参数i，math一块是随机数，*10表示在10以内随机
最后，我们给点击图片的时候的鼠标加一些样式
img{
cursor: pointer;
}
这样鼠标在到图片这里之后，可以变成小手，这样使用者就知道可以点击了
<template>
<input type="text" name="text" placeholder="请输入你的验证码" class="input" v-model="user_id">
<button @click="refresh">验证</button>
<img :src="urcl" @click="refresh">
<h1>{{ test }}</h1>
<h2>{{ urcl }}</h2>
</template>
<script setup name="image_verify">
import {ref} from 'vue'
let code = ref("")
let urcl = ref("http://127.0.0.1:5000/image_verify_code/")
let test = ref(1)
function verify(){
}
function refresh(){
urcl.value = "http://127.0.0.1:5000/image_verify_code/" + "?i=" + Math.ceil( Math.random()*10 )
test.value = test.value+1
}
</script>
<style>
.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;
}
img{
cursor: pointer;
}
</style>
完整代码如上。
图像的验证跟之前邮箱验证码区别不大，就不重复了。
补充1：用session实现缓存
我们之前用redis数据库实现了缓存，事实上，也可以用session实现缓存。
我们要先导入库from flask import session
session事实上是将数据放在网页cookie中一起返回，所以我们要设置一个密码来加密
以下是基本操作
在浏览器发请求的时候，你就可以看到
最后的结果是完全可以逆向解密获取到数据的
为了让session跟redis一样有一个自动失效的时间限制，我们可以设置以下它的生命周期：
补充2：上下文管理器
with关键字可以使用上下文管理器，在使用的时候自动返回enter函数返回的值，在用完之后会自动执行exit函数中的内容。我们封装上下文管理器可以帮助我们有效节约空间、保护文件等的安全。
我们使用文件输入输出的时候，经常写with open xxx as xxx，实际上就是python帮我们写的一个上下文管理器，我们可以用如下方法手动写一个文件操作的上下文管理器：
exit中的第二个属性 *args是因为我们不知道会用到哪些参数，写这个可以涵盖所有参数。
在我们之前一直用的注册业务的例子中，我们可以用上下文管理器来定义数据库，这样可以在使用数据库完毕后自动关闭数据库，使用方法如下：
1326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
