BBS登录功能

一、后端实现

1.实现验证码

from PIL import Image, ImageDraw, ImageFont

import random

from io import BytesIO, StringIO

def get_color():

    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)

def get_code(request):

    '图片验证'

    # img:标签支持1.图片二进制 2. 图片具体路径 3. 后端url请求

    # 推到思路1: 直接到后端获取目录下的路径,以二进制方式打开发送

    # with open(r'G:\python学习\Django\11Django项目\BBS\static\img\1.jpg', 'rb') as f:

    #     data = f.read()

    #

    # return HttpResponse(data)

    # 推到思路二: 利用模块产生图片, 在发送到前端 pillow

    # 1.生成一张图片对象

    # img_obj = Image.new('RGB', (260, 35), get_color())

    #

    # # 2.先利用文件操作将图片对象写入文件中

    # with open('code.png', 'wb') as f:

    #     img_obj.save(f, 'png')

    #

    # # 3. 在利用文件操作图片以二进制形式读取出来,返回给前端

    # with open('code.png', 'rb') as f:

    #     data = f.read()

    #

    # return HttpResponse(data)

    # 推到思路3: 不在利用文件获取数据 借助内存管理器

    # 1. 生成图片对象

    # img_obj = Image.new('RGB', (260, 35), get_color())

    # # 2. 生成一个内存管理器对象

    # io_obj = BytesIO()

    #

    # # 3.将io_obj当成文件句柄f

    # img_obj.save(io_obj, 'png')

    #

    # # 4 获取二进制图片发送给前端

    # return HttpResponse(io_obj.getvalue())

    # 推导思路四:在图片写入文字

    # 1. 生成图片对象

    img_obj = Image.new('RGB', (260, 35), get_color())

    # 2.生成一个画笔对象

    img_draw = ImageDraw.Draw(img_obj)

    # 3. 设置画笔字体样式(所有字体样式都是由.ttf结尾的文件控制)

    img_font = ImageFont.truetype(r'G:\python学习\Django\11Django项目\BBS\static\font\222.ttf', 30)

    # 生成随机验证码

    code = ''

    # 随机生成验证码  a~z  A~Z  0~9

    for i in range(5):

        random_upper = chr(random.randint(65, 90))

        random_lower = chr(random.randint(97, 122))

        random_int = str(random.randint(0, 9))

        res = random.choice([random_upper, random_lower, random_int])

        # 将产生的随机字符串写到图片上

        img_draw.text((i * 45 + 45, 0), res, get_color(), img_font)

        code += res

    print(code)

    # 将随机验证码存储起来, 以便其他函数调用

    request.session['code'] = code

    io_obj = BytesIO()

    img_obj.save(io_obj, 'png')

    return HttpResponse(io_obj.getvalue())

二、登录功能实现

def login(request):

    back_dic = {'code': 1000, 'msg': ""}

    if request.method == 'POST':

        print(request.POST)

        username = request.POST.get('username')

        password = request.POST.get('password')

        code = request.POST.get('code').upper()

        session_code = request.session.get('code').upper()

        if code == session_code:

            user_obj = auth.authenticate(username=username, password=password)

            if user_obj:

                back_dic['url'] = '/index/'

                # 保存用户登录状态

                auth.login(request, user_obj)  # 自动保存到session

            else:

                back_dic['code'] = ''

                back_dic['msg'] = '用户名或密码错误！'

        else:

            back_dic['code'] = ''

            back_dic['msg'] = '验证码错误！'

        return JsonResponse(back_dic)

    return render(request, '02login.html')

二、前端设计

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    {% load static %}

    <script src="{% static 'bootstrap/js/jquery.js' %}"></script>

    <script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>

    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">

</head>

<body>

<div class="container">

    <div class="row">

        <h1 class="text-center">登录界面</h1>

        <div class="col-md-6 col-lg-offset-3">

            <div class="form-group">

                <label for="username"> 用户名</label>

                <input type="text" id='username' name="username" class="form-control">

            </div>

            <div class="form-group">

                <label for="password"> 密 &nbsp;码:&nbsp;</label>

                <input type="password" id='password' name="password" class="form-control">

            </div>

            <div class="form-group">

                <label for="">验证码</label>

                <div class="row">

                    <div class="col-md-6">

                        <input type="text" id='code' name='code' class="form-control">

                    </div>

                    <div class="col-md-6">

                        <img src="/get_code/" alt="" width="260px" height="35px" class="img-rounded">

                    </div>

                </div>

            </div>

            <div>

                {#                    <input type="reset" value="重置" class="btn btn-primary btn-sm" style="margin: 10px 35px">#}

                <button class="btn btn-primary" id="b1">登录</button>

                <span style="color:red" id="error"></span>

            </div>

        </div>

    </div>

</div>

<script>

    // 点击图片刷新验证码

    $('img').on('click', function () {

        var img_url = $(this).attr('src') + "?";

        $(this).attr('src', img_url);

    });

    $('#b1').click(function () {

        alert(234);

        // 登录验证

        $.ajax({

            url: '',

            type: 'post',

            data: {

                'username': $('#username').val(),

                'password': $("#password").val(),

                'code': $('#code').val(),

                'csrfmiddlewaretoken': '{{ csrf_token }}'

            },

            success: function (data) {

                if (data.code == 1000) {

                    // 成功进入首页

                    location.href = data.url

                } else {

                    // 渲染错误信息

                    $('#error').text(data.msg);

                    // 失败刷新验证码

                    $('img').attr('src', '/get_code/2');

                }

            }

        });

    });

</script>

</body>

</html>

BBS登录功能的更多相关文章

  1. BBS论坛 登录功能

    四.登录功能 前端页面html代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  2. django BBS project login登录功能实现

    1.models from django.db import models # Create your models here. from django.contrib.auth.models imp ...

  3. BBS登录与注册功能

    登录功能 视图函数 def my_login(request): if request.method == 'GET': return render(request, 'login.html') el ...

  4. 1209 BBS 登录

    目录 上周内容 今日内容 url.py views.py login home.html 逻辑流程 登录功能 上周内容 bbs项目 项目开发流程 需求分析 架构设计 分组开发 我们一般情况下都只是作用 ...

  5. BBS注册功能

    BBS注册功能 一.后端 1.组件校验数据 """ @author RansySun @create 2019-11-03-11:35 """ ...

  6. SuperMap-iServer-单点登录功能验证(CAS)

    SuperMap-iServer-单点登录功能验证(CAS) 1.测试目的: 验证SuperMap-iServer使用CAS单点登录的功能是否正常. 2.测试环境: SuperMap-iServer8 ...

  7. 一步步开发自己的博客 .NET版（3、注册登录功能）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  8. 从无到有实现登录功能以及thinkphp怎么配置数据库信息

    好开心,终于解决了.从学习android到现在写登录功能已经不是一次两次了,如今再写想着肯定是信手拈来,没有想到的是尽然折磨了我一天的时间才搞定它.唉...... 先来看几张截图,这次的登录跟以往的不 ...

  9. 如何在ios中集成微信登录功能

    在ios中集成微信的登录功能有两种方法 1 用微信原生的api来做,这样做的好处就是轻量级,程序负重小,在Build Settings 中这样设置 然后设置 友盟的设置同上,但是要注意,加入你需要的所 ...

随机推荐

  1. 08 SSM整合案例（企业权限管理系统）：10.权限关联与控制

    04.AdminLTE的基本介绍 05.SSM整合案例的基本介绍 06.产品操作 07.订单操作 08.权限控制 09.用户操作 10.权限关联与控制 11.AOP日志 10.权限关联与控制 1.用户 ...

  2. 查看mysql表空间

    ,),'MB') as data_size, concat(,),'MB') as index_size from information_schema.tables group by TABLE_S ...

  3. 每天一点点之 taro 框架开发 - taro静态资源引入

    1.说明: taro中客园自由的引用静态资源,不需要安装任何的loader 引用样式文件 通过ES6的import引入 2.引用js文件 import { functionName } from '. ...

  4. mac安装vue没有使用权限不足

    ➜  ~ vue init webpack frontend ⠋ downloading template /usr/local/lib/node_modules/vue-cli/node_modul ...

  5. ffmpeg 模块简介

    FFmpeg 是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.它包括了领先的音/视频编码库libavcodec 等.libavformat:用于各种音视频封装格式的生成和解析 ...

  6. dll调用--出现运行时调用不协调

    "Run-Time Check Failure #0 - The value of ESP was not properly saved across a function call.  T ...

  7. 大数据高可用集群环境安装与配置（10）——安装Kafka高可用集群

    1. 获取安装包下载链接 访问https://kafka.apache.org/downloads 找到kafka对应版本 需要与服务器安装的scala版本一致(运行spark-shell可以看到当前 ...

  8. <强化学习>基本概念

    马尔可夫决策过程MDP,是强化学习的基础. MDP --- <S,A,P,R,γ> AGENT STATE ENV  REWARD   ,由ENV给出.agent处于状态s下,采取acti ...

  9. TP多条件查询实例

    where条件查询,时间范围查询 $condition = [ ['member_id', '=', $member_id] ]; if($type) { $condition[] = ['type' ...

  10. POJ 1149 网络流 合并建图

    这个题目我敲了一个简单的EK,这不是难点 难点在于建图,按题目的要求 每个猪圈和顾客都建点的话,那也太多了...我看了Edelweiss里面的缩点方法才建好的图,哎,惭愧啊 实际那些猪圈根本不需要单独 ...