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. TX2--安装跑一python3.5

    sudo add-apt-repository ppa:webupd8team/javasudo apt-get updatesudo apt-get install oracle-java8-ins ...

  2. 19 — node 模块化 及 CommonJS规范 — CommonJS 的由来及各组织与 JS 的关系

    ECMAScript  对于不同的环境(运行平台),设计结构,理念,使用方式大相径庭. 1,浏览器 :DOM BOM 2,NodeJS :FS,HTTP 内置模块 :  第三方模块 : 内置模块 3, ...

  3. 【LeetCode】最长回文子串-中心扩展法

    [问题]给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 : 输入: "babad" 输出: "bab" 注意: ...

  4. C 的printf函数

    头文件 #include <stdio.h> printf函数是最常用的格式化输出函数,原型为:int printf(char *format,......); printf函数会根据参数 ...

  5. 201771010123汪慧和《面向对象程序设计Java》第十四周实验总结

    一.理论部分 1.Swing和MVC设计模式 (1)设计模式初识 (2)模式—试图—控制器模式 (3)Swing组件的模型—试图—控制器分析 2.Java组件有内容.外观.行为三个主要元素:这三个主要 ...

  6. dbcp连接池的一些方法

    创建连接 // 简写版: Connection conn =null; Statement st =null; conn = DBCP.getConnection(); st=conn.createS ...

  7. HTML与CSS结合的四种方式

    HTML与CSS结合的四种方式: 方式一:每个标签加一个属性: 例如:<div style="background-color:red; color: green"> ...

  8. Linux下mysql5.7安装

    当前最新版本为5.7,此次将分别采用yum安装和tar包编译安装的方式分别说明. 一.Yum安装 A:获取repo源 [root@localhost ~]# wget http://dev.mysql ...

  9. aliyun服务器lamp配置

    1.安装Apache:yum install httpd 2.安装php: yum install php 3.安装mysql客户端:yum install mysql 4.安装mysql服务端:yu ...

  10. Linux 文件上传

    Linux 文件上传操作 SecureCRT与linux互相上传和下载文件 1. 需要上传或者下载,需要使用rz和sz命令. 2. 如果linux上没有这两个命令工具,则需要先安装.可以使用yum安装 ...