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. UML概念

    UML UML:Unified Modeling Language是非专利的第三代建模和规约语言.UML是一种开放的方法,用于说明,可视化,结构和编写一个正在开发的,面向对象的,软件密集系统的制品开放 ...

  2. Short Essay你真的会写了吗？

    提到short essay(可能其他essay也一样),很多同学都很头疼.“没有思路?不知从何下笔?没有亮点?”等等,这些都是同学们的致命伤,因此,short essay就成为了广大留学生的“送命题” ...

  3. div自动适应高度

    div高度100%<!DOCTYPE html> <html> <head></head> <body> <div id=" ...

  4. MySQL-半同步复制原理实践

    参考文档: http://mysql.taobao.org/monthly/2017/04/01/ 阿里内核月报半同步复制的数据一致性 https://www.cnblogs.com/ivictor/ ...

  5. C# 基本元素

    一.构成C#的基本元素 注释和空白编译器不会编译,自动忽略:而标记是可以通过编译器编译的. 关键字 (keyword) 官方定义:关键字是类似标识符的保留的字符序列,不能用作标识符(以 @ 字符开头时 ...

  6. spring boot 异常(exception)处理

    Spring Boot 集成教程 Spring Boot 介绍 Spring Boot 开发环境搭建(Eclipse) Spring Boot Hello World (restful接口)例子 sp ...

  7. day24(024-多线程(上))

    ###24.01_多线程(多线程的引入)(了解) 1.什么是线程 线程是程序执行的一条路径, 一个进程中可以包含多条线程 多线程并发执行可以提高程序的效率, 可以同时完成多项工作 2.多线程的应用场景 ...

  8. 尝试用kotlin做一个app（四）

    本来是应该为主页加载数据库数据了,但是想着做后台,之前写jsp后台写吐了,所以先拖几天.把之前的代码完善一下,或者添加些新内容. ...... 多个fragment切换卡顿 首先修正一个bug.从主页 ...

  9. [极客大挑战 2019]BabySQL

    0x00 知识点 双写绕过 简单测试一下,发现or在登陆过程被过滤,想到使用oorr试试,结果成了?! 最后多测试一下,发现from union select 这些关键函数都被替换为空 本题直接进行常 ...

  10. 恒生UFX交易接口基本介绍

    https://zhidao.baidu.com/question/203296047903136445.html 1.恒生UFT和UFX有什么区别? UFT是一个极速交易系统,UFX是一个统一接入系 ...