前言
这是我在CSDN上的第一篇文章,有保存意义的同时,它也是我首次接触到PHP动态网页概念的文章,只可惜CSDN已经没md文件了,还好有浏览功能,我可以复刻出来,并且对以前写的不够好的地方进行重构。
HTML部分
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>php简单的登陆注册</title>
</head>
<body>
<div class="login-wrap">
<form action="./PHP/index.php" method="POST" target="frame">
<select id="mode" onchange="A(this)">
<option value="0">请选择登录/注册</option>
<option value="1">注册账号</option>
<option value="2">登录账号</option>
</select>
<input type="text" placeholder="请输入你的账号" autocomplete="off" maxlength="15" name="username">
<input type="password" placeholder="请输入你的密码" autocomplete="off" maxlength="15" name="password">
<input type="text" style="display: none" name="select" value="0" id="select">
<input type="submit" value="确认登录" class="sub"></input>
</form>
</div>
<!--JS部分-->
<script>
var mode = document.getElementById('mode');
mode.addEventListener("change", A(mode), false);
function A(num) {
var input = document.getElementById('select');
input.value = num.value;
}
</script>
<iframe name="frame" style="display:none"></iframe>
</body>
</html>
前端实现逻辑
首先多选标签是为了分别登陆注册的,但是当时没写好,应该在JS里面判断的,以前是直接写在了PHP里面,这样用户如果没填写也会发送请求,造成网络资源的浪费。
然后就是 <iframe name="frame" style="display:none"></iframe>
这段代码是利用iframe的特性来防止跳转请求的,类似Ajax的验证数据的作用,但注意,这不是Ajax!
PHP部分(分两个文件)
连接数据库文件
<?php
$con = mysqli_connect("localhost", "root", "123456789", "myusers");
//四个参数分别是主机名,数据库用户名,数据库密码,要连接的数据库名
if (!$con) {
echo"<script>alert(\"数据库连接失败\")</script>";
}
判断逻辑部分
<?php
require_once "connect.php";
$select = $_POST['select'];
$username = $_POST['username'];
$password = $_POST['password'];
if ($select == 0) {
echo "<script>alert(\"请选择你是要登录还是注册\")</script>";
} else if ($select == 1) {
$user = $con->query("select username from users where username ='{$username}'");
$row = mysqli_fetch_assoc($user);
if ($row > 0) {
echo "<script>alert(\"账号已经被抢先注册了\")</script>";
} elseif ($username == '' | $password == '') {
echo "<script>alert(\"账号或密码不能为空\")</script>";
} elseif (strlen($username) < 8) {
echo "<script>alert(\"账号不能太短噢 ~\")</script>";
} elseif (strlen($password) < 8) {
echo "<script>alert(\"密码最少8位数字/字母\")</script>";
} else {
$sql = "INSERT INTO users (username,password) VALUES ('$username','$password')";
if (mysqli_query($con, $sql)) {
echo "<script>alert(\"注册成功 : $username\")</script>";
} else {
echo "<script>alert(\"数据异常,请稍后再试\")</script>";
}
mysqli_close($con);
}
} else if ($select == 2) {
$sql = "select username,password from users where username='$username' AND password='$password'";
$user = $con->query("select username from users where username ='{$username}'");
$usernum = mysqli_fetch_assoc($user);
$result = mysqli_query($con, $sql);
$row = mysqli_num_rows($result);
if ($username == '' | $password == '') {
echo "<script>alert(\"账号或密码不能为空\")</script>";
} elseif ($usernum == 0) {
echo "<script>alert('此账号还未注册')</script>";
} elseif (!$row) {
echo "<script>alert('账号或密码错误')</script>";
} else {
echo "<script>alert('登录成功 : $username');window.open(\"../Project/core.html\",\"_top\");</script>";
};
}
PHP部分说明
因为历史原因,我把应该写在JS的部分脚本放进了PHP里,这是不合理的,然后就是数据库相关,因为是简易版本,所以我们只需要新建一个数据库myusers和一个数据表users字段我们选3个,id+username+password。id要设置索引(默认),即id自增。