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、然后是后台操作
<?php
header("Content-Type:text/html;charset=utf-8");
include_once("mysqlshujuku.php");
$userName = $_POST["userName"];
$pwd = $_POST["pwd"];
$realName = $_POST["realName"];
$searchUserSql = <<<searchUserSql
select * from user where username = "{$userName}"
searchUserSql;
$res = mysqli_query($conn, $searchUserSql);
if($row = mysqli_fetch_row($res)){
die("用戶名已注冊");
}
$insertUserSql = <<<insertUserSql
insert 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>
這樣一個簡單的前后台交互登錄注冊系統就完成了，如有問題請留言。