通常情况下,我们的导航右侧显示内容要根据登录状态改变,例如:未登录则显示登录注册,登录后则显示欢迎***,实现方法有很多种,可以前端实现,也可以后端实现,前端实现的方法也很多,session,cookie,或者直接用jquery的插件,比如cookie.js;
作为一个前端小白,尽量自己解决,多写就会多学到东西的呀!下面是我通过百度,总结的方法,很简单,希望能够一起分享!
注:因为怕大家看不懂,不知道到底复制了代码之后放到自己的哪个文件下,我粘的代码比较详细,你们需要的看,不需要的直接过滤就好。你们复制红色部分就可以啦!
① 我是用ajax调用接口进行登录,登录成功时,创建一个cookie! $('#j-login-btn').click(function(userName,passWord){ var userName = $('#j-pwd-tel').val(); var passWord = $('#j-pwd').val(); var type = 1; if(userName == '手机号') { $("#msgphone").text("手机号不能为空!") return false; } else { if(passWord == '密码') { $("#msgpsw").text("密码不能为空!") return false; } else { $.ajax({ type: "post", url: 'http://brace.hxwomi.com/web/user/login', data: { "info": "{\"username\":\"" + userName + "\",\"passwordOrSms\":\"" + passWord + "\",\"type\":\"1\"}" }, success: function(data) { console.log(data); if(data.code == "200") { location.href = 'index.html'; //增加的保存cookie代码 var exp = new Date(); exp.setTime(exp.getTime() + 60 * 1000 * 60 * 24); //24小时 document.cookie = "userName=" + userName + ";expires=" + exp.toGMTString(); document.cookie = "passWord=" + passWord + ";expires=" + exp.toGMTString(); //新增结束 } else { $("#msgpsw").html("手机号或密码错误!") } }, error: function() { alert("网络错误"); } })
} }
})
②获取cookie信息(比如我在首页要判断是否登录,然后修改导航样式,那就粘贴以下代码放到首页) <script> function getCookie(name) { var strCookie = document.cookie; var arrCookie = strCookie.split("; "); for (var i = 0; i < arrCookie.length; i++) { var arr = arrCookie[i].split("="); if (arr[0] == name) return arr[1]; } return ""; }
var islogin = getCookie("userName"); if(islogin!==''){ $("#loginbf").hide(); $("#loginaf").show(); }else{ $("#loginbf").show(); $("#loginaf").hide(); } </script>
这里我的导航写了两种样式,一种id为loginbf,一种为loginaf,通过显示隐藏来实现样式的改变,你们也可以通过增加类名来改变样式。这就是最普通的jquery,就不多说啦。
如果想实现点击导航,比如我的课程按钮(id=myclass),需要先登录,登录后才可以进入我的课程页面,实现如下:
//我的课程是否登录验证 $("#myclass").click(function(){ var islogin01=getCookie("userName"); if(islogin01!==''){ location.href='mycourse.html' }else{ alert("您还没有登录哦!立即登录!"); location.href='login.html'; } })
此时,如果未登录,就会跳转到登录页面,登录成功后,我写的是跳转到首页,大家按照需要自己写!
function exitLogin() { document.cookie = "userName="; document.cookie = "passWord="; window.location.reload(true); }
当你登出成功后调用该方法即可!代码如下:
//登出 $('#logout').click(function(){ $.ajax({ type: "post", url: 'http://brace.hxwomi.com/web/user/logout', success: function(data) { console.log(data.code); if(data.code == "200") { exitLogin(); location.href = 'index.html'; } else { alert(data.msg) } }, error: function() { alert("网络错误"); } }) })