四、登录功能

前端页面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. markdown_TestOne

    这个是我写的一个markdown尝试 1.2 dafsdfeasdfaefasdfase afsdfasdfefasdfeadfasdfe

  2. 线性方程组迭代算法——Jacobi迭代算法的python实现

    原理: 请看本人博客:线性方程组的迭代求解算法——原理 代码: import numpy as np max=100#迭代次数上限 Delta=0.01 m=2#阶数:矩阵为2阶 n=3#维数:3X3 ...

  3. Java-技术专区-技术栈分析辨证方法

    1.好多公司动不动就JVM.高并发.分布式.微服务等等,我没有实际经验. 2.从事Java开发三年了,目前的职位是高级Java工程师,感觉技术和工资都到了瓶颈,对以后的发展方向有些迷茫. 3.加班时间 ...

  4. webpack 集成 Typescript && Less

    webpack 集成 Typescript && Less TypeScript是JavaScript的一个类型化的超集,可以编译成纯JavaScript,在本指南中,我们将学习如何将 ...

  5. MYSQL增量备份与恢复

    vim /etc/my.cnf在[mysqld]下添加max_binlog_size = 1024000 //二进制日志最大1M 要进行mysql的增量备份,首先要开启二进制日志功能方法一:在/etc ...

  6. vue撸的demo

    之前做过一个layui+flask的测试平台,后来听说vue挺火,学了下,做个记录 一.想法 主要想开发几大功能,方便以后复用 1.工作中常常需要记录知识,所以我决定会做一个类似markdown笔记的 ...

  7. mysql 日期函数大全

    对于每个类型拥有的值范围以及并且指定日期何时间值的有效格式的描述见7.3.6 日期和时间类型. 这里是一个使用日期函数的例子.下面的查询选择了所有记录,其date_col的值是在最后30天以内: my ...

  8. leetcood学习笔记-13

    错误记录 class Solution: def romanToInt(self, s: str) -> int: d = {'I':1,'V':5,'X':10,'L':50,'C':100, ...

  9. DEDE织梦标签经常调用的内容

    DEDE织梦标签名称:{/dede:arclist} 详解 标签名称:arclist标记简介:织梦常用标记,也称为自由列表标记,其中imglist.imginfolist.specart.coolar ...

  10. 每天一个Linux命令：pwd(3)

    pwd pwd是Print Working Directory的缩写,其功能是显示当前所在工作目录的全路径.主要用在当不确定当前所在位置时,通过pwd来查看当前目录的绝对路径 格式 pwd [选项] ...