通常情况下,我们的导航右侧显示内容要根据登录状态改变,例如:未登录则显示登录注册,登录后则显示欢迎***,实现方法有很多种,可以前端实现,也可以后端实现,前端实现的方法也很多,session,cookie,或者直接用jquery的插件,比如cookie.js;
作为一个前端小白,尽量自己解决,多写就会多学到东西的呀!下面是我通过百度,总结的方法,很简单,希望能够一起分享!
cookie方法:
注:因为怕大家看不懂,不知道到底复制了代码之后放到自己的哪个文件下,我粘的代码比较详细,你们需要的看,不需要的直接过滤就好。你们复制红色部分就可以啦!
① 我是用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';
}
})
此时,如果未登录,就会跳转到登录页面,登录成功后,我写的是跳转到首页,大家按照需要自己写!
最后,登出后,要清空cookie!
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("网络错误");
}
})
})