学习记录-实现登录注册功能

注明：本文章目的是记录学习过程，实现登录注册功能，大概分为两个步骤，搭建web环境----编写html和php页面

第一步：搭建web环境

总体思路：采用虚拟机windserver2008系统搭建，采用phpstudy软件快速搭建web环境，包含了apache、mysql

1）安装server2008系统
这里就不过多介绍，提供一个常用网站下载iso文件https://msdn.itellyou.cn/ 虚拟机里最好安装编辑器，方便后面写代码，个人安装Note++，然后安装了谷歌浏览器。

2）搭建phpstudy

傻瓜式安装，直接双击就可以了，如果之前有server2008系统，需要检查一下mysql，aparch是不是装过，环境是不是干净的，最好卸载，默认端口为80，检查端口是不是被占，不然启动会失败
在这里插入图片描述
启动成功，本地直接访问http://localhost/ ，如果虚拟机是桥接模式，配置ip，同个局域网能访问，网址：你的ip+端口，端口默认为80，可不加，默认访问80端口

第二步：编写html和php页面

注意：保证数据库mysql能够连接，且有对应表能够存储用户信息，这里我是在test库里面提前创建一张表test_ly用于存储用户信息

1）编写html页面

登录页面，存放路径为www目录，web容器会去www目录下取文件，默认是index名开头的文件，为了方便，登录页面取名index.html，直接上代码

// 文件名：index.html
<meta charset="UTF-8">
<title>登陆页面</title>
<div align="center">
</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsphello
&nbspworld
</br></br>
<form action='login.php' method='POST'>
帐&nbsp&nbsp&nbsp号&nbsp&nbsp<input type="text" placeholder="请输入帐号" name="username"></br></br>
密&nbsp&nbsp&nbsp码&nbsp&nbsp<input type="password" placeholder="请输入密码" name="password"></br></br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type='submit' value='登陆'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type="button" onclick="window.location.href='register.html'" value='注册'>
</form>
</div>

效果图，只为实现功能，没有过多去修饰html页面

在这里插入图片描述

注册页面，取名为register.html，代码如下

// 文件名：register.html
<meta charset="UTF-8">
<title>注册页面</title>
<input type="button" onclick="window.location.href='index.html'" value='返回'>
<div align="center">
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 注
&nbsp&nbsp&nbsp&nbsp 册
</br></br>
<form action='register.php' method="POST">
帐&nbsp&nbsp&nbsp号&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" placeholder="请输入帐号" name="add_username"></br></br>
姓&nbsp&nbsp&nbsp名&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="add_name" placeholder="请输入姓名"></br></br>
性&nbsp&nbsp&nbsp别&nbsp&nbsp&nbsp&nbsp&nbsp<input type="radio" name="add_sex" value="1" checked> 男
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type="radio" name="add_sex" value="2">女 <br><br>
身份证&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" oninput = "value=value.replace(/[^\d]/g,'')" placeholder="请输入身份证号码" name="add_id"></br></br>
密&nbsp&nbsp&nbsp码&nbsp&nbsp&nbsp&nbsp&nbsp<input type="password" placeholder="请输入密码" name="add_password"></br></br>
重复密码&nbsp&nbsp<input type="password" name="add_passwd" placeholder="请再次输入密码"> <br><br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type='submit' value='确定'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type='reset'>
</form>
</div>

效果图如下

在这里插入图片描述
注册登录成功后返回页面，用helloworld模拟表示成功，取名hello.html
html写入：hello word

2）编写php页面

编写登录php逻辑，取名login.php ,主要处理登录功能，且加入两个按钮用于跳转，代码如下

// 文件名：login.php
<meta charset="UTF-8">
<div align="center">
<?php  #php代码验证用户帐号密码，有则跳转，无则注册，可以返回 
$username=$_REQUEST["username"];$password=$_REQUEST["password"];#登陆参数
$conn=mysqli_connect("localhost","root","root","test");

if(!$conn)
{
    
    
	echo 'mysql连接失败';
}
else
{
    
    
	$sql="select * from test_ly where username='$username';";#通过帐号去查密码然后断言，username作为主键
	$result_sql=mysqli_query($conn,$sql);
	$result_array=mysqli_fetch_array($result_sql);
	if($result_array['username'])
	{
    
    
		mysqli_close($conn);
		if($result_array['password']==$password and $result_array['username']==$username)
		{
    
    
			echo "$username 登陆成功,即将跳转页面......";
			header("content-type:text/html;charset=utf-8");
			header('refresh:2;url=hello.html');
		}
		else
		{
    
    
			echo "用户$username 登陆失败,密码错误,请重试"; 
		}
	}
	else
	{
    
    
		echo '用户不存在,请重新登陆或注册用户';
	}	
}	
?>
</br></br>
<input type="button" onclick="window.location.href='index.html'" value='返回登陆'>&nbsp&nbsp&nbsp
<input type="button" onclick="window.location.href='register.html'" value='注册新用户'>
</div>

编写注册php逻辑，取名register.php，主要处理注册功能，且加了返回以及跳转相应功能，代码如下

// 文件名：register.php
<meta charset="UTF-8">
<div align="center">
<?php  #php代码验证用户帐号是否存在，有则重新输入，无则继续注册
$add_username=$_REQUEST["add_username"];$add_name=$_REQUEST['add_name'];#注册参数
$add_id=$_REQUEST['add_id'];$add_sex=$_REQUEST['add_sex'];#注册参数
$add_passwd=$_REQUEST['add_passwd'];$add_password=$_REQUEST['add_password'];#注册参数

$conn=mysqli_connect("localhost","root","root","test");
if(!$conn)
{
    
    
	echo 'mysql连接失败';
}
else
{
    
    
$sql="select * from test_ly where username='$add_username'";#通过帐号去验证，username作为主键
$result_sql=mysqli_query($conn,$sql);
$result_array=mysqli_fetch_array($result_sql);
	if($result_array['username'])
	{
    
    
		echo "帐号$add_username 已存在，请重新注册，即将访回注册界面";
		header("content-type:text/html;charset=utf-8");
		header('refresh:5;url=register.html');
	}
	else
	{
    
    
		if($add_passwd!=$add_password)
		{
    
    
			echo '两次密码输入不相同，请重新注册,即将返回注册界面';
			header("content-type:text/html;charset=utf-8");
			header('refresh:5;url=register.html');
		}
		else
		{
    
    
			$sql_add="Insert into test_ly(username,name,password,sex,id)values('$add_username','$add_name','$add_password','$add_sex','$add_id')";
			$mysql_return=mysqli_query($conn,$sql_add);
			if($mysql_return)
			{
    
    
				mysqli_close($conn);
				echo '注册成功,即将跳转页面......';
				header("content-type:text/html;charset=utf-8");
				header('refresh:3;url=hello.html');	
			}
			else
			{
    
    
				echo '注册失败，请重试';
			}
        }

	}
}
?>

学习记录-实现登录注册功能

猜你喜欢