1.确认登录功能
应用场景
在使用网站某些功能时,比如将商品加入购物车、在论坛上下载文件等,需要用户先登录才可操作,这时需要确认用户是否登录,如果未登录跳转到登录页面。
实现思路
- 后端:从session中取uid,如果有uid存储在session中,说明用户已登录,如果没有说明未登录;返回用户是否登录的提示信息,如果用户已登录,查询相应的用户名一并返回,用于显示在前端页面上。
- 前端:在页头上,如果用户未登录,显示“登录”、“注销”的信息;如果用户已登录显示“welcome xxx”、“注销”的信息。在商品页面,点击加入购物车按钮时,如果用户未登录,跳转到登录页面;如果用户已登录,将商品添加到购物车。
实现代码
navbar.html
<ul class="logIn" id="loginList">
<li>
<a href="register.html">注册</a>
<a>|</a>
</li>
<li>
<a href="login.html">登录</a>
</li>
</ul>
<ul class="logIn" id="welcomeList">
<li>
<a href="javascript:;">
Welcome
<span id="uname"></span>
</a>
<a>|</a>
</li>
<li>
<a id="logout" href="javascript:;">注销</a>
</li>
</ul>
isLogin.php
<?php
//判断用户是否登录,如果登录,把用户名返回去
//data/users/isLogin.php
header("Content-Type:application/json");
require_once("../init.php");
session_start();
@$uid=$_SESSION["uid"];
//不需要接收参数,去session中拿id
if($uid!=null){
//如果有did,说明用户已登录
$sql="SELECT uname FROM xxx_user WHERE uid=$uid";
$result=mysqli_query($conn,$sql);
$row=mysqli_fetch_row($result);
$uname=$row[0];
//取出uname
echo json_encode(["ok"=>1,"uname"=>$uname]);
//返回提示信息和uname
}else
echo json_encode(["ok"=>0]);
navbar.js
$.getJSON("data/users/isLogin.php",data=>{
if(data.ok==0)
//如果用户未登录
$("#loginList").show().next().hide();
//显示$("#loginList")中“登录”、“注销”的信息
//隐藏$("#loginList")中“welcome xxx”、“注销”的信息
else{
//如果用户已登录
$("#loginList").hide().next().show();
//隐藏$("#loginList")中“登录”、“注销”的信息
//显示$("#loginList")中“welcome xxx(uname)”、“注销”的信息
$("#uname").html(data.uname);
}
});
product_details.js
$(".thing-details>.shop>div>a.cart").click(function(){
//给“加入购物车”按钮添加单击事件
$.get("data/users/isLogin.php",data=>{
//判断用户是否登录,用户先登录才能加入购物车
if(data.ok==1){
//如果用户已登录
var pid=location.search.split("=")[1];
//获取商品id
var count=$(".thing-details>.shop>div>p.account>input").val();
//获取用户需要添加到购物车的商品数量
$.get("data/cart/add.php",{pid,count},()=>{
//将商品id和商品数量添加到购物车
alert("加入购物车成功");
});
}else{
//如果用户未登录
location.href="login.html?back="+location.href;
//跳转到登录页面
}
});
2.注销功能
实现原理
- 注销原理:从session中将uid删除
实现代码
logout.php
<?php
session_start();
session_unset();
//释放当前会话注册的所有会话变量
session_destroy();
//销毁当前会话中的全部数据
navbar.js
$("#logout").click(function(){
$.get("data/users/logout.php").then(()=>{
$("#loginList").show().next().hide();
//显示“登录”、“注销”信息
location.reload(true);
//强制重新刷新页面
});
});
更多内容,欢迎关注微信公众号“让知识成为资产”。