BBS—登陸，修改密碼，退出登陸

時間 2019-11-17

標籤 bbs 登陸修改密碼退出简体版

原文原文鏈接

1、登陸頁面

效果圖：javascript

製做驗證碼

驗證碼：驗證碼這個功能用了Image,ImageDraw,ImageFont，random，BytesIO模塊和sessioncss

Image是新建立一個圖片，ImageDraw至關於在這個圖片上建立一個畫筆，ImageFont指定字體的格式html

random隨機模塊，BytesIO開闢一片字節類型的內存空間，session用於存儲驗證碼前端

import random
from PIL import Image,ImageDraw,ImageFont,ImageFilter
from io import BytesIO
# 可以幫你保存數據 而且在取的時候會以二進制的形式返回給你
#登陸
#隨機生成RGB值
def rndColor2():
    return(random.randint(32,127),random.randint(32,127),random.randint(32,127))

#隨機生成RGB值
def rndColor():
    return(random.randint(64,255),random.randint(64,255),random.randint(64,255))

def get_code(request):
    img_obj = Image.new('RGB', (310,35), (255, 255, 255))
    #生成一個畫筆對象
    img_draw = ImageDraw.Draw(img_obj)
    #生成一個字體對象
    img_font = ImageFont.truetype('static/fonts/tahoma.ttf',36)
    # 填充每一個像素點
    for x in range(310):
        for y in range(35):
            img_draw.point((x, y), fill=rndColor())
    #隨機驗證碼：數字，小寫字母，大寫字母
    code = ''#定義一個變量存儲最終的驗證碼
    for i in range(4):
        random_int = str(random.randint(0,9))
        random_upper = chr(random.randint(65,90))
        random_lower = chr(random.randint(97,122))
        temp_code = random.choice([random_int,random_upper,random_lower])
        #將產生的字一個一個寫在圖片上
        img_draw.text((60+i*45,-5), temp_code, rndColor2(), img_font)
        #code記錄
        code += temp_code
    #將code放到session中
    request.session['code'] = code
    #生成io對象
    io_obj = BytesIO()
    #圖片模糊
    img_obj = img_obj.filter(ImageFilter.BLUR)
    img_obj.save(io_obj,'png')
    return HttpResponse(io_obj.getvalue())

登陸驗證

一、須要從數據庫中拿到username和passwoed作比對，由於數據庫中password存的是密文須要用到auth模塊java

 user=auth.authenticate(request,username=username,password=password)

若是user存在，登陸成功，保持登陸狀態，不然返回錯誤信息，並對前端進行渲染ajax

登陸成功

首先用auth.login把user綁定，至關於session和cookie可是使用方法比這兩個都簡單，執行以後，不退出登陸的狀況下，request.user就是auth.login(request,user)裏面的user數據庫

auth.login(request,user)

登陸成功以後，給前端返回數據，首先在函數開頭定義一個back_dic用於標識成功或失敗canvas

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

當登陸成功的時候，code不變，給response添加一個URL：後端

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

當登陸成功的時候，跳轉到home頁面。固然了這行代碼也須要前端的配合，前端：cookie

success:function (data) {
                if(data.code==100){
                    location.href=data.url
                }

登陸失敗

登陸失敗，back_dic['code']變爲101（或者隨意一個數，和成功區別開就好）,msg變爲失敗的信息，好比是驗證碼出錯仍是帳號密碼錯誤

流程圖

登陸代碼：

#登陸
def login(request):
    back_dic = {'code':100,'msg':''}
    # 判斷是ajax請求仍是正常form表單請求  request.is_ajax()
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        code = request.POST.get('code')
        #先校驗驗證碼統一轉成大寫或者小寫
        if code.upper() == request.session.get('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')

登陸前端代碼：

{% extends 'base.html' %}

{% block css %}
    <style>
        body {
            background-image: url('../static/image/register.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }

        .wrap {
            height: 550px;
            width: 500px;
            position: fixed;
        {#background-color: #eeeeee;#} background-color: rgba(238, 238, 238, 0.7);
            top: 20%;
            right: auto;
        }

        #t1 {
            padding-top: 10px;
        }

        label {
            width: 400px;
            margin: 5px 50px;
        }

        #b1 {
            width: 80%;
            margin: 10px auto;

        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="wrap">
                    <h2 class="text-center" id="t1">登陸頁面</h2>
                    <hr>
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="id_username">用戶名
                            <input type="text" class="form-control" name="username" id="id_username"></label>
                    </div>
                    <div class="form-group">
                        <label for="id_password">密碼
                            <input type="password" class="form-control" name="password" id="id_password"></label>
                    </div>
                    <div class="form-group">
                        <label for="id_code">驗證碼
                            <input type="text" class="form-control" name="code" id="id_code">
                            <br>
                            <img src="/get_code/" alt="" width="250" height="50" id="i1">
                            <br>
                            <a href="javascript:refreshcode();" id="id_img">看不清，換一張 </a>
                        </label>
                    </div>
                    <div>
                        <label for="c1"><input type="checkbox" id="c1">記住密碼
                            <a href="{% url 'register' %}" class="pull-right">當即註冊</a></label>

                    </div>
                    <div id="b1">
                        <button class="pull-right btn btn-primary  btn-block" id="id_submit">登陸</button>
                        <span class="errors" style="color: red" id="id_error"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" color="255,255,255" opacity='1' zIndex="-2" count="150"
            src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
{% endblock %}

{% block script %}
    <script>
        $('#id_img').click(function () {
            //*獲取圖片src舊路徑
            let oldPath = $('#i1').attr('src');
            //修改src屬性
            $('#i1').attr('src', oldPath += '?')
        });
        $('#id_submit').click(function () {
            $.ajax({
                url: '',
                type: 'post',
                data: {
                    'username': $('#id_username').val(),
                    'password': $('#id_password').val(),
                    'code': $('#id_code').val(),
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                success: function (data) {
                    if (data.code == 100) {
                        location.href = data.url
                    } else {
                        $('#id_error').html(data.msg)
                    }
                }
            })
        });
        $('input').focus(function () {
            $('#id_error').html('')

        })


    </script>
{% endblock %}

首頁導航條

未登入狀態下

效果圖：

登陸狀態下

效果圖：

登陸狀態欄實現：

 <li><a href="#"><i class="iconfont icon-report-Useronlinereport" style="color: #4ad867"></i>:{{ request.user.username }}</a></li>

前端也能夠直接用後端request.user的方法取到用戶名

退出登陸

#退出登陸
def logout(request):
    auth.logout(request)
    return redirect('/home/')

修改密碼

效果圖：

首前後端先獲取到前端的舊密碼，新密碼，確認密碼，用auth模塊中的check_password判斷舊密碼是否正確，而後判斷兩次新密碼是否一致，用set_password設置新密碼

後端代碼：

#修改密碼
def set_password(request):
    back_dic ={'code':100,'msg':''}
    if request.method =='POST':
        old_password = request.POST.get('old_password')
        new_password = request.POST.get('new_password')
        confirm_password = request.POST.get('confirm_password')
        #判斷舊密碼正不正確
        res = request.user.check_password(old_password)
        #若是爲True就修改密碼
        if res:
            #再比對兩次密碼一致不一致
            if new_password == confirm_password:
                request.user.set_password(new_password)
                request.user.save()
                back_dic['msg'] = '密碼修改爲功！'
                back_dic['url'] = '/login/'
            else:
                back_dic['code'] = 102
                back_dic['msg'] = '兩次密碼不一致！'
        else:
            back_dic['code'] = 103
            back_dic['msg'] = '舊密碼輸入有誤！'
        return JsonResponse(back_dic)
    return render(request,'set_password.html',locals())

前端代碼：

{% extends 'base.html' %}

{% block css %}
    <style>
        body {
            background-color: #eeeeee;
        }

        label {
            width: 400px;
            margin: 5px 50px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                {% csrf_token %}
                <h2 class="text-center">修改密碼</h2>
                <div class="form-group">
                    <label for="id_username">用戶名
                        <input type="text" name="username" class="form-control" id="id_username" disabled
                               value="{{ request.user.username }}">
                    </label>
                </div>
                <div class="form-group">
                    <label for="id_old_password">舊密碼
                        <input type="password" name="old_password" class="form-control" id="id_old_password">
                    </label>
                </div>
                <div class="form-group">
                    <label for="id_new_password">密碼
                        <input type="password" name="new_password" class="form-control" id="id_new_password">
                    </label>
                </div>
                <div class="form-group">
                    <label for="id_confirm_password">確認密碼
                        <input type="password" name="confirm_password" class="form-control" id="id_confirm_password">
                    </label>
                </div>
                <label for="id_button">
                    <button class="btn btn-primary btn-block" id="id_button">點擊修改</button>
                    <span class="errors" style="color: red" id="id_error"></span>
                </label>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        $('#id_button').click(function () {
            $.ajax({
                url: '',
                type: 'post',
                data: {
                    'old_password': $('#id_old_password').val(),
                    'new_password': $('#id_new_password').val(),
                    'confirm_password': $('#id_confirm_password').val(),
                    'csrfmiddlewaretoken':'{{ csrf_token }}',
                },
                success: function (data) {
                    if (data.code == 100) {
                        location.href = data.url
                    } else {
                        $('#id_error').html(data.msg)
                    }
                }
            })
        });
        $('input').focus(function () {
            $('#id_error').html('')

        })
    </script>
{% endblock %}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。