03：代码优化

2024/8/1 13:32:45 avatar_7


我如果已经有script.js如下：
// script.js

....

我希望将目前下面的代码改为调用script.js中封装的方法来做，我该如何修改现在的代码？代码如下：
 <script>
        $(document).ready(function() {
            $('#registerForm').on('submit', function(event) {
                event.preventDefault();
                const username = $('#username').val();
                const email = $('#email').val();
                const password = $('#password').val();
                const role = $('#role').val();

                // 调用API进行用户注册
                $.ajax({
                    url: 'http://yourdomain.com/api/users',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        username: username,
                        email: email,
                        password: password,
                        role: role
                    }),
                    success: function() {
                        alert('Registration successful! Please login.');
                        window.location.href = 'login.html';
                    },
                    error: function() {
                        alert('Registration failed. Please try again.');
                    }
                });
            });
        });
    </script>

2024/8/1 13:32:45 gpt


x
要将你的代码改为调用 `script.js` 中封装的方法，你只需要在提交表单时调用 `script.js` 中的 `createUser` 方法即可。这样做的好处是你的 AJAX 请求逻辑被集中管理，代码更简洁、更易维护。

首先，确保在 HTML 文件中正确引入 `script.js`：

```html
<script src="path/to/script.js"></script>
```

然后，将你的代码进行如下修改：

<script>
            // 调用封装的 API 方法进行用户注册
            createUser({
                username: username,
                email: email,
                password: password,
                role: role
            }).then(function() {
                alert('Registration successful! Please login.');
                window.location.href = 'login.html';
            }).catch(function() {
                alert('Registration failed. Please try again.');
            });
</script>

2024/8/1 13:32:45 avatar_7


x
<script>
// 调用API进行用户登录
                $.ajax({
                    url: 'http://localhost/api/login.php',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        username: username,
                        password: password
                    }),
                    success: function(response) {
                        // 根据用户角色重定向到不同的主页
                        if (response.role === 'admin') {
                            window.location.href = 'admin_dashboard.html';
                        } else if (response.role === 'teacher') {
                            window.location.href = 'teacher_dashboard.html';
                        } else {
                            window.location.href = 'student_dashboard.html';
                        }
                    },
                    error: function() {
                        alert('Login failed. Please check your username and password.');
                    }
                });
</script>
同样的，请将上面的ajax的方法改为调用script.js里封装的方法。

2024/8/1 13:32:45 gpt


x
要将登录功能改为使用 `script.js` 中封装的方法，你首先需要在 `script.js` 中添加一个用于登录的函数。在 `script.js` 中添加以下代码：

```javascript
<script>
/**
 * 用户登录
 * @param {Object} credentials 用户凭证对象（包含用户名和密码）
 * @returns {Promise} 包含登录结果的 Promise 对象
 */
function loginUser(credentials) {
    return $.ajax({
        url: `${API_BASE_URL}/login.php`,
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(credentials)
    });
}
</script>
```

然后，在你的 HTML 文件中调用 `loginUser` 函数进行登录操作。以下是修改后的代码：

```html
<script>
    $(document).ready(function() {
        $('#loginForm').on('submit', function(event) {
            event.preventDefault();
            const username = $('#username').val();
            const password = $('#password').val();

            // 调用封装的 API 方法进行用户登录
            loginUser({
                username: username,
                password: password
            }).then(function(response) {
                // 根据用户角色重定向到不同的主页
                if (response.role === 'admin') {
                    window.location.href = 'admin_dashboard.html';
                } else if (response.role === 'teacher') {
                    window.location.href = 'teacher_dashboard.html';
                } else {
                    window.location.href = 'student_dashboard.html';
                }
            }).catch(function() {
                alert('Login failed. Please check your username and password.');
            });
        });
    });
</script>
```

确保在 HTML 文件中正确引入了 `script.js`：

```html
<script src="path/to/script.js"></script>
```

通过这种方式，你可以确保所有的 AJAX 请求逻辑都在 `script.js` 中管理，代码更简洁、更易维护。

2024/8/1 13:32:45 avatar_7


我似乎之前缺少login.php这个文件。请参考我已经存在的users.php文件编写login.php以实现完整功能。
users.php：
<?php
require_once 'init.php'; 


if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $data = json_decode(file_get_contents("php://input"));
    
    $query = "INSERT INTO users (username, password, email, role, avatar) VALUES (:username, :password, :email, :role, :avatar)";
    $stmt = $db->prepare($query);

    $stmt->bindParam(':username', $data->username);
    $stmt->bindParam(':password', $data->password);
    $stmt->bindParam(':email', $data->email);
    $stmt->bindParam(':role', $data->role);
    $stmt->bindParam(':avatar', $data->avatar);

    if($stmt->execute()) {
        http_response_code(201);
        echo json_encode(array("message" => "User was created."));
    } else {
        http_response_code(503);
        echo json_encode(array("message" => "Unable to create user."));
    }
} elseif ($_SERVER['REQUEST_METHOD'] == 'GET') {
    $query = "SELECT * FROM users";
    $stmt = $db->prepare($query);
    $stmt->execute();
    $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($users);
}

?>

2024/8/1 13:32:45 gpt


x
要创建一个用于处理用户登录的 `login.php` 文件，你可以参考 `users.php` 的结构，并对其进行修改以实现用户身份验证。下面是一个示例的 `login.php` 文件：

```php
<?php
require_once 'init.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $data = json_decode(file_get_contents("php://input"));
    $username = $data->username;
    $password = $data->password;

    // 查询用户信息
    $query = "SELECT id, username, password, role FROM users WHERE username = :username";
    $stmt = $db->prepare($query);
    $stmt->bindParam(':username', $username);
    $stmt->execute();
    $user = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($user) {
        // 验证密码（假设数据库中存储的是明文密码，建议使用哈希存储）
        if ($user['password'] === $password) {
            // 返回用户信息，包括角色
            echo json_encode(array(
                "message" => "Login successful.",
                "role" => $user['role']
            ));
        } else {
            http_response_code(401); // Unauthorized
            echo json_encode(array("message" => "Invalid password."));
        }
    } else {
        http_response_code(404); // Not Found
        echo json_encode(array("message" => "User not found."));
    }
} else {
    http_response_code(405); // Method Not Allowed
    echo json_encode(array("message" => "Method not allowed."));
}
?>
```

### 进一步改进
1. **密码哈希**：为了安全起见，建议使用哈希算法存储密码。可以使用 `password_hash` 和 `password_verify` 函数。
2. **响应格式**：如果需要返回更多用户信息，可以在响应中添加更多字段。

以下是改进后的版本，带有密码哈希验证：

```php
<?php
require_once 'init.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $data = json_decode(file_get_contents("php://input"));
    $username = $data->username;
    $password = $data->password;

    // 查询用户信息
    $query = "SELECT id, username, password, role FROM users WHERE username = :username";
    $stmt = $db->prepare($query);
    $stmt->bindParam(':username', $username);
    $stmt->execute();
    $user = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($user) {
        // 验证密码（假设数据库中存储的是哈希密码）
        if (password_verify($password, $user['password'])) {
            // 返回用户信息，包括角色
            echo json_encode(array(
                "message" => "Login successful.",
                "role" => $user['role']
            ));
        } else {
            http_response_code(401); // Unauthorized
            echo json_encode(array("message" => "Invalid password."));
        }
    } else {
        http_response_code(404); // Not Found
        echo json_encode(array("message" => "User not found."));
    }
} else {
    http_response_code(405); // Method Not Allowed
    echo json_encode(array("message" => "Method not allowed."));
}
?>
```

### 在 `script.js` 中添加登录函数
确保在 `script.js` 中已经添加了用于登录的函数：

```javascript
<script>
/**
 * 用户登录
 * @param {Object} credentials 用户凭证对象（包含用户名和密码）
 * @returns {Promise} 包含登录结果的 Promise 对象
 */
function loginUser(credentials) {
    return $.ajax({
        url: `${API_BASE_URL}/login.php`,
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(credentials)
    });
}
</script>
```

### 在 HTML 文件中调用登录函数
最后，确保在你的 HTML 文件中调用 `loginUser` 函数进行登录操作：

```html
<script>
    $(document).ready(function() {
        $('#loginForm').on('submit', function(event) {
            event.preventDefault();
            const username = $('#username').val();
            const password = $('#password').val();

            // 调用封装的 API 方法进行用户登录
            loginUser({
                username: username,
                password: password
            }).then(function(response) {
                // 根据用户角色重定向到不同的主页
                if (response.role === 'admin') {
                    window.location.href = 'admin_dashboard.html';
                } else if (response.role === 'teacher') {
                    window.location.href = 'teacher_dashboard.html';
                } else {
                    window.location.href = 'student_dashboard.html';
                }
            }).catch(function() {
                alert('Login failed. Please check your username and password.');
            });
        });
    });
</script>
```

通过这些步骤，你可以实现基于 AJAX 调用的用户登录功能，并确保代码更加模块化和易于维护。