主页 > IT业界 >

【Spring+MyBatis】留言墙的实现

IT业界
2025-09-08 21:06:02

1. 添加依赖

2. 配置数据库

2.1 创建数据库与数据表

2.2 创建与数据库对应的实体类

3. 后端代码

3.1 目录结构

3.2 MessageController类

3.3 MessageService类

3.4 MessageMapper接口

4. 前端代码

5. 单元测试

5.1 后端接口测试

5.2 使用前端页面测试

在Spring专栏中，已经实现了Spring MVC版的留言墙，详见下文：

【SpringMVC】_SpringMVC实现留言墙_使用springmvc完成一个简单的留言板-CSDN博客文章浏览阅读994次，点赞24次，收藏17次。1、请求：/message/publish2、参数：使用对象MessageInfo进行存储参数：3、响应：true/false；_使用springmvc完成一个简单的留言板 blog.csdn.net/m0_63299495/article/details/139359758该版本的消息存储采用了List<MessageInfo>存储，每次重启服务器就会导致信息丢失。

本文基于上文，对表白墙系统进行持久化。

1. 添加依赖

在pom.xml文件中使用Alt+insert快捷键，在EditStarters中选择MyBatis与Mysql的相关依赖：

并在maven面板中进行刷新；

2. 配置数据库 2.1 创建数据库与数据表

创建数据库，名为message：

在该库下创建messgae_info数据表：

CREATE TABLE `message_info` ( `id` INT ( 11 ) NOT NULL AUTO_INCREMENT, `from` VARCHAR ( 127 ) NOT NULL, `to` 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;

在application.yml中进行数据库与MyBatis的相关配置：

# 端口配置 server: port: 8080 # 数据库连接配置 spring: datasource: url: jdbc:mysql://127.0.0.1:3306/message?characterEncoding=utf8&useSSL=false username: root password: xxxxxx driver-class-name: com.mysql.cj.jdbc.Driver mybatis: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #配置打印MyBatis日志 map-underscore-to-camel-case: true #配置转换驼峰 2.2 创建与数据库对应的实体类

修改MessageInfo类，增加id、deleteFlag、createTime、uodateTime属性与数据表字段对应：

package com.example.springbootdemo2.controller; import lombok.Data; import java.util.Date; @Data public class MessageInfo { private Integer id; private String from; private String to; private String message; private Integer deleteFlag; private Date createTime; private Date updateTime; } 3. 后端代码 3.1 目录结构

创建controller、service、mapper、model包，并创建对应类或接口：

其中，MessageController类主要功能：

（1）参数校验；（2）调用MessageService进行业务逻辑操作；

MessageService类主要功能：

（1）调用MessageMapper接口进行数据库操作；

MessageMapper接口主要功能：

（1）执行SQL语句；

3.2 MessageController类 package com.example.springbootdemo2.controller; import com.example.springbootdemo2.model.MessageInfo; import com.example.springbootdemo2.service.MessageService; 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.ArrayList; import java.util.List; // 新增留言 @RequestMapping("/message") @RestController public class MessageController { @Autowired private MessageService messageService; @RequestMapping("/publish") public Boolean publishMessage(MessageInfo messageInfo){ // 参数校验：Controller if(!StringUtils.hasLength(messageInfo.getFrom()) || !StringUtils.hasLength(messageInfo.getTo()) || !StringUtils.hasLength(messageInfo.getMessage())){ return false; } // 添加留言:Service messageService.addMessage(messageInfo); return true; } // 返回所有留言信息 @RequestMapping("/getMessageList") public List<MessageInfo> getMessageList(){ return messageService.getMessageInfo(); } } 3.3 MessageService类 package com.example.springbootdemo2.service; import com.example.springbootdemo2.mapper.MessageMapper; import com.example.springbootdemo2.model.MessageInfo; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class MessageService { @Autowired private MessageMapper messageMapper; public void addMessage(MessageInfo messageInfo){ messageMapper.insertMessage(messageInfo); } public List<MessageInfo> getMessageInfo(){ return messageMapper.selectAllMessage(); } } 3.4 MessageMapper接口 package com.example.springbootdemo2.mapper; import com.example.springbootdemo2.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 MessageMapper { @Insert("insert into message_info(`from`,`to`,`message`) values (#{from},#{to},#{message})") void insertMessage(MessageInfo messageInfo); @Select("select* from message_info where delete_flag=0") List<MessageInfo> selectAllMessage(); } 4. 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>留言板</title> <style> .container { width: 350px; height: 300px; margin: 0 auto; /* border: 1px black solid; */ text-align: center; } .grey { color: grey; } .container .row { width: 350px; height: 40px; display: flex; justify-content: space-between; align-items: center; } .container .row input { width: 260px; height: 30px; } #submit { width: 350px; height: 40px; background-color: orange; color: white; border: none; margin: 10px; border-radius: 5px; font-size: 20px; } </style> </head> <body> <div class="container"> <h1>留言板</h1> <p class="grey">输入后点击提交, 会将信息显示下方空白处</p> <div class="row"> <span>谁:</span> <input type="text" name="" id="from"> </div> <div class="row"> <span>对谁:</span> <input type="text" name="" id="to"> </div> <div class="row"> <span>说什么:</span> <input type="text" name="" id="say"> </div> <input type="button" value="提交" id="submit" onclick="submit()">  </div> <script src=" cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script> // 页面加载时，请求后端获取留言列表（代码位置不限） $.ajax({ url:"/message/getMessageList", type:"get", success:function(messages){ // 参数为后端返回结果（变量名任意） for(var m of messages){ // 拼接留言 // 拼接节点的HTML，直接将HTML添加到container中 var divE = "<div>" + m.from + "对" + m.to + "说:" + m.message + "</div>"; // 把节点添加到页面上 $(".container").append(divE); } } }) function submit() { //1. 获取留言的内容 var from = $('#from').val(); var to = $('#to').val(); var say = $('#say').val(); if (from == '' || to == '' || say == '') { return; } // 提交留言 $.ajax({ url: "/message/publish", type: "post", data: { "from": from, "to": to, "message": say }, success: function (result) { if (result) { // 留言添加成功 //2. 拼接节点的HTML，直接将HTML添加到container中 // document.createElement('div'); var divE = "<div>" + from + "对" + to + "说:" + say + "</div>"; //3. 把节点添加到页面上 $(".container").append(divE); //4. 清空输入框的值 $('#from').val(""); $('#to').val(""); $('#say').val(""); } else { // 留言添加失败 alert("留言发布失败") } } }) } </script> </body> </html> 5. 单元测试 5.1 后端接口测试

（可以使用postman或Chrome）

可以在服务器日志中查看到相关信息：

需在数据库中进行是否成功的验证：

5.2 使用前端页面测试

可以在服务器日志中查看到相关信息：

需在数据库中进行是否成功的验证：

一般报错检错步骤：

（1）根据后端接口使用postman或Chrome构造请求，检查后端代码是否有错；

若后端接口访问无错误则说明错误出现在前端或前后端交互；

（2）若使用Chrome，则按F12看浏览器是否报错，根据报错信息定位错误代码；

若无错误则需检查请求是否发往后端，可以在后端服务器对应方法处打印日志(使用slf4j)，若前端进行操作后，后端服务器处没有执行改行日志的代码，则说明前后端交互处出现错误；

（3）若后端、前后端交互、前端均没有出现问题，可以进行清除前端与后端缓存；