当前位置： 首页 > news >正文

【Spring+MyBatis】留言墙的实现

news 来源：原创 2025/5/15 0:45: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完成一个简单的留言板 https://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>A 对 B 说: hello</div> -->
</div>

<script src="https://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）若后端、前后端交互、前端均没有出现问题，可以进行清除前端与后端缓存；

相关文章：

  • SOCKET建立简单的tcp服务端与客户端通信
  • 【动态路由】系统web url整合系列【springcloud-gateway实现】【不改hosts文件版】组件一：多个Eureka路由过滤器
  • 【深度解析】图解Deepseek-V3模型架构-混合专家模型（MoE）
  • 海尔小红书年度规划方案拆解
  • rabbitmq五种模式的总结——附java-se实现（详细）
  • Task03:Ollama API 的使用
  • Spring AI集成DeepSeek：三步搞定Java智能应用
  • AI芯片NVDA、AVGO、MRVL、AMD估值分析
  • 【Python】01-基础
  • 使用JavaScript实现深浅拷贝
  • 升级 SpringBoot3 全项目讲解 — 别再使用 Optional 了，请使用 Jspecify 来替代它
  • 怎么能在互联网上找到某个专业的专业资料?
  • 在 UniApp 项目中设置多语言
  • 2025.2.16机器学习笔记：TimeGan文献阅读
  • c#模拟鼠标点击左键
  • 【开源项目】图床工具Easyimage保姆级搭建
  • Windows编程：用 VS2019 编写C语言程序
  • 103-《茶靡花》
  • rtsp rtmp 跟 http 区别
  • Flask框架入门完全指南
  • 上海市重大工程一季度开局良好，崇明线等按既定计划加快建设
  • 外交部：正确认识和对待历史是检验日本能否恪守和平发展承诺的重要标准
  • 夜读丨取稿费的乐趣
  • 中美经贸高层会谈在瑞士日内瓦举行
  • 经济日报金观平：充分发挥超大规模市场优势
  • 王毅同印度国家安全顾问多瓦尔通电话