標籤：insert class 教育 使用者登入 失敗 註冊系統 註冊帳號 對比 position
1、首先我們做一個前台的註冊頁面
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使用者登入</title> <link rel="stylesheet" type="text/css" href="../../libs/bootstrap.css"/> <style type="text/css"> body{ margin: 0px; padding: 0px; background-color: #CCCCCC; } .panel{ width: 380px; height: 420px; position: absolute; left: 50%; margin-left: -190px; top: 50%; margin-top: -210px; } .form-horizontal{ padding: 10px 20px; } .btns{ display: flex; justify-content: center; } </style> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title">使用者註冊</div> </div> <div class="panel-body"> <form class="form-horizontal"> <div class="form-group"> <label>使用者名稱</label> <input type="text" class="form-control" name="userName"/> </div> <div class="form-group"> <label>密碼</label> <input type="password" class="form-control" name="pwd" /> </div> <div class="form-group"> <label>確認密碼</label> <input type="password" class="form-control" name="rePwd" /> </div> <div class="form-group"> <label>真實姓名</label> <input type="text" class="form-control" name="realName" /> </div> <div class="form-group btns"> <input type="button" class="btn btn-primary" value="確定註冊" id="submit"/> <a type="button" class="btn btn-success" href="login.php"/>返回登入</a> </div> </form> </div> </div> </body> <script src="../../libs/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#submit").on("click",function(){ var userName = $("input[name=‘userName‘]").val(); var pwd = $("input[name=‘pwd‘]").val(); var rePwd = $("input[name=‘rePwd‘]").val(); var realName = $("input[name=‘realName‘]").val(); if(userName==""||pwd==""||rePwd==""||realName==""){ alert("所有資訊不可為空白，請確認！"); return; }else if(pwd!=rePwd){ alert("兩次密碼輸入不一致！"); return; } $.post("doReg.php",{ "userName":userName, "pwd":pwd, "realName":realName },function(data){ alert(data); if(data=="註冊成功"){ location = "login.php"; } }) }); }); </script></html>
註：通過Ajax向後台請求資料
2、然後是後台操作
<?phpheader("Content-Type:text/html;charset=utf-8");include_once("mysqlshujuku.php");$userName = $_POST["userName"];$pwd = $_POST["pwd"];$realName = $_POST["realName"];$searchUserSql = <<<searchUserSqlselect * from user where username = "{$userName}"searchUserSql;$res = mysqli_query($conn, $searchUserSql);if($row = mysqli_fetch_row($res)){die("使用者名稱登入");}$insertUserSql = <<<insertUserSqlinsert into yzdl (username,pwd,realname)values ("{$userName}","{$pwd}","{$realName}");insertUserSql;$isOk = mysqli_query($conn,$insertUserSql);if($isOk){echo "註冊成功";}else{echo "註冊失敗";}mysqli_free_result($res);mysqli_close($conn);
註：這裡我們對MySQL資料庫中的資料進行了對比，已註冊的使用者無法註冊
3、下面我們再做一個簡單的前台登入頁面
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>使用者登入——傑瑞教育圖書管理系統</title><link rel="stylesheet" type="text/css" href="../../libs/bootstrap.css"/><style type="text/css">body{margin: 0px;padding: 0px;background-color: #CCCCCC;}.panel{width: 380px;height: 280px;position: absolute;left: 50%;margin-left: -190px;top: 50%;margin-top: -140px;}.form-horizontal{padding: 10px 20px;}.btns{display: flex;justify-content: center;}</style></head><body><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title">使用者登入</div></div><div class="panel-body"><form class="form-horizontal"><div class="form-group"><label>使用者名稱</label><input type="text" class="form-control" name="userName"/></div><div class="form-group"><label>密碼</label><input type="password" class="form-control" name="pwd"/></div><div class="form-group btns"><input type="button" class="btn btn-primary" value="登入系統" id="submit"/> <a type="button" class="btn btn-success" href="reg.php"/>註冊帳號</a></div></form></div></div></body><script src="../../libs/jquery.min.js"></script><script type="text/javascript">$(function(){$("#submit").on("click",function(){var userName = $("input[name=‘userName‘]").val();var pwd = $("input[name=‘pwd‘]").val();$.post("doLogin.php",{"userName":userName,"pwd":pwd},function(data){alert(data);if(data=="登入成功"){location = "index.php";}else{alert("使用者名稱或密碼有誤！");}});});});</script></html>
註：也是通過的Ajax，這裡我們登入成功後直接進入首頁
4、登入頁的後台
<?php header("Content-Type:text/html;charset=utf-8"); @session_start(); include_once("mysqlshujuku.php"); $userName = $_POST["userName"]; $pwd = $_POST["pwd"]; $loginSql = <<<login select * from yzdl where username="{$userName}" and pwd = "{$pwd}";login; $res = mysqli_query($conn, $loginSql); if($row = mysqli_fetch_row($res)){ $_SESSION["user"] = $row; echo "登入成功"; }else{ echo "登入失敗"; } mysqli_free_result($res); mysqli_close($conn);<?php header("Content-Type:text/html;charset=utf-8"); @session_start(); include_once("mysqlshujuku.php"); $userName = $_POST["userName"]; $pwd = $_POST["pwd"]; $loginSql = <<<login select * from yzdl where username="{$userName}" and pwd = "{$pwd}";login; $res = mysqli_query($conn, $loginSql); if($row = mysqli_fetch_row($res)){ $_SESSION["user"] = $row; echo "登入成功"; }else{ echo "登入失敗"; } mysqli_free_result($res); mysqli_close($conn);
5、最後是首頁，首頁的具體內容可以自己補充
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>我是首頁</h1> <?php session_start(); if(isset($_SESSION["user"])){ echo "歡迎您，{$_SESSION[‘user‘][3]}"; }else{ $str = <<<js <script> alert("請登陸後操作！"); location = "login.php"; </script>js; echo $str; } ?> <a href="doLogout.php">退出系統</a> </body></html>
這樣一個簡單的前後台互動登入註冊系統就完成了，如有問題請留言。
MySQL前後台互動登入系統設計
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
