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. linux常用命令-关机、重启

    常用命令-关机.重启 命令 含义 reboot 重新启动操作系 shutdown –r now 重新启动操作系统,shutdown会给别的用户提示 shutdown -h now 立刻关机,其中now ...

  2. Petr#(字符串哈希)

    CF113B Petr# 大概就是字符串匹配加一个字符串哈希判重.懒得打kmp,就用字符串哈希匹配了. 字符串哈希大概就是把字符串转成一个p进制的数,每一段字符串都有一个对应的哈希值.p尽量取质数,这 ...

  3. PHP ~ 设置和读取 Cookie

    一,设置 Cookie setcookie("user",$user,time()+3600);     // user 为用户名,$user 为变量的值   二,读取 Cooki ...

  4. POJ 3911：Internet Service Providers

    Internet Service Providers Time Limit: 2MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I ...

  5. jquery的读、写、增、删、查方法

    # 注:jquery需要导包  格式<script type="text/javascript" src="jquery-3.2.1.js">> ...

  6. javaScript_BOM浏览器对象模型

    BOM:浏览器对象模型 Browser Object Model 用来访问和操作浏览器窗口,使JavaScript有能力与浏览器对话 通过使用BOM ,可以移动窗口,更改状态栏.执行其他不与页面内容发 ...

  7. Java多线程通讯---------wait，notify区别

    class Res{ public String username; public String sex; } class Out extends Thread{ Res res; public Ou ...

  8. Java8集合框架——集合工具类Arrays内部方法浅析

    java.util.Arrays 备注:本文只对 Java8 中的 java.util.Arrays 中提供的基本功能进行大致介绍,并没有对其具体的实现原理进行深入的探讨和分析.详情可自己深入观摩源码 ...

  9. BZOJ 3170 [Tjoi2013]松鼠聚会

    题解:切比雪夫距离转化为曼哈顿距离 枚举源点,横纵坐标互不影响,分开考虑,前缀和优化 横纵分开考虑是一种解题思路 #include<iostream> #include<cstdio ...

  10. eclipse默认的WebContent目录修改为webRoot

    从网上下载了个Java Web项目,导入Eclipse后在Tomcat中发布,发现在Tomcat的Webapps目录下没有JSP页面 到项目中去看才发现有两个目录,一个WebContent,一个Web ...