用PHP写一个登录注册页面,要有用户展示页面,能连接数据库,有退出登录功能以及要用到Ajax
时间: 2023-06-25 10:07:51 浏览: 79
首先,你需要在你的服务器上搭建好 PHP 环境和数据库服务。接下来,我们可以分为以下几个步骤来实现登录注册页面:
1. 创建数据库和表格
我们可以使用 MySQL 数据库,并创建一个名为 `users` 的表格,用于存储用户的信息,包括 id、username、password 等字段。
```sql
CREATE TABLE users (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
password VARCHAR(50) NOT NULL
);
```
2. 创建 HTML 页面
我们可以创建一个 `index.php` 页面作为入口,其中包括登录和注册表单,以及用户展示页面。
```html
<!DOCTYPE html>
<html>
<head>
<title>Login / Register</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Login / Register</h1>
<!-- 登录表单 -->
<form id="login-form">
<h2>Login</h2>
<label>Username</label>
<input type="text" name="username">
<label>Password</label>
<input type="password" name="password">
<button type="submit">Login</button>
</form>
<!-- 注册表单 -->
<form id="register-form">
<h2>Register</h2>
<label>Username</label>
<input type="text" name="username">
<label>Password</label>
<input type="password" name="password">
<button type="submit">Register</button>
</form>
<!-- 用户展示页面 -->
<div id="user-list">
<h2>User List</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Username</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!-- 退出登录按钮 -->
<button id="logout-button">Logout</button>
</body>
</html>
```
其中,我们引入了 jQuery 库和 `script.js` 脚本文件,用于实现 Ajax 功能。
3. 创建 PHP 后端接口
我们可以创建一个 `api.php` 文件,用于处理登录、注册、获取用户列表等后端接口。
```php
<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 处理登录请求
if ($_POST["action"] == "login") {
$username = $_POST["username"];
$password = $_POST["password"];
$sql = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
session_start();
$_SESSION["user_id"] = $row["id"];
echo "success";
} else {
echo "fail";
}
}
// 处理注册请求
if ($_POST["action"] == "register") {
$username = $_POST["username"];
$password = $_POST["password"];
$sql = "INSERT INTO users (username, password) VALUES ('$username', '$password')";
if ($conn->query($sql) === TRUE) {
echo "success";
} else {
echo "fail";
}
}
// 处理获取用户列表请求
if ($_POST["action"] == "get_users") {
$sql = "SELECT id, username FROM users";
$result = $conn->query($sql);
$data = array();
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode($data);
}
// 处理退出登录请求
if ($_POST["action"] == "logout") {
session_start();
session_destroy();
echo "success";
}
$conn->close();
?>
```
其中,我们使用了 PHP 的 `mysqli` 扩展来连接数据库,并使用 `$_POST` 变量来获取 Ajax 请求中的数据。
4. 创建 JavaScript 脚本
我们可以创建一个 `script.js` 脚本文件,用于实现 Ajax 功能,以及与 HTML 页面交互。
```javascript
$(function() {
// 处理登录表单提交
$("#login-form").submit(function(event) {
event.preventDefault();
var username = $(this).find("input[name='username']").val();
var password = $(this).find("input[name='password']").val();
$.post("api.php", {
action: "login",
username: username,
password: password
}, function(data) {
if (data == "success") {
location.reload();
} else {
alert("Login failed.");
}
});
});
// 处理注册表单提交
$("#register-form").submit(function(event) {
event.preventDefault();
var username = $(this).find("input[name='username']").val();
var password = $(this).find("input[name='password']").val();
$.post("api.php", {
action: "register",
username: username,
password: password
}, function(data) {
if (data == "success") {
alert("Register success.");
} else {
alert("Register failed.");
}
});
});
// 获取用户列表并展示
$.post("api.php", {
action: "get_users"
}, function(data) {
var users = JSON.parse(data);
var tbody = $("#user-list tbody");
for (var i = 0; i < users.length; i++) {
var user = users[i];
var tr = $("<tr></tr>");
tr.append($("<td></td>").text(user.id));
tr.append($("<td></td>").text(user.username));
tbody.append(tr);
}
});
// 处理退出登录按钮点击
$("#logout-button").click(function() {
$.post("api.php", {
action: "logout"
}, function(data) {
if (data == "success") {
location.reload();
} else {
alert("Logout failed.");
}
});
});
});
```
其中,我们使用了 jQuery 库的 `$` 函数来简化 DOM 操作和 Ajax 请求。在页面加载完成后,我们会自动获取用户列表并展示在页面上。
5. 测试页面
最后,我们可以在浏览器中访问 `index.php` 页面,进行登录和注册操作,并查看用户列表功能。当我们点击退出登录按钮时,会清除当前用户的会话信息,实现退出登录功能。
以上就是一个简单的登录注册页面的实现过程,包括了连接数据库、使用 Ajax 进行数据交互等基本功能。