简易留言板 - 技术栈

前端实现

数据库的使用

创建数据表

创建项目

留言板是一个常见的功能，在本篇文章中，将实现一个简易的留言板：

页面中能够显示所有留言内容，当点击发布留言后，内容会在下方空白处进行显示

前端实现

在这里，使用的是 HTML、CSS 和 JavaScript 实现：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易留言板</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <style>
        .container {
            margin: 20px;
        }

        .submit {
            width: 150px;
            height: 40px;
            background-color: #ffb3a7;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>简易留言板</h1>
        <form id="messageForm">
            <label for="author">作者：</label>
            <input type="text" id="author" required><br>
            <label for="content">内容：</label><br>
            <textarea id="content" rows="4" cols="50" required></textarea><br>
            <button type="submit" class="submit">发布留言</button>
        </form>
    </div>
    
    <script>
        // 监听表单提交事件
        $('#messageForm').submit(function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            var author = $('#author').val();
            var content = $('#content').val();
            if (author && content) {
                //构造节点
                var divE = '<div>' + author + '留言:' + content;
                // 将节点添加到页面上
                $('.container').append(divE);
                // 清空表单输入框
                $('#author').val('');
                $('#content').val('');
            }else {
                alert('作者和内容不能为空！');
            }
        });
    </script>
</body>
</html>

当我们点击提交后，留言内容显示在下方空白处

当我们进行刷新时，数据就会丢失，要想数据不丢失，需要将数据存储在数据库中

数据库的使用

要想使用数据库存储数据，我们首先需要创建数据表

创建数据表

sql 复制代码

DROP TABLE IF EXISTS message_info;
CREATE TABLE `message_info` (
        `id` INT ( 11 ) NOT NULL AUTO_INCREMENT,
        `author` VARCHAR ( 127 ) NOT NULL,
        `message` VARCHAR ( 256 ) NOT NULL,
        `delete_flag` TINYINT ( 4 ) DEFAULT 0 COMMENT '0-正常, 1-删除',
        `create_time` DATETIME DEFAULT now(),
        `update_time` DATETIME DEFAULT now() ON UPDATE now(),
PRIMARY KEY ( `id` ) 
) ENGINE = INNODB DEFAULT CHARSET = utf8mb4;

此时，创建出表 message_info

虽然当前实现的留言板不涉及更新和删除操作，但在这里仍然创建了字段 delete_flag、update_flag，若后续增加了相关功能，则不需要再对数据表进行修改

接下来我们使用 MyBatis 来实现数据的操作

创建项目

我们首先创建SpringBoot工程，并引入MyBatis 和 MySQL驱动依赖

连接数据库

java 复制代码

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/mybatis_test?characterEncoding=utf8&useSSL=false
    username: root
    password: 123123
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  configuration: #打印 MyBatis 日志
    map-underscore-to-camel-case: true #驼峰字段转换

连接好数据库后，我们就可以开始编写后端代码了

后端实现

我们首先创建留言对象 MessageInfo 类

java 复制代码

package com.example.messageboard.model;

import lombok.Data;

import java.util.Date;

@Data
public class MessageInfo {
    private Integer id;
    private String author;
    private String message;
    private Integer deleteFlag;
    private Date createTime;
    private Date updateTime;
}

根据留言板的需求可看出，后端需要提供两个服务：

添加留言：用户输入留言信息后，后端需要将留言信息存到数据库中

显示留言：页面展示时，需要从后端获取到所有的留言信息

接口定义

添加留言

[URL]

POST /message/publish

[请求参数]

author=ppp&message=ppp

[响应]

true //添加成功

false //添加失败

显示留言

[URL]

GET /message/getList

[请求参数]

无

[响应]

返回留言列表

[

{

"id": 1,

"author": "aa",

"message": "aa",

"deleteFlag": 0,

"createTime": "2024-05-11T09:42:59.000+00:00",

"updateTime": "2024-05-11T09:42:59.000+00:00"

},

{

"id": 2,

"author": "aa",

"message": "aa",

"deleteFlag": 0,

"createTime": "2024-05-11T09:52:01.000+00:00",

"updateTime": "2024-05-11T09:52:01.000+00:00"

},

{

"id": 3,

"author": "aa",

"message": "aa",

"deleteFlag": 0,

"createTime": "2024-05-11T09:52:15.000+00:00",

"updateTime": "2024-05-11T09:52:15.000+00:00"

}

]

持久层

将应用程序的数据持久化到数据库中，并提供对数据库的访问操作

实现向数据库中添加留言和从数据库中查询所有留言：

java 复制代码

package com.example.messageboard.mapper;

import com.example.messageboard.model.MessageInfo;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface MessageInfoMapper {
    @Insert("insert into message_info (`author`, `message`) values (#{author}, #{message})")
    Integer addMessage(MessageInfo messageInfo);

    @Select("select `id`, `author`, `message`,`delete_flag`, `create_time`, `update_time` from message_info where delete_flag = 0")
    List<MessageInfo> queryAll();
}

业务逻辑层

处理具体的业务逻辑

由于留言板的功能简单，不需要进行其他的处理，因此，我们直接调用messageInfoMapper的方法并返回即可

java 复制代码

package com.example.messageboard.service;

import com.example.messageboard.mapper.MessageInfoMapper;
import com.example.messageboard.model.MessageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class MessageInfoService {
    @Autowired
    private MessageInfoMapper messageInfoMapper;

    public int addMessage(MessageInfo messageInfo) {
        return messageInfoMapper.addMessage(messageInfo);
    }

    public List<MessageInfo> queryAll() {
        return messageInfoMapper.queryAll();
    }
}

控制层

接收前端发送的请求，对请求进行处理，并响应数据

添加留言：进行参数校验，校验通过后添加留言

查询留言：返回留言列表

java 复制代码

package com.example.messageboard.controller;

import com.example.messageboard.model.MessageInfo;
import com.example.messageboard.service.MessageInfoService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RequestMapping("/message")
@RestController
@Slf4j
public class MessageInfoController {
    @Autowired
    private MessageInfoService messageInfoService;

    /**
     * 发布留言
     * @param messageInfo
     * @return
     */
    @RequestMapping("/publish")
    public boolean publish(MessageInfo messageInfo){
        log.info("接收到参数messageInfo: {}", messageInfo);
        //参数校验
        if(!StringUtils.hasLength(messageInfo.getAuthor()) 
                || !StringUtils.hasLength(messageInfo.getMessage())){
            return false;
        }
        int result = messageInfoService.addMessage(messageInfo);
        if(result > 0){
            return true;
        }
        return false;
    }

    /**
     * 获取留言列表
     * @return
     */
    @RequestMapping("/getList")
    public List<MessageInfo> getList(){
        return messageInfoService.queryAll();
    }
}

后端代码编写完成后，我们运行程序，并进行测试：

我们首先测试添加留言：

分别测试添加成功、未输入昵称、未输入留言三种情况下的添加：

结果正确

我们再测试显示留言：

结果正确

接下来，我们来完善客户端代码

前端代码完善

html 复制代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易留言板</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <style>
        .container {
            margin: 20px;
        }

        .submit {
            width: 150px;
            height: 40px;
            background-color: #ffb3a7;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>简易留言板</h1>
        <form id="messageForm">
            <label for="author">作者：</label>
            <input type="text" id="author" required><br>
            <label for="content">内容：</label><br>
            <textarea id="content" rows="4" cols="50" required></textarea><br>
            <button type="submit" class="submit">发布留言</button>
        </form>
    </div>
    
    <script>
        //获取留言
        $.ajax({
            url: '/message/getList',
            method: 'GET',
            success: function(messageInfos) {
                // console.log(messageInfos);
                var divE = "";
                for(var message of messageInfos){
                    divE += '<div>' + message.author + '留言:' + message.message;
                }
                $('.container').append(divE);
                
            },
            error: function(error) {
                console.error('获取留言列表时发生错误:', error);
            }
        });

        // 监听表单提交事件
        $('#messageForm').submit(function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            var author = $('#author').val();
            var content = $('#content').val();
            if (author && content) {
                // 发送 AJAX 请求保存留言
                $.ajax({
                    url: '/message/publish',
                    method: 'POST',
                    data: { author: author, message: content },
                    success: function(result) {
                        console.log(result);
                        //构造节点
                        var divE = '<div>' + author + '留言:' + content;
                        // 将节点添加到页面上
                        $('.container').append(divE);
                        // 清空表单输入框
                        $('#author').val('');
                        $('#content').val('');

                    },
                    error: function(error) {
                        console.error('保存留言时发生错误:', error);
                    }
                });
            } else {
                alert('作者和内容不能为空！');
            }
        });
    </script>
</body>
</html>

最后，我们进行测试：

所有留言信息成功显示，且新添加的留言信息也在下方成功显示