四、登录功能

前端页面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. zabbix主动模式设置

    zabbix客户端发数据给服务端分为主被动两种模式,主动模式是zabbix客户端主动向服务端发送数据,被动模式是被动等待服务端来取数据. 主动模式: 客户端每隔一段时间主动向服务端发起连接请求--&g ...

  2. ionic3 动态设置tabs页面底部导航栏隐藏，并显示输入框添加评论

    1.先上原始效果图:                                        2.完成后效果                                2.实现思路: ion ...

  3. springboot集成redis报错-ClassNotFoundException: org.apache.commons.pool2.impl.GenericObjectPoolConfig

    当使用Springboot 2.0以上版本集成redis的时候遇到报错信息如下: Application run failed org.springframework.beans.factory.Un ...

  4. Educational Codeforces Round 60 (Rated for Div. 2) E. Decypher the String

    题目大意:这是一道交互题.给你一个长度为n的字符串,这个字符串是经过规则变换的,题目不告诉你变换规则,但是允许你提问3次:每次提问你给出一个长度为n的字符串,程序会返回按变换规则变换后的字符串,提问3 ...

  5. Java中实现线程通信的三个方法的作用是什么？

    Java提供了3个方法解决线程之间的通信问题,均是java.lang.Object类的方法,都只能在同步方法或者同步代码块中使用,否则会抛出异常. 方法名 作 用 final void wait() ...

  6. mysql 毫秒时间转换

    当在数据库中存储的时间类型为bigint类型时,及时间的毫秒数 java中:  new DATE().gettime();//获取时间的毫秒数 当需要将毫秒数转化为时间的时候 mysql中: FROM ...

  7. vue 项目 跳转 页面 不刷新 问题

    vue项目中需要导出下载客户数据,因为数据太多,响应太慢.后台直接上传给七牛  然后返回一个下载链接  前端通过跳转链接 来下载 riskManagementApi.friendExprotAll(t ...

  8. 折半枚举——poj3977

    暴力搜索超时,但是折半后两部分状态支持合并的情况,可用折半枚举算法 poj3977 给一个序列a[],从里面找到k个数,使其和的绝对值最小 经典折半枚举法+二分解决,对于前一半数开一个map,map[ ...

  9. 安全检测及分析神器—AppScan使用教程

    最近项目准备验收,所以最近在做项目验收的准备工作:我们公司规定,项目的安全检测必须通过才能进行项目验收:公司的安全部门用的检测软件就是大名鼎鼎的IBM Rational Appscan;在教由安全部门 ...

  10. API函数ShellExecute与ShellExecuteEx用法

    ShellExecute: 1.函数功能:你可以给它任何文件的名字,它都能识别出来并打开它.2．函数原型: HINSTANCE ShellExecute( HWND hwnd, LPCTSTR lpO ...