1. 程式人生 > >01: 實現註冊登錄功能

01: 實現註冊登錄功能

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"
> <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>
index.html html頁面 技術分享圖片
<body>
    <script>
        /* 初始化函數 
*/ $(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>
index.html js初始化函數 技術分享圖片
/* 顯示登錄、註冊頁面 */
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: 實現註冊登錄功能