01: 實現註冊登錄功能
阿新 • • 發佈:2018-01-06
def resp hid end spl pos ces ucc turn
1.1 顯示、隱藏 "登錄/註冊" 相關信息
1、此部分實現下面三個功能
功能1:未登錄時在右上角顯示 “登錄/註冊” 菜單
功能2:成功登錄後隱藏 “登錄/註冊” 菜單,顯示登錄用戶信息
功能3:js設置初始化函數:鼠標滑過顯示註銷功能,檢查用戶已登錄直接顯示登錄信息,而不是"登錄/註冊"菜單
2、相關code
<body> <div class="header"> <div class="w"> <div class="login_or_register fr"index.html html頁面> <a href="javascript:void(0);" onclick="show_login_reg_frm()">登錄 / 註冊</a> </div> <div class="user_info fr"> <span id="display_name" {% if is_login %}is_login{% endif %}>{{ user.display_name }}</span> <div class="user_menu hide"> <a>設置</a> <a onclick="logout()">退出</a> </div> </div> </div> </div> </body>
<body> <script> /* 初始化函數index.html js初始化函數*/ $(function () { /* 處理是否登錄 */ if($("#display_name")[0].hasAttribute("is_login")){ // 已經登錄 $(".login_or_register").addClass("hide"); $(".user_info").removeClass("hide"); }else { // 未登錄 $(".login_or_register").removeClass("hide"); $(".user_info").addClass("hide"); } /* 用戶菜單是否顯示: 鼠標劃過就會觸發.hover綁定的函數 */ $("div.user_info").hover(function () { show_user_menu(true); },function () { show_user_menu(false); }); }); </script> </body>
/* 顯示登錄、註冊頁面 */ function show_login_reg_frm() { $("div.login_reg_frm").removeClass("hide"); $("div.shelter").removeClass("hide"); } /* 註銷 */ function logout() { $.get({ url: "/app01/logout/", dataType: "json", success:function (response) { if(response.status==‘ok‘){ window.location.href="/app01/"; } } }) } /* 用戶下拉菜單顯示開關 */ function show_user_menu(flag) { if(flag){ $("div.user_menu").removeClass("hide"); }else{ $("div.user_menu").addClass("hide"); } }base.js
# 註銷 def logout(request): request.session[‘is_login‘] = False request.session[‘current_user‘] = {} return HttpResponse(json.dumps({‘status‘: ‘ok‘}))views.py
1.2
01: 實現註冊登錄功能