MySQL前后台交互登录系统设计
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>
这样一个简单的前后台交互登录注册系统就完成了，如有问题请留言。
MySQL前后台交互登录系统设计的更多相关文章
- 基础框架整合-ssm框架+前后台交互完整教程
1.基本概念 ssm:spring+springMVC+mybatis 2.开发环境 Eclipse mars + jdk1.7 + maven + tomcat7 3.使用maven构建web项目 ...
- express框架+jade+bootstrap+mysql开发用户注册登录项目
完整的项目代码(github):https://github.com/suqinhui/express-demo express是基于Node.js平台的web应用开发框架,用express框架开发w ...
- JAVA配置&注解方式搭建简单的SpringMVC前后台交互系统
前面两篇文章介绍了 基于XML方式搭建SpringMVC前后台交互系统的方法,博文链接如下: http://www.cnblogs.com/hunterCecil/p/8252060.html htt ...
- shell编程系列22--shell操作数据库实战之shell脚本与MySQL数据库交互(增删改查)
shell编程系列22--shell操作数据库实战之shell脚本与MySQL数据库交互(增删改查) Shell脚本与MySQL数据库交互(增删改查) # 环境准备:安装mariadb 数据库 [ro ...
- MySQL命令行登录的例子
环境:MySQL Sever 5.1 + MySQL命令行工具 问题:MySQL命令行登录 解决: 命令 行登录语法: mysql –u用户名 [–h主机名或者IP地址] –p密码 说明:用户名是你登 ...
- PHP与MySQL的交互（mysqli）
近期在学习PHP,这里总结一下PHP与MySQL的交互. 这里我们使用mysqli进行连接. mysqli扩展允许我们访问MySQL 4.1及以上版本提供的功能. 想深入了解mysqli的信息可以访问 ...
- Devexpress 使用经验 —— ASPxGridView前后台交互写法推荐
这里的格式是仁者见仁智者见智,这篇随笔只是我在工作过程中总结出的阅读性高,对我来说效率较高的写法. ASPX: <dx:ASPxGridView ID="ASPxGridViewLin ...
- jquery ajax返回json数据进行前后台交互实例
jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...
- MySQL开放远程登录
在服务器上部署MYSQL每次观看MYSQL记录或者修改的时候都需要登录服务器,又烦又占资源.所以使用另一种方法:对外开放接口. 注:如果某些服务器开启防火墙屏蔽了某些接口就有可能导致远程用户无法登录M ...
随机推荐
- Myeclipse中 Exploded location overlaps an existing deployment解决办法
实效解决方法: 项目->properties->MyEclipse->Web->Web Context-root的名字为重命名之后的名字即可 其实这里的Web Context- ...
- lua工具库penlight--06数据（二）
词法扫描 虽然 Lua 的字符串模式匹配是非常强大,但需要更强大的东西.pl.lexer.scan可以提供标记字符串,按标记机分类数字.字符串等. > lua -lpl Lua 5.1.4 C ...
- windows config yii framework
download and config download yii-1.1.12 unzip into yii-1.1.12 config yii-1.1.12 dir an apache httpdo ...
- Java动态代理原理及其简单应用
概念 代理对象和被代理对象一般实现相同的接口,调用者与代理对象进行交互.代理的存在对于调用者来说是透明的,调用者看到的只是接口.代理对象则可以封装一些内部的处理逻辑,如访问控制.远程通信.日志.缓存等 ...
- VC编译的时候因为加载符号导致编译过程异常缓慢的处理
之前调试console程序用了一下Ctrl+C,弹出的异常处理选择框自己点了什么忘记了,结果之后再调试,发现特别慢,最下面一直在走着一系列dll的加载符号.让我特别二呼的是断网的话就没事了,联网就一直 ...
- FlashBuilder 4.6序列号破解
1424-4827-8874-7387-0243-7331 1424-4938-3077-5736-3940-5640 具体步骤如下: 1.到Adobe官网下载FlashBuilder 4.6,有简体 ...
- 【黑马Android】(04)数据库的创建和sql语句增删改查/LinearLayout展示列表数据/ListView的使用和BaseAdater/内容提供者创建
数据库的创建和sql语句增删改查 1. 载入驱动. 2. 连接数据库. 3. 操作数据库. 创建表: create table person( _id integer primary key, nam ...
- spring+mybatis+javafx
@Service用于标注业务层组件 @Controller用于标注控制层组件(如struts中的action) @Repository用于标注数据访问组件,即DAO组件. @Component泛指组件 ...
- MPAndroidChart -- LimitLine的坑
好久没有写博客了,最近比较忙,项目中使用了MPAndroidChart,初次使用也比较蠢,很多API都得一个一个查,但有些时候当你想应该有这个API的时候他却没有,就比如今天的主角LimitLine ...
- TypeScript 接口（三）
TypeScript的核心原则之一是对值所具有的结构进行类型检查. 接口初始: interface objProperty { name: string } function printName(na ...