超级简单的php+mysql留言本源码

我来说一下“超级简单的php+mysql留言本源码”的完整攻略吧。

环境准备

首先，你需要有一台安装有 Apache 服务器、MySQL 数据库以及 PHP 的电脑，或者使用各种云服务器也可以。我在这里使用的是 XAMPP 工具，它可以快速建立 PHP 开发环境，可以在 XAMPP官网下载安装。

安装数据库

接下来需要安装数据库，打开 phpMyAdmin 界面，新建一个名为 guestbook 的数据库。

编写代码

创建留言表

在新建数据库后，需要创建一个留言表 tbl_message，代码如下：

CREATE TABLE tbl_message (
    `id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `username` varchar(50) NOT NULL,
    `title` varchar(100) NOT NULL,
    `content` text NOT NULL,
    `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

编写前端界面

接下来，我将使用 Bootstrap 来美化界面。在 Bootstrap 官方网站上下载 Bootstrap 的 css 和 js 文件，将它们保存到你的项目中，然后创建一个 index.html 文件。在这个文件中编写前台页面的 HTML 和 JavaScript 代码。

下面是一个简单的前台页面的示例，其中包含了留言列表和留言表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言本</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <h2>留言列表</h2>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>标题</th>
                <th>内容</th>
                <th>发布时间</th>
            </tr>
        </thead>
        <tbody id="messageList">
        </tbody>
    </table>

    <hr>

    <h2>添加留言</h2>
    <form id="messageForm">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="title">标题</label>
            <input type="text" class="form-control" id="title" placeholder="请输入标题">
        </div>
        <div class="form-group">
            <label for="content">内容</label>
            <textarea class="form-control" id="content" placeholder="请输入内容"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>

    <script>
        $(document).ready(function () {
            // 发送 ajax 请求，获取留言列表
            $.get('./get_messages.php', function (res) {
                var data = JSON.parse(res);
                if (data.code === 200) {
                    var messages = data.data;
                    for (var i = 0; i < messages.length; i++) {
                        var message = messages[i];
                        var html = '<tr>' +
                            '<td>' + message.id + '</td>' +
                            '<td>' + message.username + '</td>' +
                            '<td>' + message.title + '</td>' +
                            '<td>' + message.content + '</td>' +
                            '<td>' + message.create_time + '</td>' +
                            '</tr>';
                        $('#messageList').append(html);
                    }
                } else {
                    alert(data.msg);
                }
            });

            // 监听表单提交事件
            $('#messageForm').on('submit', function (e) {
                e.preventDefault();
                var username = $('#username').val();
                var title = $('#title').val();
                var content = $('#content').val();
                $.post('./add_message.php', {
                    username: username,
                    title: title,
                    content: content
                }, function (res) {
                    var data = JSON.parse(res);
                    if (data.code === 200) {
                        window.location.reload();
                    } else {
                        alert(data.msg);
                    }
                });
            });
        });
    </script>
</body>
</html>

编写后端接口

最后，需要编写 PHP 后端接口代码。这里我们需要编写两个接口：

get_messages.php

这个接口用于获取留言列表，代码如下：

<?php
header('Content-type: application/json');

try {
    // 连接数据库
    $dbh = new PDO('mysql:host=localhost;dbname=guestbook', 'root', '');
    $dbh->exec('set names utf8mb4');

    // 执行查询
    $stmt = $dbh->prepare('SELECT id, username, title, content, create_time FROM tbl_message ORDER BY create_time DESC');
    $stmt->execute();
    $messages = $stmt->fetchAll(PDO::FETCH_ASSOC);

    // 返回数据
    echo json_encode([
        'code' => 200,
        'msg' => '查询成功',
        'data' => $messages
    ]);
} catch (PDOException $e) {
    // 捕获异常
    echo json_encode([
        'code' => 500,
        'msg' => '查询失败: '.$e->getMessage()
    ]);
}

add_message.php

这个接口用于添加留言，代码如下：

<?php
header('Content-type: application/json');

// 获取用户提交的数据
$username = $_POST['username'];
$title = $_POST['title'];
$content = $_POST['content'];

try {
    // 连接数据库
    $dbh = new PDO('mysql:host=localhost;dbname=guestbook', 'root', '');
    $dbh->exec('set names utf8mb4');

    // 插入数据
    $stmt = $dbh->prepare('INSERT INTO tbl_message (username, title, content) VALUES (?, ?, ?)');
    $stmt->bindParam(1, $username);
    $stmt->bindParam(2, $title);
    $stmt->bindParam(3, $content);
    $stmt->execute();

    // 返回数据
    echo json_encode([
        'code' => 200,
        'msg' => '留言成功'
    ]);
} catch (PDOException $e) {
    // 捕获异常
    echo json_encode([
        'code' => 500,
        'msg' => '留言失败: '.$e->getMessage()
    ]);
}