交作业了–web项目(二)

前言

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

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

感谢大家的耐心阅读,如有疑问,敬请在评论区留言!本文为明赫IT大本营的原创文章,经实践,测试,整理后发布。如需转载请联系作者获得授权,并注明转载地址。

评论

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

    加油!继续努力!

    • admin 博主
      3月前
      2021-7-22 16:38:09

      好的,谢谢你的支持!

  2. 3月前
    2021-7-27 13:48:26

    感谢分享 赞一个

发送评论 编辑评论


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