目录
版本说明
v3实现功能：
数据库连接（php）
用户登录（*前后端判断输入是否为空（弹窗））
欢迎页面（*欢迎用户）
用户注册（*前后端判断输入是否为空（弹窗））
欢迎页面（*欢迎用户）
用户密码修改
实现环境：
Windows11、Apache、MySQL、PHP8
流程逻辑框图：
数据库连接
外部文件，使用文件包含：include 'session_conn.php';
(以下代码都是)
登录页面：login.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<style type="text/css">
form{
position: absolute;
top: 20%;
left: 39%;
}
/* 控制input:name=login的元素居中 */
input[ name='login' ]{
width: 172px;
display: block;
margin-left: 28%;
margin-top: 3%;
}
input[ name='register' ]{
width: 173px;
display: block;
margin-left: 28%;
margin-top: 3%;
}
</style>
<script type="text/javascript" src="./_js/login_web.js"></script>
</head>
<body>
<form onsubmit="return checkForm(this)" action="./_php/doLogin.php" method="post" >
<fieldset>
<legend>
用户登录-php登录与注册系统测试
</legend>
<ul>
<li>
<label>
用户名：
</label>
<input type="text" name="username" />
</li>
<li>
<label>密 码：</label>
<input type="password" name="password" />
</li>
<label></label>
onclick="checkForm(form)" /> -->
<input type="submit" name="login" value="登录" />
onclick="redirectToPage()" /> -->
<input type="button" name="register" value="注册" onclick="redirectTopage()" />
</ul>
</fieldset>
</form>
</body>
</html>login_web.js：
引入利用js阻断登录框空输入的判断:
javascript
function checkForm(form) {
// 表单.文本域名.value
if (form.username.value == "" || form.username.value == null) {
alert("用户名不能为空");
form.username.focus();
return false;
}
else if (form.password.value == "" || form.password.value == null) {
alert("密码不能为空");
form.password.focus();
return false;
}
else {
return true;
}
}
function redirectTopage() {
window.location.href = './register.html';
}登录处理实现：doLogin.php
php
<?php
include './session_conn.php';
session_start();
// $username = htmlspecialchars($_POST['username']);
$username = $_POST['username'];
$password = md5($_POST['password']);
// $conn = mysqli_connect($host, $db_username, $db_pwd, $db_name);
if (!$conn) {
// 判断数据库连接状态
// die()，输出一条信息，然后退出脚本.
die('连接数据库失败！请检查数据库是否开启' . mysqli_connect_errno());
} else {
if(isset($username) && !empty($username)) {
if (isset($_POST['password']) && !empty($_POST['password'])) {
$Logincheck_query = mysqli_query($conn, "select * from login_user where username = '$username' limit 1");
// 从查询结果中取得一行作为结果集
// $arr = mysqli_fetch_assoc($Logincheck_query);
$arr = mysqli_fetch_assoc(mysqli_query($conn, "select * from login_user where username = '$username' limit 1"));
if ($password == $arr['password']) {
$_SESSION['username'] = $arr['username'];
$_SESSION['id'] = $arr['id'];
echo "<script language = 'javascript'> alert('登录成功！');location = './welcome.php' </script>";
return true;
} else {
echo "<script language = 'javascript'> alert('密码错误');location = '../login.html' </script>";
return false;
}
} else {
echo "<script language = 'javascript'> alert('请补全登录信息');location = '../login.html' </script>";
return false;
}
} else {
echo "<script language='javascript'>alert('请完善账户信息！');location='../login.html'</script>";
return false;
}
}用户欢迎页面：welcome.php
php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>welcome</title>
<style>
.table{
text-align: center;
width: 70%;
padding: 15px;
background-color: skyblue;
border: 5px solid green;
border-collapse: collapse;
margin-left: 17%;
}
input[type='button']{
margin-left: 50%;
}
.change_password{
margin-left: 70%;
}
</style>
<script>
function redirectToPage(){
window.location.href = "../htdocs/login.html";
}
</script>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/>
<?php
include "./session_conn.php"; //数据库连接信息引入
session_start();
$user_id = $_SESSION['id'];
if (empty($user_id)) {
echo "<script language='javascript'> alert('请先登录');location='../login.html'</script>";
exit;
} else {
$username = $_SESSION['username'];
// $conn = mysqli_connect('$host','$db_username','$db_pwd','$db_name');
if (!$conn) {
die('数据库连接失败！请检查数据库是否开启？'. mysqli_connect_error());
}
else {
if (isset($_SESSION['username']) && !empty($_SESSION['username']) ) {
echo "<h2 class='table'>登录成功，欢迎用户：$username </h2> ";
echo "<a class = 'change_password' href = '../change_password.html'/>修改密码</a>";
} else {
// $_SESSION['username'] =false;
die("超时，重新登录");
}
}
echo "<input type='button' name='back_login' value='返回登录' onclick='redirectToPage()'/>";
echo "<a href='close_login.php'/>用户注销</a>";
}
?>
</body>
</html>密码修改页面：change_password.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>账户修改</title>
<style type="text/css">
.title {
text-align: center;
}
.change_password{
text-align: center;
}
</style>
<script type="text/javascript" src="./_js/change_password.js"></script>
</head>
<body>
<div class="box">
<div class="title">
change your password
</div>
<!-- <form onsubmit="return check(this)" action="doChangePassword.php" method="post"> -->
<form action="./_php/doChangePassword.php" method="post">
<table class="change_password">
<tr>
<th>
当前用户名：
</th>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<th>
原密码：
</th>
<td>
<input type="password" name="OldPassword">
</td>
</tr>
<tr>
<th>
新密码：
</th>
<td>
<input type="password" name="NewPassword" />
</td>
</tr>
<tr>
<th>
确认密码：
</th>
<td>
<input type="password" name="ConfirmNewPassword" />
</td>
</tr>
</table>
<input type="submit" name="confirm" value="确认修改" />
<input type="button" name="back" value="返回登录" onclick="redirectTopage()">
</form>
</div>
</body>
</html>change_password.js
引入利用js阻断空输入的判断:
javascript
function redirectTopage() {
window.location.href = '../htdocs/login.html';
}
function check() {
// if (form.OldPassword.value === "" && form.OldPassword.value === null && form.OldPassword.value === undefined) {
if (form.OldPassword.value == "" && form.OldPassword.value == null) {
alert("原密码为空");
form.OldPassword.focus();
return false;
} else {
// if (form.NewPassword.value === "" && form.NewPassword.value === null && form.NewPassword.value === undefined) {
if (form.NewPassword.value == "" && form.NewPassword.value == null) {
alert("输入新密码");
form.NewPassword.focus();
return false;
}
else {
// if (form.ConfirmNewPassword.value === "" && form.ConfirmeNewPassword.value === null && form.ConfirmNewPassword.value === undefined) {
if (form.ConfirmNewPassword.value == "" && form.ConfirmeNewPassword.value == null) {
alert("请确认密码");
form.ConfirmNewPassword.focus();
return false;
} else {
return true;
}
}
}
}
function redirectTopage(){
window.location.href = './login.html';
}修改处理：doChangePassword.php
php
<?php
include("session_conn.php");
$change_password = [];
$change_password["old_password"] = md5($_POST["OldPassword"]);
$change_password["Newpassword"] = md5($_POST["NewPassword"]);
$change_password["confirm_Newpassword"] = md5($_POST["ConfirmNewPassword"]);
$MD5_NewPassword = $change_password["Newpassword"];
if (!$conn) {
die('数据库连接失败！' . mysqli_connect_errno());
} else {
if (isset($_POST["OldPassword"]) && (strlen($_POST["OldPassword"]) != 0)) {
if (isset($_POST["NewPassword"]) && (strlen($_POST["NewPassword"]) != 0)) {
if (isset($_POST["ConfirmNewPassword"]) && (strlen($_POST["ConfirmNewPassword"]) != 0)) {
if ($change_password["confirm_Newpassword"] == $change_password["Newpassword"]) {
// $MD5_NewPassword = $change_password["Newpassword"];
$username = $_POST['username'];
$sql_update = "update login_user set password = '$MD5_NewPassword' where username = '$username' ";
if (mysqli_query($conn, $sql_update)) {
echo "<script language='javascript'>alert('修改成功，请重新登录！');location='../login.html'</script>";
return true;
} else {
echo "<script language='javascript'>alert('密码修改失败，请重新修改！');location='../change_password.html'</script>";
return false;
}
} else {
echo "<script language='javascript'>alert('密码确认错误');location='../change_password.html'</script>";
return false;
}
} else {
echo "<script language='javascript'>alert('请确认密码！');location = '../change_password.html'</script>";
return false;
}
} else {
echo "<script language='javascript'>alert('请输入新密码!');location='../change_password.html'</script>";
return false;
}
} else {
echo "<script language='javascript'>alert('请输入原密码信息！');location='../change_password.html'</script>";
return false;
}
}用户注册页面：register.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
</head>
<style type="text/css">
.title {
/* 文本排列到中央 */
text-align: center;
/* 行间距 */
/* line-height: 80%; */
margin-top: 6%;
margin-left: 8%;
}
.login {
display: block;
position: absolute;
transform: translate(-50%, -61.8%);
left: 56%;
top: 20%;
width: 450px;
border: redius 8px;
;
background: rgba(255, 255, 255, 0.9);
}
input[type='submit'] {
width: 173px;
display: block;
margin-left: 0%;
margin-top: 3%;
}
input[type='button'] {
width: 173px;
display: block;
margin-left: 0%;
margin-top: 3%;
}
</style>
<script type="text/javascript" src="./_js/register_web.js"></script>
<body>
<div class='box'>
<div class='title'>new user register</div>
<form onsubmit="return checkRegister(this)" action="./_php/doRegister.php" method="post" >
<table class="login">
<tr>
<th>
用户名：
</th>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<th>
密码：
</th>
<td>
<input type="password" name="password" >
</td>
</tr>
<tr>
<th>
确认密码：
</th>
<td>
<input type="password" name="repassword" >
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="submit" value="注册完成" />
</td>
<td>
<input type="button" value="返回登陆" onclick=" redirectTopage() " />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>register_web.js
注册引导
javascript
function checkRegister(form) {
if (form.username.value == "" || form.username.value == null) {
alert("！请建立新用户名");
form.username.focus();
return false;
} else {
if (form.password.value == "" || form.password.value == null) {
alert("！需要输入注册密码");
form.password.focus();
return false;
} else {
if (form.repassword.value == "" | form.repassword.value == null) {
alert("！需要确认密码");
form.repassword.focus();
return false;
} else {
if (form.password.value == form.repassword.value) {
return true;
} else {
alert("！确认密码不一致");
form.repassword.focus();
}
}
}
}
}
function redirectTopage(){
window.location.href = './login.html';
}注册处理：doRegister.php
php
<?php
include 'session_conn.php';
$data = [];
// $data['$username'] = htmlspecialchars($_POST['username']);
// $data['$username'] = $_POST['username'];
// $username = $data['username'];
$username = $_POST['username'];
$data['password'] = md5($_POST['password']);
$data['repassword'] = md5($_POST['repassword']);
$sql_select = "select * from login_user where username = '$username' limit 1;";
$sql_id = "select id from login_user";
$result_select = mysqli_query($conn, $sql_select);
if (mysqli_num_rows($result_select) != 0) {
echo "<script language='javascript'>alert('该用户已存在，请更换用户名！');location='../register.html'</script>";
//释放查询结果
mysqli_free_result($result_select);
} else {
// 先判断是否存在，再判断是否为空
if (!empty($data['password']) && !empty($data['repassword'])) {
if ($data['repassword'] == $data['password']) {
$password = $data['repassword'];
// $result_sql_id = mysqli_query($conn, $sql_id);
$result_id = mysqli_num_rows(mysqli_query($conn, $sql_id));
$result_new_id = $result_id + 1;
$sql_insert = "insert into login_user(id,username,password) values('$result_new_id','$username','$password')";
if (mysqli_query($conn, $sql_insert)) {
echo "<script language='javascript'>alert('注册成功请重新登录!');location = '../login.html'</script>";
mysqli_refresh($conn,MYSQLI_REFRESH_TABLES);
mysqli_close($conn);
return true;
} else {
echo "<script language='javascript'>alert('注册失败请重新注册！');location='../register.html'</script>";
return false;
}
} else {
echo "<script language='javascript'>alert('确认密码错误！');location='../register.html'</script>";
return false;
}
} else {
echo "<script language='javascript'>alert('请完善密码。');location='../register.html'</script>";
return false;
}
}