本文最后更新于：2 年前
前言
在我的上一篇文章中，我讲到了本地建站前的准备工作，包括MySQL数据库的创建。现在，我将为大家讲解编写注册和登录页面的详细过程。请大家认真理解源代码中的注释！这里的MySQL数据库，只涉及到单表的CRUD操作，所以不是很难。
P.S.由于下学期太忙，一直没有更新，暑假才有时间总结。网页已经做出来几个月了，过程可能记得不是很清楚了，如有疑问敬请在评论区提出，我会尽量解答！
正文
CSS我不太会写，这里直接借鉴了某宝上的模板。因为注册和修改密码没有模板，所以只有最简单的HTML页面！
废话不多说，先上代码！
1.登录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
| //index.html
<!DOCTYPE html>
<html>
<head>
<title>登录页面（样例）</title>
<meta name="keywords" content="登录界面素材" />
<meta name="description" content="none" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script
type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
</head>
<body>
<!-- main -->
<div class="main-w3layouts wrapper">
<h1>登录页面</h1>
<div class="main-agileinfo">
<div class="agileits-top">
<form action="登录.php" method="post">
<input class="text" type="text" name="Username" placeholder="用户名" required="">
<input class="text" type="password" name="Password" placeholder="密码" required="">
<div class="wthree-text">
<ul>
<li>
<label class="anim">
<input type="checkbox" class="checkbox">
<span> 记住我?(别点了，记不住的)</span>
</label>
</li>
<li><a href="修改密码.html">忘记密码?</a> </li>
</ul>
<div class="clear"> </div>
</div>
<input type="submit" value="登录" >
</form>
<p>没有账号? <a href="注册.html" id="register"> 现在注册一个！</a></p>
<script>
var register=document.getElementById('register');
register.addEventListener('click',function(){
location.href='注册.html';
})
</script>
</div>
</div>
<!-- copyright -->
<div class="w3copyright-agile">
<p>© 2021 <a href="http://terry906.top">Terry Zhang</a>. All rights reserved</p>
</div>
<!-- //copyright -->
<ul class="w3lsg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- //main -->
</body>
</html>
//登录.php
<?php
$username = $_POST['Username'];
$password = $_POST['Password'];
$conn=mysqli_connect("127.0.0.1","root","12345678");
if(!$conn){
die("数据库连接失败！");
}
mysqli_select_db($conn,"www_test_com");
mysqli_set_charset($conn,'utf-8');
//查询用户
$chks = "select username,password from obj_message where username='$username' and password='$password'";
$result = mysqli_query($conn,$chks);
if(mysqli_num_rows($result) > 0){
echo "<script>location.href='登录跳转.html'</script>";
}else{
echo "<script>alert('用户名或密码错误!');</script>";
echo "<script>location.href='index.html'</script>";
}
mysqli_close($conn);
//登录成功.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面（样例）</title>
</head>
<body>
<div>恭喜您，登录成功！</div><br>
<ul class="nav">
<li>
<a href="#">我的</a>
<ol>
<li><a href="#">个人中心</a></li>
<li><a href="#">积分</a></li>
<li><a href="index.html">注销</a></li>
</ol>
</li>
</ul>
<script>
var nav=document.querySelector('.nav');
var lis=nav.children;
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function (){
this.children[i].style.display='block';
}
lis[i].onmouseout=function (){
this.children[i].style.display='none';
}
}
</script>
</body>
</html>
//登录跳转.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录跳转页（样例）</title>
<style>
.sp{font-size: 50px;}
</style>
</head>
<body>
<span><img src="正确.png" width="60px"/></span>
<span class="sp"></span>
<script>
var sp=document.querySelector('.sp');
var timer=5;
setInterval(function(){
if(timer==0){
location.href='登录成功.html';
}else{
sp.innerHTML='<strong>登录成功！您将在'+timer+'秒钟跳转！</strong>';
timer--;
}
},1000);
</script>
</body>
</html>
|
2.注册
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
| //注册.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面（样例）</title>
</head>
<body>
<h1 align="center">注册账号</h1>
<form action="注册信息.php" method="post">
用户名:<input type="text" value="请输入用户名" id="username" name="username" required/><br>
密码:<input type="text" value="请输入6-16位密码" id="pwd1" name="password" required/><br>
确认密码:<input type="text" value="请再次输入" id="pwd2" name="repassword" required/><br>
<script>
var pwd1=document.getElementById('pwd1');
var pwd2=document.getElementById('pwd2');
var username=document.getElementById('username');
var flag1=0;
var flag2=0;
username.onfocus=function(){
if(username.value==='请输入用户名'){
username.value='';
}
username.style.color='#333';//onfocus是得到焦点，#333是黑色
}
username.onblur=function(){
if(username.value===''){
username.value='请输入用户名';
}
username.style.color='#999';//onblur是失去焦点，#999是灰色
}
pwd1.onfocus=function(){
if(pwd1.value==='请输入6-16位密码'){
pwd1.value='';
pwd1.type='password';
}
pwd1.style.color='#333';
}
pwd2.onfocus=function(){
if(pwd2.value==='请再次输入'){
pwd2.value='';
pwd2.type='password';
}
pwd2.style.color='#333';
}
</script>
<input type="submit" value="注册" id="zc">
<script>
var zc=document.getElementById('zc');
zc.addEventListener('click',function(){
location.href="index.html";
})
</script>
</form>
</body>
</html>
//注册跳转.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册跳转页（样例）</title>
<style>
.sp{font-size: 50px;}
</style>
</head>
<body>
<span><img src="正确.png" width="60px"/></span>
<span class="sp"></span>
<script>
var sp=document.querySelector('.sp');
var timer=5;
setInterval(function(){
if(timer==0){
location.href='index.html';
}else{
sp.innerHTML='<strong>注册成功！您将在'+timer+'秒钟跳转！</strong>';
timer--;
}
},1000);
</script>
</body>
</html>
//注册信息.php
<?php
$username=$_POST['username'];
$password=$_POST['password'];
$repassword=$_POST['repassword'];
if($password!=$repassword)
{
echo "<script>alert('两次密码不一致！')</script>";
exit();
}
$arr=$_POST;
$conn=mysqli_connect("127.0.0.1","root","12345678");
if(!$conn){
die("数据库连接失败！");
}
mysqli_select_db($conn,"www_test_com");
mysqli_set_charset($conn,'utf-8');
$chk = "select username from user where username = '$username'";
$result = mysqli_query($conn,$chk);
if(mysqli_num_rows($result) > 0)
{
echo "<script>alert(\"该用户名已被注册\");</script>";
exit();
}
$sql="insert into obj_message set username='$_POST[username]',password='$_POST[password]',repassword='$_POST[repassword]'";
$check=mysqli_query($conn,$sql);
if($check)
{
echo "<script>location.href='注册跳转.html';</script>";
}
else
{
echo "<script>location.href='#';</script>";
}
mysqli_close($conn);
|
哦，差点忘了还有修改密码的页面：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| //修改密码.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>修改密码（样例）</title>
</head>
<body>
<h1>修改密码</h1><br>
<form action="修改密码.php" method="POST">
用户名：<input type="text" name="usernames" required /><br>
修改密码：<input type="password" name="cgpwd" required /><br>
确认密码：<input type="password" name="recgpwd" required /><br>
<input type="submit" value="修改" id="change" />
</form>
</body>
</html>
//修改密码.php
<?php
$usernames=$_POST['usernames'];
$cgpwd=$_POST['cgpwd'];
$recgpwd=$_POST['recgpwd'];
if($cgpwd!=$recgpwd)
{
echo "<script>alert('两次输入的新密码不一致！');</script>";
exit();
}
$conn=mysqli_connect("127.0.0.1","root","12345678");
if(!$conn){
die("数据库连接失败！");
}
mysqli_select_db($conn,"www_test_com");
mysqli_set_charset($conn,'utf-8');
//查询用户
$chkss = "select username from obj_message where username='$usernames'";
$results = mysqli_query($conn,$chkss);
if(mysqli_num_rows($results) > 0){
;
}else{
echo "<script>alert('该用户名不存在!');</script>";
echo "<script>location.href='index.html';</script>";
}
$sqls="update obj_message set password='$_POST[cgpwd]',repassword='$_POST[recgpwd]' where username='$_POST[usernames]'";
$qs=mysqli_query($conn,$sqls);
if($qs)
{
echo "<script>alert('修改成功！');</script>";
echo "<script>location.href='index.html';</script>";
}
else
{
echo "<script>alert('修改失败！');</script>";
echo "<script>location.href='#';</script>";
}
mysqli_close($conn);
|
P.S.由于我是在PHPstudy上进行测试，所以IP地址一律填127.0.0.1，如果不是本机就填MySQL服务器IP！代码中的root和12345678分别为数据库账号和密码，因人而异！
结语
最后我发现，其实可以把连接数据库的PHP代码单独写成一个文件，然后在其它页面通过文件包含的相关函数（例如include()，require()）进行引用，这样可以减少代码量。首页的“记住密码”是假的，我想今后可以通过session会话的方式实现。