交作业了–web项目（二）
|
22
|
3
|
生活点滴

741 字
|
19 分钟

前言

在我的上一篇文章中，我讲到了本地建站前的准备工作，包括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会话的方式实现。

浏览量: 22
知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

感谢大家的耐心阅读，如有疑问，敬请在评论区留言！本文为明赫IT大本营的原创文章，经实践，测试，整理后发布。如需转载请联系作者获得授权，并注明转载地址：https://terry906.top/%e4%ba%a4%e4%bd%9c%e4%b8%9a%e4%ba%86-web%e9%a1%b9%e7%9b%ae%ef%bc%88%e4%ba%8c%ef%bc%89/。
由于本人是学生党，维护服务器一直是用爱发电的状态。如果您恰巧财力雄厚，感觉本文对您有所帮助的话，可以考虑打赏一下本文，用以维持高昂的服务器运营费用（域名费用、服务器费用、CDN费用等）。
杂项

评论

  1. 曹县666我的宝贝
    Windows Chrome 92.0.4515.107
    11月前
    2021-7-22 16:36:11

    加油！继续努力！

    • admin
      博主
      曹县666我的宝贝
      Windows Chrome 92.0.4515.107
      11月前
      2021-7-22 16:38:09

      好的，谢谢你的支持！

  4. 北京艺术培训
    Windows Firefox 90.0
    11月前
    2021-7-27 13:48:26

    感谢分享 赞一个

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																					

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇