【Spring+MyBatis】留言墙的实现

目录

[1. 添加依赖](#1. 添加依赖)

[2. 配置数据库](#2. 配置数据库)

[2.1 创建数据库与数据表](#2.1 创建数据库与数据表)

[2.2 创建与数据库对应的实体类](#2.2 创建与数据库对应的实体类)

[3. 后端代码](#3. 后端代码)

[3.1 目录结构](#3.1 目录结构)

[3.2 MessageController类](#3.2 MessageController类)

[3.3 MessageService类](#3.3 MessageService类)

[3.4 MessageMapper接口](#3.4 MessageMapper接口)

[4. 前端代码](#4. 前端代码)

[5. 单元测试](#5. 单元测试)

[5.1 后端接口测试](#5.1 后端接口测试)

[5.2 使用前端页面测试](#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）若后端、前后端交互、前端均没有出现问题，可以进行清除前端与后端缓存；