本地搭建简易的登陆注册网页

Record my learning process of HTML.

HTML

字数统计: 4k阅读时长: 17 min

 2019/03/20   Share

昨天晚上看了一叶飘零大佬的直播，大佬说：初学者最好自己先动手去做一些项目，这样能更好的了解原理，恰好学长要求做一个简易的登陆注册系统，利用这个机会再学习一波。

做了两天，搞懂了很多概念，也遇到了很多问题，但是这个过程特别有意思，记录一下，把那些学到的知识也总结一下。

一：准备工作

打开mySQL
在这里插入图片描述
打开网站根目录

这里我直接放在了WWW目录下，有点乱。

这样准备工作就做好了，开始奋斗了。

开始之前把我写的php文件简单描述一下：
login.php（登陆页面)
logincookie.php（连接数据库+设置cookie页面）
welcome.php (判断是否有cookie以防绕过+登陆后呈现的页面)
end.php (清除cookie页面)
Register.php (注册页面)
linkmysql.php（注册时连接数据库页面）
Register link.php（注册判断是否注册成功和导入数据库用户信息页面）
fail.php (登陆失败页面)

二：创建登陆页面和注册页面

感悟：
那句话怎么说，学到用时方恨少，差不多就这个意思，之前学过HTML和CSS，但一自己写。。。，就会写个简单的表单，无非就是加一个外部样式CSS改一下背景颜色什么的。。。所以还得查大佬的。

在这里插入图片描述
这个样式干净又好看（自己认为），所以模仿，但是并非是复制粘贴，自己一步一步敲。。。
（下面是转载自mind_programmonkey 大佬的CSS)

html{
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-style: sans-serif;
}
body{
    width: 100%;
    height: 100%;
    font-family: 'Open Sans',sans-serif;
    margin: 0;
    background-color: #4A374A;
}
#login{
    position: absolute;
    top: 50%;
    left:50%;
    margin: -150px 0 0 -150px;
    width: 300px;
    height: 300px;
}
#login h1{
    color: #fff;
    text-shadow:0 0 10px;
    letter-spacing: 1px;
    text-align: center;
}
h1{
    font-size: 2em;
    margin: 0.67em 0;
}
input{
    width: 278px;
    height: 18px;
    margin-bottom: 10px;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    text-shadow:1px 1px 1px;
    border-top: 1px solid #312E3D;
    border-left: 1px solid #312E3D;
    border-right: 1px solid #312E3D;
    border-bottom: 1px solid #56536A;
    border-radius: 4px;
    background-color: #2D2D3F;
}
.but{
    width: 300px;
    min-height: 20px;
    display: block;
    background-color: #4a77d4;
    border: 1px solid #3762bc;
    color: #fff;
    padding: 9px 14px;
    font-size: 15px;
    line-height: normal;
    border-radius: 5px;
    margin: 0;
}
--------------------- 
作者：mind_programmonkey 
来源：CSDN 
原文：https://blog.csdn.net/Mind_programmonkey/article/details/78522494

这是我的HTML代码

<?php
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>请登陆</title>
    <link rel="stylesheet" type="text/css" media="screen" href="1.css">
    <script src="main.js"></script>
</head>
<body>
    <div id="login">
    <h1>login</h1>
    <form action="logincookie.php" method="post">
 <input type="text" name="username"  placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
    <br />
    <button class="tj" type="submit">登陆</button>
	</form>
    <form action="Register.php" method="post">
	<button class="zc" type="submit">注册</button>
	</form>
</body>
</html>

做之前没有懂其中的一些东西，现在做完了把之前不懂的弄懂。
（下面是我的，就是一些值改过）

body {
        width: 100px;
        height: 100px;
        background-color: beige;
        background-image: url(28.jpg);//加一张图片
}
#login{
    position: absolute;//通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 50%，距离页面顶部 50%。
    top:50%;
    left:50%;
    margin: -150px 0 0 -150px;//这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。该属性可以有 1 到 4 个值，上外边距是 -150px，右外边距是 0px，下外边距是 0px，左外边距是 -150px
    width: 300px;
    height: 300px;
}

#login h1{
    color: 	#9393FF;
    text-shadow: 0 0 10px;//text-shadow 属性向文本设置阴影,其他添加的效果可以在W3school查到。
    letter-spacing: 1px;//letter-spacing 属性增加或减少字符间的空白（字符间距）
    text-align: center;//text-align 属性规定元素中的文本的水平对齐方式，这里是居中对齐。
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

input {
    width: 300px;
    height: 20px;
    margin-bottom: 10px;//margin-bottom 属性设置元素的下外边距
    outline: none;//outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
    padding: 10px;//padding 简写属性在一个声明中设置所有内边距属性,所有 4 个内边距都是 10px.
    font-size: 20px;
    color: #fff;
    text-shadow: 1px 1px 1px;//text-shadow属性向文本设置阴影
    border-top: 1px solid #312E3D;//border-top 属性在一行声明中为上边框设置所有的属性
    border-left: 1px solid #312E3D;
    border-right: 1px solid #312E3D;
    border-bottom: 1px solid #56536A;
    border-radius: 4px;
    background-color:#2D2D3F;

}

.tj {
    width: 300px;
    min-height: 20px;
    display: block;
    background-color: #4a77d4;
    border: 1px solid #3762bc;//border 简写属性在一个声明设置所有的边框属性
    color: #fff;
    padding:  9px 14px;
    font-size:15px;
    line-height: normal;//
    border-radius: 5px;
    margin: 0px;
}

.zc {
    width: 300px;
    min-height: 20px;
    display: block;
    background-color: #33CC33;
    border: 1px solid #3762bc;
    color: #fff;
    padding:  9px 14px;
    font-size:15px;
    line-height: normal;//line-height 属性设置行间的距离（行高）
    border-radius: 5px;
    margin: 0px;
}

了解了这些属性，但还是不知道为啥大佬这样设置其中的一些数据，毕竟目前是小白，慢慢来吧。

我用的是CSS外部样式表,把CSS存到1.css文件中，在login.php（登陆页面）文件中引用。

1	<link rel="stylesheet" type="text/css" media="screen" href="1.css">

这样，就完成了第一步！
实现效果如下：
在这里插入图片描述
在登陆页面加一个注册按钮

在1.css里面添加一段

.zc {
    width: 300px;
    min-height: 20px;
    display: block;
    background-color: #33CC33;
    border: 1px solid #3762bc;
    color: #fff;
    padding:  9px 14px;
    font-size:15px;
    line-height: normal;//line-height 属性设置行间的距离（行高）
    border-radius: 5px;
    margin: 0px;
}

实现效果：
在这里插入图片描述
再做一个注册页面（Register.php），采用相同的CSS，换个颜色即可。
Register.php
代码如下：

<?php
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>请注册</title>
    <link rel="stylesheet" type="text/css" media="screen" href="3.css">
</head>
<body>
    <div id="Register">
    <h1>Register</h1>
    <form action="Register link.php" method="POST">
 <input type="text" name="username"  placeholder="请输入用户名" />
<input type="password" name="password" placeholder="请输入密码" />
    <br />
	<button class="zc" type="submit">注册</button>
    </form>
</body>
</html>

实现效果如下：
在这里插入图片描述
这样就实现了登陆页面和注册页面。

三：连接mySQL和设置COOKIE

我们的登陆页面和注册页面都已经做好了，现在就来写一个PHP文件来连接数据库并且设置一下cookie.
logincookie.php（连接数据库+设置cookie页面）
代码如下：

<?php
//第一次登陆的时候，通过用户输入的信息来确认用户
header('Content-type: texy/html;charset=utf-8');
//设置编码，防止乱码
if ( ( $_POST['username'] != null ) && ( $_POST['password'] != null ) ) {//判断输入是否为空
    $userName = $_POST['username'];//post方式接收传来的参数，用定义的$userName和$password接收
    $password = $_POST['password'];
    //从数据库获取用户信息
    //数据库连接信息 分别为主机 数据库用户名 密码
    $conn = mysqli_connect('localhost','root','root');

    mysqli_select_db($conn,'login');//连接所创建的login数据库

    $sql = "select * from user where username = '$userName'";//从数据库表中获取数据
    $res = mysqli_query($conn,$sql);//针对login这个数据库进行查询, 查询是否存在有这个用户名
    $row = mysqli_fetch_array($res);//输出查询结果，传给$row
	if	($row['username']!=$userName) {
		echo '不能登陆';
		header('Location:fail.php');
	}
	else if($row['username']==$userName&&$row['password']!=$password)
	{
		echo '不能登陆';
		header('Location:fail.php');
	}
	else if($row['username']!=$userName&&$row['password']!=$password) {
		echo '不能登陆';
		header('Location:fail.php');
	}
    else if($row['username']==$userName&&$row['password'] ==$password) {    
        //如果密码验证通过，设置一个cookies，把用户名保存在客户端
        setcookie('username',$userName,time()+3600);//设置一个小时
        //最后跳转到登录后的欢迎页面
		echo '登陆成功';
        header('Location:welcome.php');//跳转到最后的欢迎页面
    }
}
else {
	echo '登陆失败';
	header('Location:fail.php');//跳转到失败页面
}

这里面的PHP连接数据库语法，需要学习一下才能知道这些语句的意思。
w3school网站
这个网站特别好，特别详细，从这里面可以学习到PHP连接mySQL语法。

1
2
3

例如：
mysql_connect(servername,username,password);//主机名、数据库用户名、密码
//一般初始的数据库用户名和密码都是		root

语法学习会再总结一个单独的博客来记录一下，这里主要介绍一下搭建流程和遇到的问题。

通过PHP连接mySQL语法我们就可将用户输入的信息用POST方式传入到数据库中，然后利用查询语句进行查询数据库数据，进行比对，然后判断用户名和密码是否与数据库所存数据相同。

接下来实现cookie，一开始真的不知道有什么用处，查了一些博客，看了一些概念，就知道是把用户的信息存储到客户端，方便用户下次登入。但其实cookie也可以设置防绕过的功能，就例如：
如果我不设置cookie，那么我的登陆页面和最终页面都是独立的，靠的也只是HTML中的<form action=" "> 来连接进行跳转功能。但这样不安全，如果对方注册一个用户，登陆到你的最终页面，可以直接在url地址栏里直接输入这个文件，例如我的最终页面是welcome.php，对方一输入没有如何阻拦，直接就可以进入。所以设置cookie的作用不仅是把用户的信息保存在客户端，更重要的防止绕过。

cookie的具体介绍可以看一下
B站孙胜利老师的讲解的和菜鸟教程官网上的介绍，特别详细。

一开始模仿大佬做，设置了两个cookie，一个是用户名的。另一个是密码的，但已经写过注销cookie了PHP文件却依旧能在url地址栏里直接进入后台，一开始真的不知道错误点在那，搞了很长时间，但这个过程及其有意思，查资料，问朋友，自己修改代码。最后发现。。。，其实完全不用设置密码的cookie了，我设置用户名cookie的前提便是用户名输入和数据库密码相等了，所以只要设置一个用户名cookie，便能够识别和登陆。也可以在注销cookie时，把密码的cookie注销，之前直接能登入后台就是因为我设置了两个cookie，却只清除了一个。。。

找到问题所在就可以成功设置好cookie，并且注销cookie了。

四：实现登陆功能和注销cookie

在上面我们实现了两个页面，一个是登陆页面，一个连接数据库+cookie的，下面我们还需要两个页面。
一个登陆失败页面（fail.php）
代码如下：

<?php
?>
	<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登陆失败</title>
    <link rel="stylesheet" type="text/css" media="screen" href="2.css">
</head>
<body>
	<div id="login">
    <h1>请重新登陆</h1>
	</div>
    <a href="login.php">重新登陆</a>
</body>
</html>

可以看logincookie.php的代码中，如果用户名和密码有一个不正确的时候，都会跳转到fail.php页面。
实现效果：
在这里插入图片描述
下面我们再实现一个用户登陆成功的页面（welcome.php）
代码如下：

<?php
	if(!isset($_COOKIE['username'])){//如果cookie没有设置，则不能登陆。
		echo '不能登陆';
		exit();
	}
?>
//上面的代码便是设置cookie的作用便用于此，这样便可防止直接登入后台
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>请登陆</title>
    <link rel="stylesheet" type="text/css" media="screen" href="4.css">
</head>
<body>
    <div id="Landingsuccessfully">
    <h1>Landingsuccessfully</h1>
    <a href="end.php">Please cancel</a>
</body>
</html>

实现效果：
直接从url里面登陆，显示结果：
在这里插入图片描述
正常用户登陆，显示结果：

因为我设置的cookie是一个小时的，我们需要手动清除一下cookie，否则客户端会保留cookie，下次在url里直接可以登陆后台。

所以再写一个注销cookie的页面（end.php）
代码如下：

<?php 
ini_set("error_reporting","E_ALL & ~E_NOTICE"); 
header('Content-type:text/html;charset=utf-8');
if (isset($_COOKIE['username'])) {
	setcookie('username',$userName,time()-3600);
	echo '注销成功';
}
?>

之前这个页面老是报错，大致便是Notice:Undefined varialbe:变量名称，但注销功能能正常实现，加上

ini_set("error_reporting","E_ALL & ~E_NOTICE");

便可以解决报错问题，查资料发现。
在4.3.0中运行正常，在4.3.1中运行会提示Notice:Undefined varialbe:tmp_i
修改方法：
在程序开头加一句：
error_reporting(E_ALL & ~E_NOTICE); 或error_reporting(E_ALL ^ E_NOTICE);
具体查看：
报错原因和修改方法

这样就实现了cookie注销的功能了
实现效果：
在这里插入图片描述
进行一下测试，看是否清除cookie。
在url地址栏里直接登陆后台试试

ok,看来确实注销成功了，完成咯。

五：实现注册功能

登陆功能也完全实现了，接下来我们就实现一下注册功能。
这里我们又写了三个页面（好乱），不过毕竟是小白，只要能写出来就行。
首先是注册页面（Register.php）
代码如下：

<?php
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>请注册</title>
    <link rel="stylesheet" type="text/css" media="screen" href="3.css">
</head>
<body>
    <div id="Register">
    <h1>Register</h1>
    <form action="Register link.php" method="POST">
 <input type="text" name="username"  placeholder="请输入用户名" />
<input type="password" name="password" placeholder="请输入密码" />
    <br />
	<button class="zc" type="submit">注册</button>
    </form>
</body>
</html>

接下来是连接数据库(linkmysql.php)
代码如下：

<?php
    header("Content-type: text/html; charset=utf-8");//设置编码,防止乱码
    $con = mysql_connect("localhost","root","root") or die("数据库连接失败");
    mysql_select_db('login') or  die("指定的数据库不能打开");
    mysql_query("set names utf8");
?>

再就是导入信息的页面（Register link.php）
代码如下：

<?php
	require_once("linkmysql.php");//首先连接数据库
	$name=trim($_POST['username']);
	//trim函数，过滤空格，使用trim函数，我们可以把表单中空格给过滤掉
	$password=$_POST['password'];

	 $sql = "select * from user where username='$name'";//从数据库查找用户名数据
		$info = mysql_query($sql);//函数执行一条 MySQL 查询
		$res = mysql_num_rows($info);//返回一行的结果

	if(empty($name)){//empty() 函数用于检查一个变量是否为空。
		echo "<script>alert('用户名不能为空');location.href='login.php';</script>";
	}else if(empty($password)){
		echo "<script>alert('密码不能为空');location.href='login.php';</script>";
	}else{	
		if($res){
			echo "<script>alert('用户名已存在');location.href='login.php';</script>";
		}else{
			$sql1 ="insert into user(username,password) values('".$name."','" .$password."')";//PHP MySQL 插入数据
			$result = mysql_query($sql1);//判断插入数据是否成功
			if($result){
		 			echo "<script>alert('注册成功')</script>";
					 header('Location:login.php');
					
			}else{
		 			echo "<script>alert('注册失败')</script>";
			}
		}
}	
?>

这样就实现了注册功能。
这里面涉及了数据库的PHP mySQL插入的语法，可以在菜鸟教程学习，之后再写一篇总结一下这些语句的用法。

🆗，到此为止我们就实现了简易的登陆注册页面。

虽然这个项目很小，但做出了真的很有成就感，同时觉得学习的东西真的好有意思，加油，继续努力学习（开心！！！）。
在这里插入图片描述

Next Post

HTML学习总结
Previous Post

CSS学习总结

CATALOG

1. 一：准备工作
2. 二：创建登陆页面和注册页面
3. 三：连接mySQL和设置COOKIE
4. 四：实现登陆功能和注销cookie
5. 五：实现注册功能

