1. 程式人生 > >Django框架下使用ajax模擬使用者登入驗證

Django框架下使用ajax模擬使用者登入驗證

Django是一個開源的Python基於web開發而設計的應用框架,基於MVC的設計思想,大大簡化了網站開發的難度,能夠簡單快速的開發網站。其中封裝的大量函式和方法,可以直接呼叫,同時擴充套件性非常好,可以擴充套件第三方外掛。框架的主要三部分M(模型)V(檢視)T(模板)是基於MVC的思想在Django內的結構,其中V接受瀏覽器的資訊傳遞給M把資料存進資料庫,還可以接受M的返回結果讓T產生一個HTML頁面,Django的特點是大而全,內嵌了ORM框架,通過檔案遷移建立類和表的對應關係,操作資料庫不需要寫sql語句,而是通過類和物件對資料表操作,Django是目前Python開發網站最常用的後端框架。

Ajax

非同步的javascript,在不全部載入某一個頁面部的情況下,對頁面進行局的重新整理。

Ajax請求最主要的兩點:

1)    分析出ajax請求時需要攜帶引數。

2)    分析出對應的檢視函式處理完成之後,返回的json的資料格式。

由於是模擬登入所以本文並沒有涉及到從資料庫取資料,只是通過這樣一個例子來了解前端頁面如何通過區域性重新整理來驗證使用者。驗證表單頁面只是簡單的效果幾款登入表單,文章中並沒有將Django框架中自動生成的程式碼複製進來,而是按照執行流程的順序寫。


專案的URL和應用的URL

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),//url匹配到的時候,會進入管理員頁面,管理員頁面Django框架內自帶,不需要寫。
    url(r'^', include('booktest.urls')),
]
from django.conf.urls import url
from booktest import views

urlpatterns = [
    url(r'^login_ajax/$', views.login_ajax),#顯示ajax登入頁面
    url(r'^login_ajax_check/$', views.login_ajax_check),#顯示ajax登入校驗
    
]

配置url時,首先在專案的urls.py檔案中新增配置項,並不寫具體的url和檢視函式之間的對應關係,而是包含具體應用的urls.py檔案,在應用的urls.py檔案中寫url和檢視函式的對應關係。

檢視view

from django.shortcuts import render,redirect
from django.http import HttpResponse,JsonResponse
# login_ajax
def login_ajax(request):
    return render(request,'booktest/login_ajax.html') //檢視根據URL匹配的名顯示對應的網頁

# login_ajax_check
def login_ajax_check(request):
    # return JsonResponse({'res':1})
    username = request.GET.get('username')      
    password = request.GET.get('password')

    if username=='smart' and password=='123':
        return JsonResponse({'res':1})  //返回json資料,是一個字典型別,自定義‘1’表示成功,‘0’表示失敗
    else:
        return JsonResponse({'res':0})

瀏覽器的登入請求的過程如下:


登入頁面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax登陸頁面</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <style >
        #errmsg{
            display: none;
            color: red;
        }
        /*沒有美化頁面,只是簡單效果*/
   

    </style>
    <script>
        $(function () {
            $('#btnLogin').click(function () {
                username = $('#username').val()
                password = $('#password').val()
{#                發起校驗使用者名稱請求,請求的地址是/login_ajax_check/#}
                $.ajax({
                    'url': '/login_ajax_check/?username='+username+'&password='+password,
                    'type':'get', //請求提交的方式get/post
                    'dataType':'json',
                }).done(function (data) {    //回撥函式獲取的data就是view返回的json資料
{#                    alert(data.res)#}
                    if(data.res == 0){
                        $('#errmsg').show().html('使用者名稱或密碼錯誤') //jQuery動態新增網頁內容
                    }else {
                        location.href='/index/'      //驗證成功登入首頁
                    }
                }).fail(function () {
                    alert('伺服器請求成功')
                })
            })
        })
    </script>
</head>
<body>
    <div class="div1">
        <label>使用者名稱:</label><input type="text" id="username"><br>
        <label>密碼:</label><input type="password" id="password"><br>
        <div id="errmsg"></div>
        <input type="button" value="登陸" id="btnLogin">
    </div>
</body>
</html>

ajax請求的過程:

1)         發起ajax請求:jquery發起

2)         執行相應的檢視函式,返回json內容

3)         執行相應的回撥函式。通過判斷json內容,如果登入成功,則跳轉到成功頁面。如果不成功,則對登入也進行區域性重新整理。

另一種驗證的方式通過網頁重定向,如果賬戶密碼正確跳轉到首頁,如果錯誤重定向到登入頁面,這種方式的缺點就是在點選登入按鈕的時候會有一個跳閃,影響使用者體驗。

眼界決定做選擇,莫做井底之蛙,勿自欺欺人!