mysql网页后台_MySQL前后台交互登录系统设计

1、首先我们做一个前台的注册页面

用户登录

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;

}

用户注册

用户名

密码

确认密码

真实姓名

    返回登录

$("#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";

}

})

});

});

注：通过Ajax向后台请求数据

2、然后是后台操作

header("Content-Type:text/html;charset=utf-8");

include_once("mysqlshujuku.php");

$userName = $_POST["userName"];

$pwd = $_POST["pwd"];

$realName = $_POST["realName"];

$searchUserSql = <<

select * from user where username = "{$userName}"

searchUserSql;

$res = mysqli_query($conn, $searchUserSql);

if($row = mysqli_fetch_row($res)){

die("用户名已注册");

}

$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、下面我们再做一个简单的前台登录页面

用户登录——杰瑞教育图书管理系统

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;

}

用户登录

用户名

密码

注册账号

$(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("用户名或密码有误！");

}

});

});

});

注：也是通过的Ajax，这里我们登录成功后直接进入主页

4、登录页的后台

@session_start();include_once("mysqlshujuku.php");$userName = $_POST["userName"];$pwd = $_POST["pwd"];$loginSql = <<

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);<?phpheader ("Content-Type:text/html;charset=utf-8");

@session_start();include_once("mysqlshujuku.php");$userName = $_POST["userName"];$pwd = $_POST["pwd"];$loginSql = <<

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、最后是主页，主页的具体内容可以自己补充

我是主页

}else{$str = <<alert("请登陆后操作！");

location= "login.php";js;echo $str;

}?>

退出系统

这样一个简单的前后台交互登录注册系统就完成了，如有问题请留言。