注册模块的实现
创建注册模块的蓝图
在modelus包下创建package包--passport,并在该包下创建views.py文件
在init.py中创建蓝图对象:
from flask import Blueprint
passport_blue = Blueprint('passport',__name__,url_prefix='/passport')
from . import views
在create_app函数中注册蓝图对象:
from newsInfo.modules.passport import passport_blue
app.register_blueprint(passport_blue)
验证码
查看响应的js事件
点击注册后,主要实现的内容就是验证码和手机验证码的实现,
那么首先检查一下验证码的前端代码块:
该验证码有一个响应事件generateImageCode(),那么我们就在js代码中寻找这个事件:
编写generateImageCode()函数
var imageCodeId = ""
var preimageCodeId = ""
// TODO 生成一个图片验证码的编号,并设置页面中图片验证码img标签的src属性
function generateImageCode() {
imageCodeId = generateUUID() //获取不重复的随机字符串
//验证码图片地址
image_url = '/passport/image_code?cur_id='+imageCodeId+'&pre_id='+preimageCodeId+''
//每触发一次之间就替换一次src的地址
$('.get_pic_code').attr('src',image_url)
//记录图片的编号
preimageCodeId = imageCodeId
}
分析:该函数在每次要生成一个随机字符串,用于获取验证码的地址,并且每触发一次该函数,就改变一次随机值,最后要记录该值。并且验证码地址的url也是要与后台相匹配的。
编写views代码
对于验证码,要使用到一个工具包,这个工具包一般保存在一个叫utils的包下。
- 首先在newsInfo包下新建utils包,把captcha文件复制到该包下。
这时候可能会报错,因为验证码使用的pillow模块未安装
安装即可pip install Pillow
还有一个response_code.py文件也复制到utils包下,与captcha同一级别。
在captcha文件下有一个capycha.py.运行一下:
打印输出的是:
这个aptcha.generate_captcha()就是我们要用的东西。
2.因为我们要生成验证码图片并且要保存到redis数据库用于登陆验证,所以要先配置一下redis数据库:
redis.StrictRedis(host=config.RDIES_HOST,port=config.RDIES_PORT)
要把这个数据库设定为一个全局的变量,
在newsInfo/init.py:
1.在函数外设定一个变量
redis_store = None
2.在函数中尽心配置该变量的初始化工作
# 初始化全局redis配置
global redis_store
redis_store = redis.StrictRedis(host=config.RDIES_HOST,port=config.RDIES_PORT)
3.在之前在create_app()中配置了redis数据库
在passport/views.py编写生成验证码图片的代码:
from . import passport_blue
from flask import request, jsonify, current_app, make_response
from newsInfo.utils.response_code import RET
from newsInfo.utils.captcha.captcha import captcha
from ... import redis_store, constants
'''图片验证码'''
#功能描述: 图片验证码
#请求地址: /passport/image_code?cur_id=xxx&pre_id=xxx
#请求方式: GET
#请求参数: 随机字符串(uuid)cur_id, 上一个字符串:pre_id
#返回值: 返回图片
@passport_blue.route('/image_code')
def get_image_code():
'''
思路:
1.获取参数
2.校验参数,查看参数的存在性
3.利用captcha工具获取验证码信息
4.保存到redis中
5.返回验证码图片信息
:return:
'''
#1.获取url中?后的参数,也就是get方式访问携带的参数
cur_id = request.args.get('cur_id')
pre_id = request.args.get('pre_id')
#2.校验参数
if not cur_id:
return jsonify(errno = RET.PARAMERR,errmsg='参数不全')
#3.生成图片验证码
try:
#获取图片信息
name,text,image_data = captcha.generate_captcha()
#保存到redis中
'''
参数1:保存到redis的key
参数2:图片验证码的text文本
参数3:过期时间
'''
redis_store.set('image_code:%s'%cur_id,text,constants.IMAGE_CODE_REDIS_EXPIRES)
#判断有没有上一个图片的编号
if pre_id:
#释放该编号的验证码信息
redis_store.delete('image_code:%s'%pre_id)
except Exception as e:
current_app.logger.error(e)
return jsonify(errno = RET.DBERR,errmsg='验证码操作失败')
#返回验证码图片信息
response = make_response(image_data) #16进制信息
#把回应头改为image格式
response.headers['Content-Type'] = 'image/jpg'
return response
具体的分析已经在代码中。
运行:
1.在首页中点击右上角 --- 注册按钮:
生成验证码:
2.点击验证码图片
重新生成验证码:
3.点击立即登录按钮
在点击立即注册按钮
重新生成验证码
在redis数据库中始终只存储一个验证码图片的信息,当生成新的验证码时,就删除旧的验证码。
这三种情况就对应了main.js中generateImageCode()函数的调用情况:
网友评论