說明 實現網頁登錄後跳轉應該分為兩類:即 登錄成功後跳轉 和 登錄失敗再次登錄成功後跳轉 。參考網上內容,基本都只實現了第一類。而沒有實現第二類。 實現 為了能讓登錄失敗後再次登錄成功後還能實現跳轉。我這裡採用了笨辦法, 即: 無論登錄成功與否,都將跳轉鏈接在前後端進行傳遞 ,這樣跳轉鏈接就不會在登 ...
說明
實現網頁登錄後跳轉應該分為兩類:即登錄成功後跳轉和登錄失敗再次登錄成功後跳轉。參考網上內容,基本都只實現了第一類。而沒有實現第二類。
實現
為了能讓登錄失敗後再次登錄成功後還能實現跳轉。我這裡採用了笨辦法, 即:無論登錄成功與否,都將跳轉鏈接在前後端進行傳遞 ,這樣跳轉鏈接就不會在登錄失敗後消失。不多說,上代碼
後端 views.py
from django.shortcuts import render, redirect
def login(request):
# 當前端點擊登錄按鈕時,提交數據到後端,進入該POST方法
if request.method == "POST":
# 獲取用戶名和密碼
username = request.POST.get("username")
passwd = request.POST.get("password")
# 在前端傳回時也將跳轉鏈接傳回來
next_url = request.POST.get("next_url")
# 對用戶進行驗證,假設正確的用戶名密碼為"aaa", "123"
if username == 'aaa' and passwd == '123':
# 判斷用戶一開始是不是從login頁面進入的
# 如果跳轉鏈接不為空並且跳轉頁面不是登出頁面,則登錄成功後跳轉,否則直接進入主頁
if next_url and next_url != "/logout/":
response = redirect(next_url)
else:
response = redirect("/index/")
return response
# 若用戶名或密碼失敗,則將提示語與跳轉鏈接繼續傳遞到前端
else:
error_msg = "用戶名或密碼不正確,請重新嘗試"
return render(request, "app/login.html", {
'login_error_msg': error_msg,
'next_url': next_url,
})
# 若沒有進入post方法,則說明是用戶剛進入到登錄頁面。用戶訪問鏈接形如下麵這樣:
# http://host:port/login/?next=/next_url/
# 拿到跳轉鏈接
next_url = request.GET.get("next", '')
# 直接將跳轉鏈接也傳遞到後端
return render(request, "autotest/login.html", {
'next_url': next_url,
})
前端頁面 login.html
<form action="{% url 'login' %}" method="post">
<h1>請使用xxx登錄</h1>
<div>
<input id="user" type="text" class="form-control" name="username" placeholder="賬戶" required="" />
</div>
<div>
<input id="pwd" type="password" class="form-control" name="password" placeholder="密碼" required="" />
</div>
// 註意這裡多了一個input。它用來保存跳轉鏈接,以便每次點擊登錄按鈕時將跳轉鏈接傳遞迴後端
// 通過display:none屬性將該input元素隱藏起來
<div style="display: none;">
<input id="next" type="text" name="next_url" value="{{ next_url }}" />
</div>
// 判斷是否有錯誤提示,若有則顯示
{% if login_error_msg %}
<div id="error-msg">
<span style="color: rgba(255,53,49,0.8); font-family: cursive;">{{ login_error_msg }}</span>
</div>
{% endif %}
<div>
<button type="submit" class="btn btn-default" style="float: initial; margin-right: 60px">登錄</button>
</div>
</form>
總結
其實這種實現方式就是讓跳轉鏈接在前後端交互中不損失掉。當然也可以在前端不用form元素,直接用ajax的post形式,然後讓跳轉在前端的ajax邏輯中執行。