四、登录功能

前端页面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. Java对象引用四个级别（强、软、弱、虚）

    最近,高级Java技术栈微信群中,有一些猿友在讨论JVM中对象的周期问题,有谈到引用的级别,现在为大家做个总结吧,虽然大多数公司并没有意识或者用到这些引用,但了解这些基本概念对熟悉整个垃圾回收机制和面 ...

  2. PHP正则表达式中的反斜线

    PHP反斜线再正则表达式中的使用 <?php $str = 'hello\world'; $pattern = '/hello\\\\world/'; preg_match($pattern,$ ...

  3. js保留两位小数的方法

    js保留两位小数的方法如下 1.toFixed()方法 需注意,保留两位小数,将数值类型的数据改变成了字符串类型 2.Math.floor(),不四舍五入 ,向下取整 注意,不改变数据类型 3.字符串 ...

  4. LeetCode Array Easy 88. Merge Sorted Array

    Description Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted ar ...

  5. case ...esac判断 function方法 循环loop,while do done,until do done

    就类似于其他语言中的case语句 用法 要点 第一 开始结束  case  esac 正好相反 第二  每段程序段需要用  两个:号结束. 例: } in "hello") ech ...

  6. 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式！

    块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...

  7. Oracle数据库中文乱码问题解决

    1.查看服务器端编码select userenv('language') from dual;我实际查到的结果为:AMERICAN_AMERICA.ZHS16GBK 2.执行语句 select * f ...

  8. git的使用（扫盲）

    之前一直是通过图形化工具使用git,前两天练习用命令上传代码,遇到不少问题,最终还是解决了,在这里总结一下. 通过一个例子来演示一下.首先去github上面创建一个仓库. 创建好之后,就可以上传文件了 ...

  9. 59. jdk1.5新特性之----增强for循环

    /*jdk1.5新特性之----增强for循环:底层是一个迭代器 作用:简化迭代器书写格式 使用范围:实现了Iterable接口的对象或者数组对象 格式:    for(变量类型  变量名 :遍历目标 ...

  10. vs code 自定义代码片段

    1.快捷键Ctrl+Shift+P打开命令输入 snippet : (也可以点击文件=>首选项=>用户代码片段) 2.选择代码语言类型(这里以JavaScrpt为例) 3.在javascr ...