html php mysql 前后端分离打造留言板

qq8460106

已于 2024-01-11 00:58:43 修改

阅读量640

点赞数 12

文章标签： php mysql 开发语言

于 2024-01-11 00:55:48 首次发布

本文链接：https://blog.csdn.net/qq8460106/article/details/135516249

版权

创建一个简单的留言板涉及到前端（HTML + JavaScript）、后端（PHP）、以及数据库（MySQL）的交互。以下是一个基本的前后端分离的留言板实例：

1. 数据库设计：

首先，你需要在MySQL中创建一个用于存储留言的表。以下是一个简单的留言表结构：

CREATE TABLE messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(255) NOT NULL,
    message TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. 后端（PHP）：

config.php - 配置数据库连接：

<?php
$servername = "your_servername";
$username = "your_username";
$password = "your_password";
$dbname = "your_dbname";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

api.php - 处理前端请求：

<?php
include 'config.php';

header('Content-Type: application/json');

if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    // 获取留言列表
    $result = $conn->query("SELECT * FROM messages ORDER BY created_at DESC");
    $messages = [];
    while ($row = $result->fetch_assoc()) {
        $messages[] = $row;
    }
    echo json_encode($messages);
} elseif ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 添加留言
    $data = json_decode(file_get_contents('php://input'), true);
    $username = $conn->real_escape_string($data['username']);
    $message = $conn->real_escape_string($data['message']);

    $sql = "INSERT INTO messages (username, message) VALUES ('$username', '$message')";
    $conn->query($sql);
    echo json_encode(['message' => '留言已添加']);
}

$conn->close();
?>

3. 前端（HTML + JavaScript）：

index.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>
<body>
    <h1>留言板</h1>
    
    <div>
        <h2>发表留言</h2>
        <form id="messageForm">
            <label for="username">用户名：</label>
            <input type="text" id="username" required>
            <br>
            <label for="message">留言内容：</label>
            <textarea id="message" rows="4" required></textarea>
            <br>
            <button type="submit">发表留言</button>
        </form>
    </div>

    <div>
        <h2>留言列表</h2>
        <ul id="messageList"></ul>
    </div>

    <script>
        const messageForm = document.getElementById('messageForm');
        const messageList = document.getElementById('messageList');

        // 获取留言列表
        function getMessages() {
            fetch('api.php')
                .then(response => response.json())
                .then(messages => {
                    messageList.innerHTML = messages.map(message => `<li>${message.username}: ${message.message}</li>`).join('');
                });
        }

        // 提交留言
        messageForm.addEventListener('submit', function (e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const message = document.getElementById('message').value;

            fetch('api.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ username, message }),
            })
                .then(response => response.json())
                .then(data => {
                    console.log(data.message);
                    getMessages(); // 刷新留言列表
                });
        });

        // 初始化页面时获取留言列表
        getMessages();
    </script>
</body>
</html>