目录
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=falseusername: rootpassword: xxxxxxdriver-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 {@Autowiredprivate MessageService messageService;@RequestMapping("/publish")public Boolean publishMessage(MessageInfo messageInfo){// 参数校验:Controllerif(!StringUtils.hasLength(messageInfo.getFrom())|| !StringUtils.hasLength(messageInfo.getTo())|| !StringUtils.hasLength(messageInfo.getMessage())){return false;}// 添加留言:ServicemessageService.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 {@Autowiredprivate 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)若后端、前后端交互、前端均没有出现问题,可以进行清除前端与后端缓存;