首先，你需要在你的服务器上搭建好
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 进行数据交互等基本功能。
4657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
