前言
在我的上一篇文章中,我讲到了本地建站前的准备工作,包括MySQL数据库的创建。现在,我将为大家讲解制作注册和登录页面的详细过程。请大家认真理解源代码中的注释!P.S.由于下学期太忙,一直没有更新,暑假才有时间总结。网页已经做出来几个月了,过程可能记得不是很清楚了,如有疑问敬请在评论区提出,我会尽量解答!
正文
CSS我不太会写,这里直接借鉴了某宝上的模板。因为注册和修改密码没有模板,所以只有最简单的HTML页面!
废话不多说,先上代码!
1.登录
//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="https://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.注册
//注册.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);
哦,差点忘了还有修改密码的页面:
//修改密码.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代码单独写成一个文件,然后在其它页面通过头文件的方式引用,这样可以减少代码量。首页的“记住密码”是假的,我想今后可以通过session会话的方式实现。
加油!继续努力!
好的,谢谢你的支持!
感谢分享 赞一个