超级简单的原生php+Mysql+jquery教程，适用人群（新手，大学生做毕设）---第2篇（登录注册篇）-CSDN博客

本文链接：https://blog.csdn.net/2201_75622149/article/details/141475244

👉用户的登录和注册

前端登录的代码

😛注意复制的时候报错可能是因为图片信息有误

<!DOCTYPE html>
<html lang="en">
<!-- https://codepen.io/danielkvist/pen/LYNVyPL -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            /* COLORS */
            --white: #e9e9e9;
            --gray: #333;
            --blue: #0367a6;
            --lightblue: #008997;
            /* RADII */
            --button-radius: 0.7rem;
            /* SIZES */
            --max-width: 758px;
            --max-height: 420px;
            font-size: 16px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        }

        body {
            align-items: center;
            background-color: var(--white);
            background: url("images/11.webp");
            /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。*/
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: grid;
            height: 100vh;
            place-items: center;
        }

        .form__title {
            font-weight: 300;
            margin: 0;
            margin-bottom: 1.25rem;
        }

        .link {
            color: var(--gray);
            font-size: 0.9rem;
            margin: 1.5rem 0;
            text-decoration: none;
        }

        .container {
            background-color: var(--white);
            border-radius: var(--button-radius);
            box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25), 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
            height: var(--max-height);
            max-width: var(--max-width);
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .container__form {
            height: 100%;
            position: absolute;
            top: 0;
            transition: all 0.6s ease-in-out;
        }

        .container--signin {
            left: 0;
            width: 50%;
            z-index: 2;
        }

        .container.right-panel-active .container--signin {
            transform: translateX(100%);
        }

        .container--signup {
            left: 0;
            opacity: 0;
            width: 50%;
            z-index: 1;
        }

        .container.right-panel-active .container--signup {
            animation: show 0.6s;
            opacity: 1;
            transform: translateX(100%);
            z-index: 5;
        }

        .container__overlay {
            height: 100%;
            left: 50%;
            overflow: hidden;
            position: absolute;
            top: 0;
            transition: transform 0.6s ease-in-out;
            width: 50%;
            z-index: 100;
        }

        .container.right-panel-active .container__overlay {
            transform: translateX(-100%);
        }

        .overlay {
            background-color: var(--lightblue);
            background: url("images/t0191092c3b966b97f6.jpg");
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
            left: -100%;
            position: relative;
            transform: translateX(0);
            transition: transform 0.6s ease-in-out;
            width: 200%;
        }

        .container.right-panel-active .overlay {
            transform: translateX(50%);
        }

        .overlay__panel {
            align-items: center;
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: center;
            position: absolute;
            text-align: center;
            top: 0;
            transform: translateX(0);
            transition: transform 0.6s ease-in-out;
            width: 50%;
        }

        .overlay--left {
            transform: translateX(-20%);
        }

        .container.right-panel-active .overlay--left {
            transform: translateX(0);
        }

        .overlay--right {
            right: 0;
            transform: translateX(0);
        }

        .container.right-panel-active .overlay--right {
            transform: translateX(20%);
        }

        .btn {
            background-color: var(--blue);
            background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
            border-radius: 20px;
            border: 1px solid var(--blue);
            color: var(--white);
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: bold;
            letter-spacing: 0.1rem;
            padding: 0.9rem 4rem;
            text-transform: uppercase;
            transition: transform 80ms ease-in;
        }

        .form>.btn {
            margin-top: 1.5rem;
        }

        .btn:active {
            transform: scale(0.95);
        }

        .btn:focus {
            outline: none;
        }

        .form {
            background-color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0 3rem;
            height: 100%;
            text-align: center;
        }

        .input {
            background-color: #fff;
            border: none;
            padding: 0.9rem 0.9rem;
            margin: 0.5rem 0;
            width: 100%;
        }

        @keyframes show {

            0%,
            49.99% {
                opacity: 0;
                z-index: 1;
            }

            50%,
            100% {
                opacity: 1;
                z-index: 5;
            }
        }
    </style>
</head>

<body>
    <div class="container right-panel-active">
        <!-- Sign Up -->
        <div class="container__form container--signup">
            <form action="#" class="form" id="form1">
                <h2 class="form__title">注 册</h2>
                <input type="number" placeholder="请输入电话号码" class="input" id="phone"/>
                <input type="text" placeholder="请输入名称" class="input" id="username"/>
                <input type="password" placeholder="请输入密码" class="input" id="password"/>
                <input type="password" placeholder="请输入确认密码" class="input" id="repassword"/>
                <button class="btn" onclick="add()">注册</button>
            </form>
        </div>
        <!-- Sign In -->
        <div class="container__form container--signin">
            <form action="#" class="form" id="form2">
                <h2 class="form__title">登 录</h2>
                <input placeholder="请输入用户id" class="input" id="login-phone"/>
                <input type="password"placeholder="请输入密码" class="input" id="login-password"/>
                <a href=" " class="link">忘记密码？前去注册！！！</a>
                <button class="btn" onclick="login()">登 录</button>
            </form>
        </div>
        <!-- Overlay -->
        <div class="container__overlay">
            <div class="overlay">
                <div class="overlay__panel overlay--left">
                    <button class="btn" id="signIn">登 录</button> </div>
                <div class="overlay__panel overlay--right">
                    <button class="btn" id="signUp">注 册</button> </div>
            </div>
        </div>
    </div>
    </body>
</html>

向后端发送请求

<script src="js/jquery-3.6.1.min.js"></script>
    <script>
<!--        原生javascript-->
        const signInBtn = document.getElementById("signIn");
        const signUpBtn = document.getElementById("signUp");
        const fistForm = document.getElementById("form1");
        const secondForm = document.getElementById("form2");
        const container = document.querySelector(".container");
        signInBtn.addEventListener("click", () => { container.classList.remove("right-panel-active"); });
        signUpBtn.addEventListener("click", () => { container.classList.add("right-panel-active"); });
        fistForm.addEventListener("submit", (e) => e.preventDefault()); secondForm.addEventListener("submit", (e) => e.preventDefault());

        //这里是注册的代码
        function add(){
            //拿到输入框里面的数据
            let username=$("#username").val();
            let phone=$("#phone").val();
            let password=$("#password").val();
            let repassword=$("#repassword").val();
            //对电话号码判断
            // console.log(/^1[3-9]\d{9}$/.test(phone))

            if (username.trim()===""){
                alert("用户名不能为空")
                return;
            }

            if (password.trim()===""){
                alert("密码不能为空")
                return;
            }

            if (repassword!==password){
                alert("俩次密码正确，请重新输入")
                return;
            }

            //请求后端
            $.post(
                'addUser.php',
                {username:username, phone:phone,password:password },
                function(res){ // 假设后端返回true false的字符串
                    var obj = $.parseJSON(res);
                    // console.log(obj.id)
                    if(obj.istrue === 'true'){
                        // 跳转首页面
                        alert("注册成功，前往首页")
                        localStorage.setItem("user_id",obj.id)
                        window.location = 'home.html';
                    }else{
                        alert('用户id重复！');
                    }

                }
            );
        }

        //这里是登录的代码
        function login(){
            let phone=$("#login-phone").val();
            let password=$("#login-password").val();
            //请求后端
            $.post(
                'getUser.php',
                {phone:phone,password:password },
                function(res){ // 假设后端返回true false的字符串
                    var res = JSON.parse(res);
                    if(res.istrue === "true"){
                        // 跳转首页面
                        localStorage.setItem('user_id',res.id)
                        alert("登录成功，前往首页")
                        window.location = 'home.html';
                    }else{
                        alert('登录失败,账号或密码错误');
                    }
                }
            );
        }
    </script>

请求后端的俩个php

addUser.php

注：这里是增加用户的后端（注册）

<?php 
		// 允许所有来源进行跨域请求
//		header('Access-Control-Allow-Origin: *');
//		// 允许的HTTP方法
//		header('Access-Control-Allow-Methods: GET, POST, PUT');
//		// 允许的头信息
//		header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');
		//1 连接数据库应用系统，并选择数据库
		$conn = mysqli_connect("localhost", "root", "root", "shop");
		///
		//2 编写sql asc 升序 desc 降序
		$username = $_POST['username'];
		$password = $_POST['password'];
		$phone = $_POST['phone'];

		$sql = "INSERT INTO user (username, password, phone)VALUES ('$username', '$password', '$phone');";
		///
		//3 执行sql，并将结果保存
		$rs = mysqli_query($conn, $sql);
		//
		if($rs){
			$sql="SELECT * FROM user WHERE phone='$phone';";
            $rs = mysqli_query($conn, $sql);
            $data = mysqli_fetch_assoc($rs);
            $data["id"]=$data['id'];
            $data["istrue"]="true";
            echo json_encode($data);;
		}else{
			echo 'false';
		}

?>

getUser.php（获取一个用户的后端）

<?php 

		//1 连接数据库应用系统，并选择数据库
		$conn = mysqli_connect("localhost", "root", "root", "shop");
		///
		//2 编写sql asc 升序 desc 降序
		$phone = $_POST['phone'];
		$password = $_POST['password'];
		$sql = "select * from user where phone = '$phone'";
		///
		//3 执行sql，并将结果保存
		$rs = mysqli_query($conn, $sql);
		//
		//4 将数据库返回的结果集转换为PHP能处理的二维关联数组
		$data = mysqli_fetch_assoc($rs);

//        var_dump($data);
        if ($data['phone'] == $phone && $data['password'] == $password) {
            $data["istrue"]="true";
            echo json_encode($data);
        }else{
            echo "false";
        }

?>

————到此用户登录注册就基本完成了（成品如下）————