四、登录功能

前端页面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. Javascript中的相等比较

    在比较相等或不相等之前,会对操作数进行类型转换,然后比较相等性 在转换不同的数据类型时,相等和不相等操作符遵循下列基本规则: 1.如果由一个操作数是布尔值,则在比较相等性之前先将其转换为数值:2.如果 ...

  2. python之模块导入方法总结

    模块在python编程中的地位举足轻重,熟练运用模块可以大大减少代码量,以最少的代码实现复杂的功能. 下面介绍一下在python编程中如何导入模块: (1)import 模块名:直接导入,这里导入模块 ...

  3. Codeforces 490D Chocolate

    D. Chocolate time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  4. @Validated和@Valid区别：Spring validation验证框架对入参实体进行嵌套验证必须在相应属性（字段）加上@Valid而不是@Validated

    Spring Validation验证框架对参数的验证机制提供了@Validated(Spring's JSR-303规范,是标准JSR-303的一个变种),javax提供了@Valid(标准JSR- ...

  5. echarts 给formatter文字添加不同颜色

    legend: { x : 'center', y : 'bottom', icon: "circle", itemWidth: 8, // 设置宽度 itemHeight: 8, ...

  6. 知识点整理01- 引用对象被子方法赋值后不改变；CheckBox 取消选择不可用问题

    1. Class 实体是引用类型,但传入方法时是null的情况在子方法中不论怎么赋值当 FirstService.SetPerson(person,ref tempMsg); 执行后Person都是n ...

  7. Java连接ActiveMQ代码示例(Producer和Consumer)

    import org.apache.activemq.ActiveMQConnection; import org.apache.activemq.ActiveMQConnectionFactory; ...

  8. Centos6.6安装JDK1.8

    首先从官网下载jdk1.8,地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...

  9. Codeforces 343E 最小割树

    题意及思路:https://www.cnblogs.com/Yuzao/p/8494024.html 最小割树的实现参考了这篇博客:https://www.cnblogs.com/coder-Uran ...

  10. Dubbox服务的提供方配置

    在src/main/resources下创建applicationContext-service.xml ,内容如下: <?xml version="1.0" encodin ...