ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

首页渲染及图形验证码

2022-06-20 21:32:19  阅读:185  来源: 互联网

标签:blue code 渲染 image 验证码 文件夹 首页 passport import


一、首页渲染

在templates文件夹下新建一个news文件夹,用来存放前端页面,然后将index.html拖动到news文件夹中。

 

 

 将static文件和templates文件拖动到info文件夹中。

 

 

 在views.py中写入渲染画面相关代码

 

 

 二、设置左上角图标

 在views.py写入下列代码

from flask import render_template,current_app

@blue_index.route('/favicon.ico')
def favicon():
    return current_app.send_static_file("news/favicon.ico")

如果运行没显示出来图标,就改一下端口号

 

三、图形验证码

在modiles文件夹中新建一个passport文件夹

在passport文件夹中新建views.py

 

 

 

 

 

 passport文件夹里的init.py中写入蓝图

from flask import Blueprint

blue_passport = Blueprint("passport",__name__)

from . import views

 passport文件夹里的views.py写入视图函数

from . import blue_passport

@blue_passport.route("/image_code")
def image_code():
    pass

 

在info中的init里注册蓝图

from info.modules.passport import blue_passport

app.register_blueprint(blue_passport)

 

补全前端代码

// TODO 生成一个图片验证码的编号,并设置页面中图片验证码img标签的src属性
function generateImageCode() {
    // 生成uuid
    imageCodeId = generateUUID();
    // url:必须要能访问到image_code视图
    var url = '/passport/image_code?imageCodeId='+imageCodeId;
    // 将url赋值给img标签的src属性,只要src属性给赋值一个url,会立即向该url发送请求
    $('.get_pic_code').attr('src', url);
}

测试js代码是否配置成功

 

 

 后端逻辑思路:

 

 

 相关代码

from . import blue_passport
from flask import request,abort,make_response
from info.utils.captcha.captcha import captcha
from info import sr
from info import constants

@blue_passport.route("/image_code")
def image_code():
    #1、接收参数
    imageCodeId = request.args.get("imageCodeId")
    #2、校验参数
    #   2.1 校验uuid是否存在
    if not image_code:
        return abort(403)
    #3、生成图片验证码
    name,imageCodetext,imageCodeimage = captcha.generate_captcha()
    #4、将文字的验证码信息存到redis中
    try:
        sr.set("imageCode:"+ imageCodeId,imageCodetext,ex=constants.IMAGE_CODE_REDIS_EXPIRES)
    except:
        return abort(500)
    #5、返回图片给前端
    response = make_response(imageCodeimage)
    response.headers["Content-Type"] = "image/jpg"
    return response
View Code

 

标签:blue,code,渲染,image,验证码,文件夹,首页,passport,import
来源: https://www.cnblogs.com/liuzijie95/p/16394795.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有