01: 实现注册登录功能
Posted 不做大哥好多年
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了01: 实现注册登录功能相关的知识，希望对你有一定的参考价值。
目录：抽屉项目之js最佳实践
目录：
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>
<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>
/* 显示登录、注册页面 */ 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"); } }
# 注销 def logout(request): request.session[\'is_login\'] = False request.session[\'current_user\'] = {} return HttpResponse(json.dumps({\'status\': \'ok\'}))
1.2 注册功能 返回顶部
1、此部分实现以下四个功能
功能1：提交用户注册信息
功能2：检查用户名和邮箱是否已注册
功能3：检查两次密码是否一致
功能4：创建验证码图片标签
2、功能1：提交用户信息
<body> <div class="shelter hide"> <div class="login_reg_frm hide"> <div class="close_login_reg_frm" onclick="close_login_reg_frm()">×</div> <div class="reg_frm fl"> <h1>注册</h1> <form method="post" id="register_frm"> <table> <tr> <th>用户名</th> <td><input type="text" id="login_name" name="login_name" onblur="check_exist(this)"></td> <td class="tips"></td> </tr> <tr> <th>邮箱</th> <td><input type="email" id="email" name="email" onblur="check_exist(this)"></td> <td class="tips"></td> </tr> <tr> <th>密码</th> <td><input id="password" type="password" name="password" autocomplete="off" minlength="3"></td> <td class="tips"></td> </tr> <tr> <th>确认密码</th> <td><input id="password2" type="password" name="password2" autocomplete="off" minlength="3" onblur="confirm_password()"></td> <td class="tips"></td> </tr> <tr> <th>验证码</th> <td> <input type="text" id="verify_code" name="verify_code" class="verify_code" maxlength="4" onclick="create_verify_code_img()"> </td> <td class="tips"></td> </tr> </table> <div style="position: relative;"> <a href="javascript:void(0);" onclick="register(this)">注册</a> <div class="reg_shelter hide"></div> </div> <br> <div class="register_result"></div> </form> </div> </div> </div> </body>
/* 提交用户注册信息 */ function register(ele) { // 数据检查 var check_pass = true; var check_list = { \'login_name\': \'用户名\', \'email\': \'邮箱\', \'password\': \'密码\', \'password2\': \'确认密码\', \'verify_code\': \'验证码\' }; for(var key in check_list){ var val = $.trim($(\'.reg_frm #\' + key).val()); if(val.length==0){ // 如果要检查的input值为空，提醒用户 check_pass = false; $(".reg_frm #" + key).parent().parent().find(\'td:last-child\').text("不能为空"); } } if(!check_pass){ return false; } // 通过检查后 var login_name = $.trim($(\'.reg_frm #login_name\').val()); var email = $.trim($(\'.reg_frm #email\').val()); var password = $.trim($(\'.reg_frm #password\').val()); var password2 = $.trim($(\'.reg_frm #password2\').val()); var verify_code = $.trim($(\'.reg_frm #verify_code\').val()); // 提交前，先将按钮置为不可点击 $("div.reg_shelter").removeClass("hide"); var data = $(\'#register_frm\').serialize(); console.log(data); $.post({ url: "/app01/register/", data: data, dataType: "json", success: function (response) { console.log(response); if(response.hasOwnProperty("status")){ if(response.status==\'ok\'){ //console.log("注册成功"); $("div.register_result").text("注册成功"); setTimeout(function () { $("div.login_reg_frm").addClass("hide"); $("div.shelter").addClass("hide"); }, 2000); }else{ $("div.reg_shelter").addClass("hide"); $("div.register_result").text(response.msg); } }else{ var ul = document.createElement(\'ul\'); for(var key in response){ var li = document.createElement(\'li\'); li.innerText = response[key][0].message; ul.appendChild(li); } $("div.register_result").html(ul.outerHTML); $("div.reg_shelter").addClass("hide"); } }, error: function (xhr) { $("div.reg_shelter").addClass("hide"); } }); reload_verify_code(); // 无论结果如何，都刷新验证码 }
# 用户注册 def register(request): # 注册的URL if request.method == \'POST\': reg_frm = RegisterFrm(data=request.POST) if reg_frm.is_valid(): cd = reg_frm.cleaned_data # 验证码比对 vcode_from_client = cd.get("verify_code", "") vcode_in_session = request.session.get("verify_code") if vcode_from_client and vcode_in_session and vcode_from_client.upper() == vcode_in_session.upper(): # 验证码比对通过 new_user = reg_frm.save(commit=False) password2 = cd.get("password2") m = hashlib.md5() m.update(password2.encode()) new_user.password = m.hexdigest() new_user.display_name = cd.get("login_name") new_user.email = cd.get("email") # new_user.last_login = datetime.datetime.now() new_user.last_login = timezone.now() new_user.last_ip = request.META.get("REMOTE_ADDR") new_user.save() # request.POST[\'verify_code\'] = "" return HttpResponse(json.dumps({\'status\': \'ok\'})) return HttpResponse(json.dumps({\'status\': \'fail\', \'msg\': \'验证码不正确\'})) else: return HttpResponse(reg_frm.errors.as_json())
3、功能2：检查用户名和邮箱是否已注册
<tr> <th>用户名</th> <td><input type="text" id="login_name" name="login_name" onblur="check_exist(this)"></td> <td class="tips"></td> </tr> <tr> <th>邮箱</th> <td><input type="email" id="email" name="email" onblur="check_exist(this)"></td> <td class="tips"></td> </tr>
/* 检查用户名和邮箱是否已注册 */ function check_exist(ele) { var t = ele.getAttribute("name"); var v = ele.value; v = $.trim(v); if(v.length>0){ $.post({ url: "/app01/check_exist/", data: {"check_type": t, "check_value": v}, dataType: "json", success: function (response) { var check_result = ""; if(response.status==\'ok\'){ // 没有重复 check_result = "√"; }else{ check_result = "已存在"; ele.setAttribute("duplicate", "duplicate"); } $(ele).parent().parent().find(\'td:last-child\').text(check_result); } }); } }
# 用户注册时，检查提交的数据是否占用 def check_exist(request): # 检查是否已存在相同的值 if request.method == \'POST\': check_type = request.POST.get("check_type") value = request.POST.get("check_value") parameter = {check_type: value} count = User.objects.filter(**parameter).count() if count > 0: return HttpResponse(json.dumps({\'status\': \'fail\', \'msg\': \'exist\'})) else: return HttpResponse(json.dumps({\'status\': \'ok\'}))
4、功能3：检查两次密码是否一致
<tr> <th>密码</th> <td><input id="password" type="password" name="password" autocomplete="off" minlength="3"></td> <td class="tips"></td> </tr> <tr> <th>确认密码</th> <td><input id="password2" type="password" name="password2" autocomplete="off" minlength="3" onblur="confirm_password()"></td> <td class="tips"></td> </tr>
/* 检查两次密码是否一致 */ function confirm_password() { if($(\'.reg_frm #password\').val()!=$(\'#password2\').val()){ $(\'.reg_frm #password2\').parent().parent().find(\'td:last-child\').text("两次密码不一致"); }else{ $(\'.reg_frm #password\').parent().parent().find(\'td:last-child\').text("√"); $(\'.reg_frm #password2\').parent().parent().find(\'td:last-child\').text("√"); } }
5、功能4：创建验证码图片标签
<tr> <th>验证码</th> <td> <input type="text" id="verify_code" name="verify_code" class="verify_code" maxlength="4" onclick="create_verify_code_img()"> </td> <td class="tips"></td> </tr>
/* 创建验证码图片标签 */ function create_verify_code_img() { // 创建验证码图片标签，插入到验证码输入框后面 if(!document.getElementById(\'verify_code_img\')){ var img = document.createElement(\'img\'); img.id = \'verify_code_img\'; img.src = \'/app01/verify_code/\'; img.className = \'verify_code\'; img.onclick = reload_verify_code; $("input.verify_code").after(img); } } /* 刷新验证码函数 JAVA实现QQ登录注册修改密码等功能（美化版）