登录功能代码(前端＋后端)

编程知识更新时间:2023-04-03 22:01:28

1.实现思路

在登录页面用表单提交数据的方式，向后端发送用户名和密码；
在数据库的用户表中查询是否有前端传来的用户名和密码，并向前端返回提示信息
登录成功后跳回原页面

2.实现代码

登录页面HTML代码

<form id="login">
    用户名: <input id="txtName" name="uname" value=""/><br>
    密码: <input id="txtPwd" type="password" name="upwd" value=""/><br>
    <input type="button" value="登录">
    <input type="reset" value="取消">
</form>

php处理数据

<?php
//data/user/login.php
header("Content-Type:application/json"); 
require_once("../init.php");

//获取用户名和密码
@$uname=$_REQUEST["uname"];
@$upwd=$_REQUEST["upwd"];

//查询数据库中用户表的数据，并返回提示信息
if($uname && $upwd){ 
    $sql="SELECT * FROM xxx_user WHERE uname='$uname' and binary upwd='$upwd'"; 
    //密码区分大小写，加binary
    $result=mysqli_query($conn,$sql);
    $row=mysqli_fetch_row($result); 
    if($row!=null){
    //如果存在相应的用户名和密码
        session_start(); 
        //PHP session 变量用于存储有关用户会话的信息，或更改用户会话的设置
        //把用户信息存储到 PHP session 中之前，首先必须启动会话       
        $_SESSION["uid"]=$row[0]; 
        //获取uid
        //存储和取回session变量的正确方法是使用$_SESSION变量
        echo json_encode(["ok"=>1]); 
        //登录成功返回的提示信息
    }else
        echo json_encode(["ok"=>0,"msg"=>"用户名密码不正确！"]);
        //登录失败返回的提示信息
}

登录成功后跳转回当前页面(jQuery代码)

$(()=>{
    $("#login>:button").click(()=>{
        //发ajax请求，提交用户名和密码
        $.post(
            "data/users/login.php",
            //规定连同请求发送到服务器的数据
            {
                uname:$("#txtName").val(),
                upwd:$("#txtPwd").val()
            }
        ).then(data=>{
                if(data.ok==1){
                    alert("登录成功");
                    location=document.referrer 
                    //跳回原页面，referrer 属性可返回载入当前文档的文档的 URL
                }else
                    alert("登录失败！"+data.msg);
            });
    });
});