首页 > 代码库 > MySQL前后台交互登录系统设计
MySQL前后台交互登录系统设计
1、首先我们做一个前台的注册页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户登录</title> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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="http://www.mamicode.com/确定注册" id="submit"/> <a type="button" class="btn btn-success" href="http://www.mamicode.com/login.php"/>返回登录</a> </div> </form> </div> </div> </body> <script src="http://www.mamicode.com/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(datahttp://www.mamicode.com/=="注册成功"){ 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="http://www.mamicode.com/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="http://www.mamicode.com/登录系统" id="submit"/> <a type="button" class="btn btn-success" href="http://www.mamicode.com/reg.php"/>注册账号</a> </div> </form> </div> </div> </body> <script src="http://www.mamicode.com/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(datahttp://www.mamicode.com/=="登录成功"){ 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="http://www.mamicode.com/doLogout.php">退出系统</a> </body> </html>
这样一个简单的前后台交互登录注册系统就完成了,如有问题请留言。
MySQL前后台交互登录系统设计
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。