BBS論壇登陸功能

時間 2019-11-22

標籤 bbs 論壇登陸功能简体版

原文原文鏈接

4、登陸功能

前端頁面html代碼：css

<!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>

後端邏輯代碼：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')

有可能會有更新......前端

1. BBS論壇註冊功能
2. 26-----BBS論壇
3. 10-----BBS論壇
4. BBS論壇（十）
5. 17-----BBS論壇
6. bbs論壇小結
7. 8-----BBS論壇
8. BBS論壇（八）
9. 13-----BBS論壇
10. BBS論壇（十七）
更多相關文章...
• MySQL 5.7的新特性（新功能） - MySQL教程
• CAP理論是什麼？ - NoSQL教程
• SpringBoot中properties文件不能自動提示解決方法
• IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決

相關標籤/搜索

每日一句

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

BBS論壇 登陸功能

4、登陸功能

BBS論壇登陸功能