四、登录功能

前端页面html代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>BBS论坛</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">

    <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container-fluid">

    <div class="row">

        <div class="col-lg-4 col-md-offset-4 ">

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

            <hr>

            {% csrf_token %}

            <div class="form-group">

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

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

            </div>

            <div class="form-group">

                <label for="id_password">密码</label>

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

            </div>

            <div class="form-group">

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

                <div class="row">

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

                        <input type="text" class="form-control" id="id_code">

                    </div>

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

                        <img src="/get_code/" alt=""  width="200" height="30" id="id_img">

                    </div>

                </div>

            </div>

            <button class="btn-success btn " id="id_button">登录</button>

            <span  class="errors" style="color: red" id="id_error"></span>

        </div>

    </div>

</div>

<script>

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

        // 获取图片src旧的路径

        let oldPath = $(this).attr('src');

        // 修改图片的src属性

        $(this).attr('src',oldPath += '?')

    });

     // ajax发送数据

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

        $.ajax({

            url:'',

            type:'post',

            data:{

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

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

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

                // 'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val(),

                'csrfmiddlewaretoken':'{{ csrf_token }}',

            },

            success:function (data) {

                if(data.code === 100){

                    location.href = data.url

                }else{

                    $('#id_error').html(data.msg)

                }

            }

        })

    })

</script>

</body>

</html>

login.html

后端逻辑代码：

def get_code(requst):

    img_obj = Image.new('RGB', (310, 35), get_random())

    # 生成一个画笔对象

    img_draw = ImageDraw.Draw(img_obj)

    # 生成一个字体对象

    img_font = ImageFont.truetype('static/font/akbar.ttf', 35)

    # 随机验证码：由数字、小写字母、大写字母

    code = ''  # 定义一个变量存储最终验证码

    for i in range(5):

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

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

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

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

        # 将产生的字一个一个的写到图片上

        img_draw.text((60 + i * 30, 0), temp_code, get_random(), img_font)

        # code记录

        code += temp_code

    print(code)

    # 将code存放到session

    requst.session['code'] = code

    # 生成io对象

    io_obj = BytesIO()

    # 图片模糊

    # img_obj = img_obj.filter(ImaggeFilter.BLUR)

    img_obj.save(io_obj, 'png')

    return HttpResponse(io_obj.getvalue())

get_code 获取验证码

def login(request):

    back_dic = {'code': 100, 'msg': ''}

    if request.method == 'POST':

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

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

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

        # 先校验验证码（可以区分大小写，也可以不区分）

        if request.session.get('code').upper() == code.upper():

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

            if user_obj:

                # 登录成功，记录当前用户状态

                auth.login(request, user_obj)

                back_dic['msg'] = '登录成功！'

                back_dic['url'] = '/home/'

            else:

                back_dic['code'] = 102

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

        else:

            back_dic['code'] = 103

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

        return JsonResponse(back_dic)

    return render(request, 'login.html')

login 视图函数

有可能会有更新......

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

  1. bbs论坛登录相关功能（2）

    昨天把注册功能页面做出来,接下来就是登录页面 登录功能: 1,用户账号,密码后台效验,错误信息在登录按钮右边显示 2.验证码,根据图片生成,点击图片刷新产生新的验证码 修改密码 注册 先把前端页面lo ...

  2. BBS论坛 注册功能

    三.注册功能 # views.py文件 def register(request): back_dic = {'code': 100, 'msg': ''} form_obj = myforms.My ...

  3. bbs论坛注册功能（1）

    分析项目需求创建表: STATICFILE_DIR = [ os.path.join(BASE_DIR,'static') #设置目录,bootstrip添加到目录中去,直接本地调用 ] # auth ...

  4. Django项目 BBS论坛

    BBS论坛 一.项目表分析 二.自定义form组件 三.注册功能 四.BBS论坛 登录功能

  5. python第一百三十天 ---简单的BBS论坛

    简单的BBS论坛 实现功能 git仓库地址:https://github.com/uge3/BBS 1.整体参考“抽屉新热榜” + “博客园” 2.实现不同论坛版块 3.帖子列表展示 4.个人博客主页 ...

  6. BBS登录功能

    BBS登录功能 一.后端实现 1.实现验证码 from PIL import Image, ImageDraw, ImageFont import random from io import Byte ...

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

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

  8. Python之路【第十八篇】Django小项目简单BBS论坛部分内容知识点

    开发一个简单的BBS论坛 项目需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被 ...

  9. python 学习笔记二十 django项目bbs论坛

    项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可 ...

随机推荐

  1. Passive Event Listeners——让页面滑动更加流畅的新特性

    Passive Event Listeners - 被动事件监听器 在写webapp页面的时候,Chrome 提醒 code 1 <code>[Violation] Added non-p ...

  2. Java开发最常犯的10个错误，打死都不要犯！

    原文:http://www.programcreek.com/2014/05/top-10-mistakes-java-developers-make/ 译文:cnblogs.com/chenpi/p ...

  3. [已解决]报错:xlrd.compdoc.CompDocError: Workbook: size exceeds expected 17920 bytes; corrupt?

    报错代码如下: filePath='test.xls' data=pd.read_excel(filePath) print(data.head()) 报错内容如下: Traceback (most ...

  4. redis的快速机制与数据类型

    想一下 redis 的高并发和快速 单线程模型 - 避免了不必要的上下文切换和竞争条件(锁) Redis客户端对服务端的每次调用都经历了发送命令,执行命令,返回结果三个过程.其中执行命令阶段,由于Re ...

  5. 自己写IRP，做文件操作，遇到的坑

    在写文件的时候没问题,但是写完文件之后,就出问题了, 什么问题呢,是因为写完文件之后,文件关闭之后, 调用了一个叫做 CcFlushCache 的函数,这个函数是从CcWriteBehind 调过来的 ...

  6. 整合mybatis时报错：Configuration problem: Unable to locate Spring NamespaceHandler for XML schema namespace [http://www.springframework.org/schema/tx]

    org.springframework.beans.factory.parsing.BeanDefinitionParsingException: Configuration problem: Una ...

  7. Codeforces - 1139D - Steps to One (概率DP+莫比乌斯反演)

    蒟蒻数学渣呀,根本不会做. 解法是参考 https://blog.csdn.net/xs18952904/article/details/88785210 这位大佬的. 状态的设计和转移如上面博客一样 ...

  8. hibernate3.6异常

    WARN DTDEntityResolver:73 - recognized obsolete hibernate namespace http://hibernate.sourceforge.net ...

  9. vue 表单校验报错 "Error: please transfer a valid prop path to form item!"

    vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...

  10. 生产者消费者模式-->线程

    #_author:来童星#date:2019/12/17#生产者消费者模式-->线程from queue import Queueimport random,time,threading#生产者 ...