php + mysql实现简单的登录注册，查询，验证码网站

其他 2020-06-25 10:08:06 阅读次数: 0

好记性不如烂笔头，记录web作业，写一个简单的小网站，实现登录，注册，查询等功能
注意：如果 php和html混写,文件存储为php文件,无论php代码的位置在哪里，都会先执行php代码的内容
原因：在php文件中php代码的优先级高于html,因此会先执行php代码
解决方法：在php文件中最开始的位置用if做一个判断,判断表单提交了,再执行php代码

if(isset($_POST['submit'])){
 代码块;
}

登录：

login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<link rel="stylesheet" type="text/css" href="login1.css">
<script src="back.js" defer></script>
<script src="login.js" defer></script>
</head>

<body>
    <div id="dl">
        <p>枕上诗书闲处好，门前风景雨来佳</p>
        <div class="box">
        <!--οnsubmit="return check()"-->
        <form method="post" action="login.php" οnsubmit="return check()">
            <input class="username" type="text" name="username" placeholder="用户名/帐号">
            <input class="password" type="password" name="password" placeholder="密码">
             <div class="code_box">
                <p><li class="code_left"><input class="code" type='text' name="code" placeholder='验证码' maxlength="4" autocomplete="off"></li></p>
                <p><li><canvas class="code_tu" οnclick="dj()">你的浏览器不支持 canvas，请升级你的浏览器。</canvas></li></p>
            </div>
            <input class="submit" type="submit" name="sub" value="登录">
        </form>
        <ul class="center_ul">
            <li><a href="#">忘记密码</a></li>
            <li class="right_li"><a href="regist.html">注册帐号</a></li>
        </ul>
        </div>
    </div>
</body>
</html>

login.js

//验证表单是否输入
function check(){
    var user = document.getElementsByClassName('username')[0].value;
    var pass = document.getElementsByClassName('password')[0].value;
    var code = document.getElementsByClassName('code')[0].value;
    var num = show_num.join("");
    if (user==null || user==""){
        document.getElementsByClassName('username')[0].setAttribute("placeholder","请输入用户名");
        return false;
    }
    else if (pass==null || pass==""){
        document.getElementsByClassName('password')[0].setAttribute("placeholder","请输入密码");
        return false;
    }
    else if (code==null || code==""){
        document.getElementsByClassName('code')[0].setAttribute("placeholder","请输入验证码");
        return false;
    }
    if(code.toLowerCase() != num.toLowerCase()){//验证码是够正确
        // alert('验证码错误！\n你输入的是:  '+code+"\n正确的是:  "+num+'\n请重新输入！');
        alert('验证码错误');
        draw(show_num);
        return false;
    }
}

var show_num = [];
function dj(){//更新图片
    draw(show_num);
}
//用canvas画出验证码
function draw(show_num){
    var canvas_width=document.getElementsByClassName('code_tu')[0].clientWidth;
    var canvas_height=document.getElementsByClassName('code_tu')[0].clientHeight;
    var canvas = document.getElementsByClassName("code_tu")[0];//获取到canvas的对象
    var pen = canvas.getContext("2d");//获取到canvas画图的环境
    canvas.width = canvas_width;
    canvas.height = canvas_height;
    var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
    var aCode = sCode.split(",");
    var aLength = aCode.length;//获取到数组的长度

    for (var i = 0; i <= 3; i++){
    var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
    var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
    var txt = aCode[j];//得到随机的一个内容
    show_num[i] = txt;
    var x = 10 + i * 20;//文字在canvas上的x坐标
    var y = 16 + Math.random() * 8;//文字在canvas上的y坐标
    pen.font = "bold 30px Arial";

    pen.translate(x, y);
 //   pen.rotate(deg);//将验证码旋转

 //   pen.fillStyle = randomColor();//涂上喜欢的颜色
    pen.fillText(txt, 0, 0);

//    pen.rotate(-deg);
    pen.translate(-x, -y);
    }
    // for (var i = 0; i <= 5; i++){//验证码上显示线条
    // pen.strokeStyle = randomColor();
    // pen.beginPath();
    // pen.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
    // pen.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
    // pen.stroke();
    // }
    // for (var i = 0; i <= 30; i++){//验证码上显示小点
    // pen.strokeStyle = randomColor();
    // pen.beginPath();
    // var x = Math.random() * canvas_width;
    // var y = Math.random() * canvas_height;
    // pen.moveTo(x, y);
    // pen.lineTo(x + 1, y + 1);
    // pen.stroke();
    // }
}
draw(show_num);
function randomColor(){//得到随机的颜色值
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}

login.php

<?php
header("content-Type: text/html; charset=utf-8");
// error_reporting(0);
$username = $_POST['username'];
$password = $_POST['password'];
$conn = mysqli_connect('localhost','root','yuxu2000908','myuser');
mysqli_query($conn , "set names utf8");
if(!$conn){
    echo '数据库连接失败！';
    exit(0);
}else{
    $sql = "select name from user where name = '$username'";//查询出用户表中是否有输入的用户名
    $result = mysqli_query($conn,$sql);//将查询结果保存到$result中
    if (!$result) {
        printf("Error: %s\n", mysqli_error($conn));
        exit();
    }
    $number = mysqli_num_rows($result);//将查询结果的行数保存到nums中，若nums为0，则用户名输入错误
    if($number){
        $sql_pass = "select password from user where password = '$password' and name = '$username'";//根据输入的用户名和密码查询对应的密码
        $result_pass = mysqli_query($conn,$sql_pass);//将查询结果保存到$result_pass中
        $number_pass = mysqli_num_rows($result_pass);//将查询结果的行数保存到$number_pass中，若$number_pass为0，则密码输入错误
        if($number_pass){
            echo"<script>alert('登录成功！');location.href = 'home.html';</script>";//登录成功
        }else{
            echo"<script>alert('登录失败，请重新输入用户信息！');location.href = 'login.html';</script>";
        }
    }else{
        echo '<script>alert("用户名输入错误！");history.go(-1);</script>';
    }
}
?>

login1.css

*{
	padding: 0;
	margin: 0;
	background-color: rgb(235, 233, 233);

}
li{
	list-style: none;
}
a{
	text-decoration: none;
}
p{
	font-size: 60px;
	font-family: 楷体;
	text-align: center;
}
body{
	margin:0;
	padding:0;
	background-color: rgb(235, 233, 233);
}
.username_change::-webkit-input-placeholder{
	color: red;
}
#dl{
	width:100%;
	height: 800px;
	background-color: rgb(235, 233, 233);
	margin-top: 20px;
	text-align:center;
}
#dl .box{
	width: 500px;
	height: 400px;
	margin-top: 300px;
	margin: auto;
	text-align:center;
	/*border: 1px solid blue;*/
}
#dl .box a{
	color: rgb(185, 227, 255);
}
#dl .box a:link{
	color: #00eeee;
}
#dl .box a:visited{
	color: #00eeee;
	color: #2ecc71;
}
#dl .box a:hover{
	color: #00ff00;
}
#dl .box a:active{
	color: rgb(170, 157, 157);
}
#dl .box h1{
	color:#fff;
	text-transform:uppercase;
	font-weight:500;
	margin: 0 0 40px 0;
}
#dl .box .center_ul{
	margin: 0 auto;
}
#dl .center_ul li{
	width: 40%;
	margin: 20px 0 0 50px;
	color:black;
	font-weight:500;
	float: left;
	border-right: 1px solid #00ff00;
}
#dl .box .right_li{
	border: none;
	margin-left: 0;
}
#dl .box .username,#dl .box .password{
	width:250px;
	background:none;
	display:block;
	margin:20px auto;
	text-align:center;
/*	border:2px solid #3498db;*/
	padding:14px 10px;
	outline:none;
	color:black;
	border-radius:4px;
	transition:0.25s;
}

#dl .box .username:focus,#dl .box .password:focus{
	width:300px;
	border-color:#2ecc71;
}
#dl .box .submit{
	background:none;
	display:block;
	margin:20px auto 0;
	text-align:center;
	border:2px solid #2ecc71;
	padding:10px 40px;
	outline:none;
	font-size: 15px;
	color:black;
	border-radius:4px;
	transition:0.25s;
	cursor:pointer;/* 鼠标指针放在一个元素边界范围内时所用的光标形状 */
}
#dl .box .submit:hover{
	background:#2ecc71;
}
#dl .box .code_box{
	width: 500px;
	height: 30px;
	/*border: 1px solid #fff;*/
}
#dl .code_box li{
	width: 120px;
	height: 30px;
	float: left;
}
#dl .code_box .code_left{
	margin:0 0 0 120px;
}
#dl .box .code{
	width:100px;
	height: 30px;
	background:none;
	text-align:center;
	/*border:1px solid #3498db;*/
	outline:none;
	color:black;
	border-radius:4px;
	transition:0.25s;
}
#dl .box .code:focus{
	width:120px;
	border-color:#2ecc71;
}
#dl .code_tu{
	width: 100px;
	height: 30px;
/*	border: 1px solid #fff;*/
	background-color: #fff;
	margin: -15px 30px;
}

#dl .kj{
	width: 500px;
	height: 35px;
	/* border: 1px solid #00ff00; */
}
#dl .line_left{
	height:1px;
	width:20%;
	border-top:1px solid #54a0ff;
	float: left;
	margin: 2% 2% 0 14%;
}
#dl .line_right{
	height:1px;
	width:25%;
	border-top:1px solid #54a0ff;
	float: left;
	margin: 2% 0 0 2%;
}
#dl .kj .hr_left{
	margin-left: 90px;
}
#dl .kj p{
	height: 20px;
	color: #fff;
	float: left;
}

#dl .kj_ico{
	width: 500px;
}
#dl .kj_ico li{
	width: 50px;
	height: 50px;
	/*border: 1px solid #fff;*/
	float: left;
	margin: 0 6%;
}

注册：

regist.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="regist.css">
<script src="regist.js"></script>
</head>

<body>
    <div class="box">
        <h1>注册</h1>
        <form method="post" action="regist.php" οnsubmit="return check()">
            <li>用户名</li>
            <input class="username" type="text" name="username" placeholder="请输入用户名">
            <li>密码</li>
            <input class="password" type="password" name="password" placeholder="请输入密码">
            <li>确认密码</li>
            <input class="re_pass" type="password" name="re_pass" placeholder="请确认密码">
            <input class="" type="submit" name="sub" value="立即注册">
        </form>
        <p>已有账户？<a href="login.html">去登录</a></p>
    </div>
</body>
</html>

regist.js

//验证表单是否输入
function check(){
    var user = document.getElementsByClassName('username')[0].value;
    var pass = document.getElementsByClassName('password')[0].value;
    var re_pass = document.getElementsByClassName('re_pass')[0].value;
    if (user==null || user==""){
        document.getElementsByClassName('username')[0].setAttribute("placeholder","请输入用户名!!!");
        return false;
    }
    else if (pass==null || pass==""){
        document.getElementsByClassName('password')[0].setAttribute("placeholder","请输入密码!!!");
        return false;
    }
    else if (re_pass==null || re_pass==""){
        document.getElementsByClassName('re_pass')[0].setAttribute("placeholder","请确认密码!!!");
        return false;
    }
    else if (pass != re_pass){
        alert("两次输入的密码不相同！！！");
        return false;
    }
}

regist.php

<?php
$username = $_POST['username'];
$password = $_POST['password'];
$re_pass = $_POST['re_pass'];
if($password == $re_pass){
    $conn =mysqli_connect('localhost','root','yuxu2000908','myuser');
    if (!$conn){
        echo '数据库连接失败！';
        exit(0);
    }else {
        $sql = "select name from users where login = '$username'";
        $result = mysqli_query($conn,$sql);
        $number = mysqli_num_rows($result);
        if ($number) {
            echo '<script>alert("用户名已经存在");history.go(-1);</script>';
        } else {
            $sql_insert = "insert into user (name,password) values('$username','$password')";
            $res_insert = mysqli_query($conn,$sql_insert);
            if ($res_insert) {
                echo "<script>alert('注册成功！');</script>";
                echo "<script>location.href = 'login.html';</script>";
            } else {
                echo "<script>alert('注册失败！');history.go(-1);</script>";
            }
        }
    }
}else{
    echo "<script>alert('提交未成功！'); history.go(-1);</script>";
}
?>

regist.css

*{
	padding: 0;
	margin: 0;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
}
body {
	margin:0;
	padding:0;
	background:#eee;
}
.box {
	width:500px;
	height: 500px;
	margin: 120px auto;
	background:#fff;
	text-align:center;
}
.box a {
	color: #00eeee;
}
.box a:link {
	color: #00eeee;
}
/* .box a:visited {
	color: #2ecc71;
} */
.box a:hover {
	color: #00ff00;
}
.box a:active {
	color: #000;
}
.box h1 {
	color:#000;
	text-transform:uppercase;
}
.box .center_ul {
	margin: 0 auto;
}
.box li {
    width: 100px;
    height: 40px;
    margin: 0 0 0 20px;
    color:#000;
    line-height: 40px;
	float: left;
}
.box input[type = "text"],.box input[type = "password"] {
	background:none;
	display:block;
	margin:20px;
	text-align:center;
	border:2px solid #3498db;
	padding:10px;
	width:250px;
	outline:none;
	color:#000;
	border-radius:24px;
	transition:0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus {
	width:300px;
	border-color:#2ecc71;
}
.box input[type = "submit"] {
	background:none;
	display:block;
	margin:20px auto;
	text-align:center;
	border:2px solid #2ecc71;
	padding:14px 40px;
	outline:none;
	color:#000;
	border-radius:24px;
	transition:0.25s;
	cursor:pointer;
}
.box input[type = "submit"]:hover {
	background:#2ecc71;
}

home.html

登录成功就会跳转到主界面，这是自己定义的，就不贴代码了

<html>
  <head>

  </head>

  <body>
  你好
  </body>
</html>

PHP MySQLi 函数

下面是一些常用函数，只有了解了函数的基本功能，才能更好的进行操作。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述

用法请参考
https://www.runoob.com/php/php-ref-mysqli.html

猜你喜欢

转载自blog.csdn.net/weixin_45468845/article/details/106358204
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022