如何实现注册登录
1、首先，编写注册页面代码，并给输入框编写id名。
2、接下来，引入jquery文件，编写立即注册按钮的点击事件，并在前端页面做简单的表单验证，如果验证成功，再执行ajax请求，发送注册信息给后台服务器。
//引入jQuery文件
<script src="jquery-3.3.1.min.js"></script>
//编写script代码
<script>
//jQuery工厂函数
$(function(){
//立即注册按钮的点击事件
$("#registerBtn").click(function(){
//声明4个变量接收表单的数据
var username=$("#username").val();
var pwd=$("#pwd").val();
var repwd=$("#repwd").val();
var tel=$("#tel").val();
//前端的简单验证
//1.非空
if(username=="" || pwd=="" || repwd=="" || tel==""){
alert("输入不能为空");
//return后下面的代码不在执行
return;
}
//2.用户名长度3-16
if(username.length<3 ||username.length>16){
alert("用户名长度必须在3-16位");
return;
}
//3.密码和确认密码是否一致
if(pwd!=repwd){
alert("两次输入密码不一致");
return;
}
//执行ajax发送注册信息给后台服务器
$.ajax({
//地址
url:"register.php",
//方式
type:"post",
//参数
data:{
username:username,
pwd:pwd,
tel:tel
},
//成功的函数 注意res是返回的结果
success:function(res){
//如果结果是1，说明注册成功
if(res==1){
//弹出成功的窗
alert("注册成功");
}else{
//弹出失败的窗
alert("注册失败");
} } }) }) })
</script>
3、接下来，编写register.php文件。
//声明php文件
<?php
//引入封装的函数 注意：include_once引入方法可以防止文件名冲突
include_once "func.php";
//用3个变量来接收前端传递过来的数据
$username=$_POST['username'];
$pwd=$_POST['pwd'];
$tel=$_POST['tel'];
//插入数据库的sql语句
$sql="insert test(username,pwd,tel)value('{$username}','{$pwd}','{$tel}')";
//封装的插入函数insert（），里面封装好的连接数据库函数conn（）
$res=insert(conn("127.0.0.1", "root", "root", "test"), $sql);
//执行插入函数，返回的结果是1或者是0，我们回馈给注册页面
echo $res;
?>
4、接下来，编写func.php文件,封装连接数据库的函数conn（）和插入数据库的函数insert（）和查询数据库的函数select（）。
//声明php文件
<?php
//封装连接数据库函数conn（），注意：里面的5个参数，第一个为主机地址，如“127.0.0.1”，第二个为用户名，如“root”,第三个为密码，如“root”,
第四个为连接的数据库名，如“test”，第五个是我新加的参数，$char="utf8"表示为如果不填写第五个参数，它会默认为“utf8”，记住，所有的参数都要用英文状态的引号包起来。
function conn($host,$user,$pwd,$dbName,$char="utf8"){
//建立一个连接数据库的连接
$link=mysqli_connect($host, $user, $pwd, $dbName);
//如果这个连接返回的是false，就说明连接数据库失败
if($link==false){
//exit相当于return，后面的不再执行
exit("连接数据库失败，请检查参数是否正确");
}
//否者，就是连接成功
else{
//设置字符编码
mysqli_set_charset($link,$char);
//返回这个连接
return $link;
} }
//封装查询的函数
function select($link,$sql){
//执行sql语句的查询
$res=mysqli_query($link, $sql);
//如果执行查询失败
if($res==false){
//返回错误error和错误的编号，并且不再执行下面的代码
echo "error".mysqli_errno($link);
exit;
}
//查询成功
else{
//用变量$arr接收查询成功的结果集
$arr=mysqli_fetch_all($res);
//如果这个结果集不为空
if($arr){
//返回结果集给login.php文件
return $arr;
}
//如果这个结果集为空
else{
//返回null，空
return null;
} }
//执行查询函数，需要释放结果集
mysqli_free_result($arr);
//关闭数据库
mysqli_close($link);
}
//封装插入数据库的函数
function insert($link,$sql){
//执行sql语句的插入
$res=mysqli_query($link, $sql);
//如果执行插入失败
if($res==false){
//返回插入失败的错误error和错误编号，并且不再执行下面的代码
echo "error".errno($link);
exit;
}
//否者，执行插入成功
else{
//插入成功会产生一个受影响的行
$row=mysqli_affected_rows($link);
//如果受影响的行大于0，说明插入成功，也就是注册成功
if($row>0){
//给register.php返回1
return 1;
}
//否者
else{
//给register.php返回0，说明插入失败，也就是注册失败
return 0;
} }
//关闭数据库
mysqli_close($link);
}
?>
5、接下来，编写login.php文件.
<?php
//引入封装的函数 注意：include_once引入方法可以防止文件名冲突
include_once "func.php";
//用2个变量来接收前端传递过来的数据
$username=$_POST['username'];
$pwd=$_POST['pwd'];
//执行查询的sql语句，注意：传递的变量用引号和花括号包起来
$sql="select * from test where username='{$username}' and pwd='{$pwd}'";
//封装的查询函数select（），里面封装好的连接数据库函数conn（）
$res=select(conn("127.0.0.1", "root", "root", "test"), $sql);
//执行查询函数，返回的结果是null就说明查询失败，返回0，也就是登录失败，否者查询成功，返回1，也就是登录成功。
if($res==null){
echo 0;
}else{
echo 1;
}
?>
6、接下来，编写登录页面代码，并给输入框编写id名。
7、接下来，引入jquery文件，编写登录按钮的点击事件，再执行ajax请求，发送账号信息给后台服务器。
//引入jQuery文件
<script src="jquery-3.3.1.min.js"></script>
//编写script代码
<script>
//jQuery工厂函数
$(function(){
//登录按钮的点击事件
$("#loginBtn").click(function(){
//声明2个变量接收表单的数据
var username=$("#username").val();
var pwd=$("#pwd").val();
//执行ajax发送账号信息给后台服务器
$.ajax({
//地址
url:"login.php",
//方式
type:"post",
//参数
data:{
username:username,
pwd:pwd
},
//成功的函数 注意res是返回的结果
success:function(res){
//1.代表成功0.代表失败
if(res==1){
//res等于了1就说明我们输入的用户名和密码是正确的，我们还可以使用confirm（）的方法弹窗，选择确认或取消来判断是否进入首页。
var confirmp=confirm("是否现在登录");
//如果用户点击了确认
if(confirmp){
//跳转到index.html页面，并且在url的路径尾部添加上？username=你输入的用户名
window.location.href="index.html?username="+
$("#username").val();
} } } })
}) })
</script>
8、接下来，编写首页index.html页面代码，并给用户名标签编写id名。
9、接下来，引入jquery文件，编写将地址栏里面的用户名显示到网页中的方法。
//引入jQuery文件
<script src="jquery-3.3.1.min.js"></script>
//编写script代码
<script>
//用一个变量来接收地址栏的地址
var url=window.location.href;
//将地址栏的地址通过“？”拆分，并接收“？”后面的字符串
var str=url.split("?")[1];
//将字符串再次通过“=”拆分，并接收“=”后面的字符串，也就是用户名
str=str.split("=")[1];
//将用户名写入到id为users的标签中，显示在网页中
$("#users").text(str);
</script>
