使用phpstudy搭建本地网站，编写一个简单HTML前端页面，实现：登录，注册，忘记密码，用户信息记录在MySQL中。登录后跳转到个人信息页面，要求显示登录用户名。有头像上传功能，上传成功后显示头像。
首先，我们要下载phpstudy（官网上下载即可）并打开Apache和MySQL。
注意：如果你已经在电脑上装了MySQL，是无法打开phpstudy上的MySQL的。此时，你需要按win+R打开服务框，输入services.msc。打开服务界面。找到你的MySQL，停止该服务。
然后，你就可以正常打开phpstudy中的MySQL。
接着，打开phpstudy中的数据库工具phpMyAdmin。如果，你没下载的话，点击软件管理中的网站程序，第一个就是。
打开后，输入你所创数据库的名称与密码。
登录后是这个界面：
接下来开始创建数据库，新建数据库user，点击后新建数据表，依次输入要创建的内容。并创建两个用户。
接下来，开始写代码。
(注意：代码一定要放在php根目录www下。)
login.html
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<style>
body {
width: 300px;
margin: 0 auto;
padding: 20px;
}
input[type="text"],
input[type="password"],
input[type="email"] {
width: 100%;
margin-bottom: 10px;
}
input[type="submit"] {
padding: 10px;
width: 100%;
background: #428bca;
border: none;
color: #fff;
cursor: pointer;
}
.secondary-button {
background: #fff;
border: 1px solid #428bca;
color: #428bca;
}
</style>
</head>
<body>
<h2>用户登录</h2>
<form action="process.php" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="登录">
<p><a href="forgot_password.html">忘记密码</a></p>
<p>还没有账号？<a href="register.html">注册</a></p>
</form>
</body>
</html>
forgot_password.html
<!DOCTYPE html>
<html>
<head>
<title>重置密码</title>
<style>
body {
width: 300px;
margin: 0 auto;
padding: 20px;
}
input[type="email"] {
width: 100%;
margin-bottom: 10px;
}
input[type="submit"] {
padding: 10px;
width: 100%;
background: #428bca;
border: none;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<h2>重置密码</h2>
<form action="reset_password.php" method="post">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="重置密码">
<p>记起密码了？<a href="login.html">登录</a></p>
</form>
</body>
</html>
register.html
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<style>
body {
width: 300px;
margin: 0 auto;
padding: 20px;
}
input[type="text"],
input[type="password"],
input[type="email"] {
width: 100%;
margin-bottom: 10px;
}
input[type="submit"] {
padding: 10px;
width: 100%;
background: #428bca;
border: none;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<h2>用户注册</h2>
<form action="register.php" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<label for="confirm_password">确认密码：</label>
<input type="password" id="confirm_password" name="confirm_password" required>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="注册">
<p>已有账号？<a href="login.html">登录</a></p>
</form>
</body>
</html>
touxiang.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人信息页面</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 30px;
}
.profile-container {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.profile-image {
text-align: center;
margin-bottom: 30px;
}
.profile-image img {
width: 150px;
height: 150px;
border-radius: 50%;
}
.profile-form input {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 5px;
}
.profile-form button {
display: block;
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
.profile-form .error-message {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>个人信息页面</h1>
<div class="profile-container">
<div class="profile-image">
<img src="wallpaper.jpg" alt="头像">
</div>
<div class="profile-form">
<form id="upload-form" enctype="multipart/form-data">
<input type="file" id="avatar-input" name="avatar">
<button type="submit">上传头像</button>
<div id="error-message" class="error-message"></div>
</form>
</div>
</div>
<script>
const form = document.getElementById('upload-form');
const avatarInput = document.getElementById('avatar-input');
const errorMessage = document.getElementById('error-message');
form.addEventListener('submit', function(event) {
event.preventDefault();
const file = avatarInput.files[0];
if (file) {
// 实现头像上传逻辑，可以通过 AJAX 请求发送文件到服务器
// 在成功上传后，可以更新头像显示
} else {
errorMessage.textContent = '请选择要上传的头像文件';
}
});
</script>
</body>
</html>
upload.php
<?php
// 检查是否有上传文件
if(isset($_FILES["avatar"])){
$file = $_FILES["avatar"];
// 获取文件信息
$fileName = $file["name"];
$fileTmpName = $file["tmp_name"];
$fileSize = $file["size"];
$fileError = $file["error"];
// 检查文件是否上传成功
if($fileError === 0){
// 指定上传目录
$uploadDirectory = 'paper';
// 生成唯一的文件名
$newFileName = uniqid('', true) . '_' . $fileName;
// 拼接文件路径
$destination = $uploadDirectory . $newFileName;
// 将文件从临时目录移动到上传目录
if(move_uploaded_file($fileTmpName, $destination)){
// 文件移动成功，则将文件路径保存到数据库中
$dbHost = 'localhost';
$dbUsername = 'xiaowang';
$dbPassword = '123456';
// 建立数据库连接
$conn = mysqli_connect($dbHost, $dbUsername, $dbPassword);
if(!$conn){
die("数据库连接失败：" . mysqli_connect_error());
}
// 获取当前登录用户的用户名
// 这里假设你已经在登录过程中将用户名保存在了会话中
session_start();
$username = $_SESSION['username'];
// 更新数据库中的用户头像路径
$query = "UPDATE users SET avatar='$destination' WHERE username='$username'";
$result = mysqli_query($conn, $query);
if($result){
echo "头像上传成功！";
} else {
echo "头像上传失败：" . mysqli_error($conn);
}
// 关闭数据库连接
mysqli_close($conn);
} else{
echo "移动文件失败！";
}
} else {
echo "文件上传失败！";
}
}
?>
process.php
<?php
// 获取表单数据
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
// 建立数据库连接
$servername = "localhost";
$dbusername = "xiaowang";
$dbpassword = "123456";
$conn = new mysqli($servername, $dbusername, $dbpassword);
// 检查连接是否成功
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 处理登录请求
if (isset($_POST['login'])) {
// 根据用户名和密码从数据库中检查匹配的记录
$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = $conn->query($sql);
// 如果存在匹配的记录，将用户信息存储到会话中，并重定向到个人信息页面
if ($result->num_rows > 0) {
session_start();
$_SESSION['username'] = $username;
header("Location: touxiang.html");
exit;
} else {
echo "用户名或密码不正确";
}
}
// 处理注册请求
if (isset($_POST['register'])) {
// 将用户名、密码和邮箱信息插入到数据库中的「users」表中
$sql = "INSERT INTO users (username, password, email) VALUES ('$username', '$password', '$email')";
if ($conn->query($sql) === TRUE) {
echo "注册成功";
} else {
echo "注册失败: " . $conn->error;
}
}
// 处理忘记密码请求
if (isset($_POST['forgot_password'])) {
// 根据用户提交的邮箱在数据库中查找匹配的记录
$sql = "SELECT * FROM users WHERE email = '$email'";
$result = $conn->query($sql);
// 如果存在匹配的记录，发送重置密码链接至用户邮箱
if ($result->num_rows > 0) {
// 发送重置密码链接的代码
echo "重置密码链接已发送至您的邮箱";
} else {
echo "该邮箱未注册";
}
}
// 关闭数据库连接
$conn->close();
?>
login.php
<?php
// 获取表单数据
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
// 建立数据库连接
$servername = "localhost";
$dbusername = "xiaowang";
$dbpassword = "123456";
$conn = new mysqli($servername, $dbusername, $dbpassword);
// 检查连接是否成功
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 处理登录请求
if (isset($_POST['login'])) {
// 根据用户名和密码从数据库中检查匹配的记录
$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = $conn->query($sql);
// 如果存在匹配的记录，将用户信息存储到会话中，并重定向到个人信息页面
if ($result->num_rows > 0) {
session_start();
$_SESSION['username'] = $username;
header("Location: upload.php");
exit;
} else {
echo "用户名或密码不正确";
}
}
// 处理注册请求
if (isset($_POST['register'])) {
// 将用户名、密码和邮箱信息插入到数据库中的「users」表中
$sql = "INSERT INTO users (username, password, email) VALUES ('$username', '$password', '$email')";
if ($conn->query($sql) === TRUE) {
echo "注册成功";
} else {
echo "注册失败: " . $conn->error;
}
}
// 处理忘记密码请求
if (isset($_POST['forgot_password'])) {
// 根据用户提交的邮箱在数据库中查找匹配的记录
$sql = "SELECT * FROM users WHERE email = '$email'";
$result = $conn->query($sql);
// 如果存在匹配的记录，发送重置密码链接至用户邮箱
if ($result->num_rows > 0) {
// 发送重置密码链接的代码
echo "重置密码链接已发送至您的邮箱";
} else {
echo "该邮箱未注册";
}
}
// 关闭数据库连接
$conn->close();
?>
