正文

Java中留言系统实现详解：从数据库设计到前端展示，一步步教你搭建留言墙

/0 浏览量
0427

在互联网时代，留言系统是网站和应用程序中常见的一个功能。它不仅能够让用户之间进行交流，还能增加用户粘性。本文将详细讲解如何使用Java技术栈实现一个留言系统，包括数据库设计、后端逻辑处理以及前端展示。

数据库设计

数据库是留言系统的基石，我们需要设计一个合理的数据库结构来存储留言信息。

数据库表结构

  1. users：存储用户信息，包括用户ID、用户名、密码、邮箱等。

    CREATE TABLE users (
   user_id INT AUTO_INCREMENT PRIMARY KEY,
   username VARCHAR(50) NOT NULL,
   password VARCHAR(50) NOT NULL,
   email VARCHAR(100)
);

  2. messages：存储留言信息，包括留言ID、用户ID、留言内容、留言时间等。

    CREATE TABLE messages (
   message_id INT AUTO_INCREMENT PRIMARY KEY,
   user_id INT NOT NULL,
   content TEXT NOT NULL,
   message_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
   FOREIGN KEY (user_id) REFERENCES users(user_id)
);

后端逻辑处理

后端负责处理前端的请求，包括留言的增删改查操作。

1. 创建留言

public String createMessage(int userId, String content) {
    // 连接数据库
    Connection connection = DriverManager.getConnection(url, username, password);
    // 创建SQL语句
    String sql = "INSERT INTO messages (user_id, content) VALUES (?, ?)";
    // 创建PreparedStatement
    PreparedStatement statement = connection.prepareStatement(sql);
    statement.setInt(1, userId);
    statement.setString(2, content);
    // 执行插入操作
    int result = statement.executeUpdate();
    // 关闭资源
    statement.close();
    connection.close();
    // 返回操作结果
    if (result > 0) {
        return "留言成功";
    } else {
        return "留言失败";
    }
}

2. 查询留言

public List<Message> queryMessages() {
    List<Message> messages = new ArrayList<>();
    // 连接数据库
    Connection connection = DriverManager.getConnection(url, username, password);
    // 创建SQL语句
    String sql = "SELECT * FROM messages";
    // 创建Statement
    Statement statement = connection.createStatement();
    // 执行查询操作
    ResultSet resultSet = statement.executeQuery(sql);
    // 遍历结果集
    while (resultSet.next()) {
        Message message = new Message();
        message.setId(resultSet.getInt("message_id"));
        message.setUserId(resultSet.getInt("user_id"));
        message.setContent(resultSet.getString("content"));
        message.setMessageTime(resultSet.getTimestamp("message_time"));
        messages.add(message);
    }
    // 关闭资源
    resultSet.close();
    statement.close();
    connection.close();
    return messages;
}

3. 删除留言

public String deleteMessage(int messageId) {
    // 连接数据库
    Connection connection = DriverManager.getConnection(url, username, password);
    // 创建SQL语句
    String sql = "DELETE FROM messages WHERE message_id = ?";
    // 创建PreparedStatement
    PreparedStatement statement = connection.prepareStatement(sql);
    statement.setInt(1, messageId);
    // 执行删除操作
    int result = statement.executeUpdate();
    // 关闭资源
    statement.close();
    connection.close();
    // 返回操作结果
    if (result > 0) {
        return "删除成功";
    } else {
        return "删除失败";
    }
}

前端展示

前端负责将后端处理好的数据展示给用户。

1. HTML页面

<!DOCTYPE html>
<html>
<head>
    <title>留言墙</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <h1>留言墙</h1>
    <div id="message-list">
        <!-- 留言列表 -->
    </div>
    <div>
        <input type="text" id="username" placeholder="请输入用户名">
        <input type="text" id="password" placeholder="请输入密码">
        <button onclick="login()">登录</button>
    </div>
    <div>
        <textarea id="content" placeholder="请输入留言内容"></textarea>
        <button onclick="createMessage()">发表留言</button>
    </div>
    <script>
        // 查询留言列表
        function queryMessages() {
            $.ajax({
                url: '/messages',
                type: 'GET',
                success: function (data) {
                    var messageList = $('#message-list');
                    messageList.empty();
                    data.forEach(function (message) {
                        var messageElement = $('<div></div>');
                        messageElement.append($('<h3></h3>').text(message.username));
                        messageElement.append($('<p></p>').text(message.content));
                        messageElement.append($('<span></span>').text(message.messageTime));
                        messageList.append(messageElement);
                    });
                }
            });
        }
        // 登录
        function login() {
            // 登录逻辑
        }
        // 创建留言
        function createMessage() {
            // 创建留言逻辑
        }
    </script>
</body>
</html>

2. CSS样式

#message-list {
    margin-top: 20px;
}
.message {
    margin-bottom: 10px;
}

总结

通过以上步骤，我们已经成功搭建了一个基于Java的留言系统。在实际开发过程中，我们还可以添加更多功能，如留言回复、点赞、评论等。希望本文能对你有所帮助。

-- 展开阅读全文 --