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. mock的使用及取消，node模仿本地请求：为了解决前后端分离，用户后台没写完接口的情况下

    借鉴:https://www.jianshu.com/p/dd23a6547114 1.说到这里还有一种是配置node模拟本地请求 (1)node模拟本地请求: 补充一下 [1]首先在根目录下建一个d ...

  2. vue学习（六）异步组件加载

    异步组件加载 首先准备-----简单的框架搭出来 <!DOCTYPE html> <html lang="zh-CN"> <head> < ...

  3. python转换ascii码

    字符转数字 ord("A") 数字转字符 chr(65)

  4. js 获取时间对象

    1.当前系统时间   var date=new Date(); 2.字符串转时间对象  var date=new Date("2018-01-01"); 3.获取年份: var y ...

  5. javascript设计模式（1）——面向对象基础

    用对象收编变量2种方式 1 函数式 var Object = { name:function(){ return this; }, email:function(){ return this; } } ...

  6. jQuery表格隔行换色和全选的实现

    1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...

  7. 二十三、CI框架之post

    一.在控制器里面代码如下: 二.在View里面写好按钮和需要post的代码 三.效果如下,点击按钮之前: 点击按钮之后, 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微信二维码打赏任意金额 ...

  8. Jquery获取html标签，包含该标签本身

    $(".test").prop("outerHTML"); 原生JS DOM里有一个内置属性 outerHTML,用来获取当前节点的html代码(包含当前节点) ...

  9. 2020/2/3 PHP代码审计之PHP伪协议

    0x00 简介 开局一张图233 0x01 file://协议 说明: file:// 文件系统是 PHP 使用的默认封装协议,展现了本地文件系统.当指定了一个相对路径(不以/..\或 Windows ...

  10. Vue-router的介绍

    1.路由基础介绍 (1)什么是前端路由: 路由是根据不同的URL地址展示不同的内容或页面. 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做.之前是通过服务端根据URL的不同返回不同的页面 ...