【Spring+MyBatis】留言墙的实现

目录

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)若后端、前后端交互、前端均没有出现问题,可以进行清除前端与后端缓存;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/19874.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EtherNet/IP转Modbus TCP:新能源风电监控与分析实用案例

EtherNet/IP转Modbus TCP&#xff1a;新能源风电监控与分析实用案例 一、案例背景 在某新能源汽车电池生产线上&#xff0c;需要将采用EtherNet/IP协议的电池检测设备与采用ProfiNet协议的生产线控制系统进行集成&#xff0c;以实现对电池生产过程的全面监控和数据采集。 二、…

管理WSL实例 以及安装 Ubuntu 作为 WSL 子系统 流程

安装ubuntu wsl --install -d Ubuntu分类命令说明安装相关wsl --install在 Windows 10/11 上以管理员身份在 PowerShell 中运行此命令&#xff0c;可安装 WSLwsl --install -d <distribution name>在 PowerShell 中使用此命令安装特定版本的 Linux 发行版&#xff0c;如…

Spring框架中都用到了哪些设计模式?

大家好&#xff0c;我是锋哥。今天分享关于【Spring框架中都用到了哪些设计模式&#xff1f;】面试题。希望对大家有帮助&#xff1b; Spring框架中都用到了哪些设计模式&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Spring框架中使用了大量的设计模…

最新VS code配置C/C++环境(tasks.json, launch.json,c_cpp_properties.json)及运行多个文件、配置Cmake

目录 一、VScode配置C/C环境&#xff0c;需设置tasks.json, launch.json文件 二、安装C/C扩展&#xff0c;配置tasks.json、launch.json、c_cpp_properties.json文件 (1)安装c/c扩展 (2)配置tasks.json文件 (3)配置launch.json文件 (4)配置中的参数(属性)说明 (5)运行程序(运行…

Java零基础入门笔记:(3)程序控制

前言 本笔记是学习狂神的java教程&#xff0c;建议配合视频&#xff0c;学习体验更佳。 【狂神说Java】Java零基础学习视频通俗易懂_哔哩哔哩_bilibili Scanner对象 之前我们学的基本语法中我们并没有实现程序和人的交互&#xff0c;但是Java给我们提供了这样一个工具类&…

Spring Boot 原理分析

spring-boot.version&#xff1a;2.4.3.RELEASE Spring Boot 依赖管理 spring-boot-starter-parent 配置文件管理 <resources> <resource> <directory>${basedir}/src/main/resources</directory> <filtering>true&l…

Word中接入大模型教程

前言 为什么要在word中接入大模型呢&#xff1f; 个人觉得最大的意义就是不用来回切换与复制粘贴了吧。 今天分享一下昨天实践的在word中接入大模型的教程。 在word中接入大模型最简单的方式就是使用vba。 vba代码要做的事&#xff0c;拆分一下就是&#xff1a; 获取用户…

【原创】vue-element-admin-plus完成编辑页面中嵌套列表功能

前言 vue-element-admin-plus对于复杂业务的支持程度确实不怎么样&#xff0c;我这里就遇到了编辑页面中还要嵌套列表的真实案例&#xff0c;比如字典&#xff0c;主字典嵌套子信息&#xff0c;类似于一个树状结构。目前vue-element-admin-plus给出的例子是无法满足这个需求的…

OpenCV中的边缘检测

边缘检测是图像处理和计算机视觉中的关键技术之一&#xff0c;旨在识别图像中像素强度发生显著变化的区域&#xff0c;这些区域通常对应于物体的边界或轮廓。边缘检测在机器视觉中具有重要的需求背景&#xff0c;主要体现在以下几个方面&#xff1a; 图像分割&#xff1a;边缘…

vscode的一些实用操作

1. 焦点切换(比如主要用到使用快捷键在编辑区和终端区进行切换操作) 2. 跳转行号 使用ctrl g,然后输入指定的文件内容&#xff0c;即可跳转到相应位置。 使用ctrl p,然后输入指定的行号&#xff0c;回车即可跳转到相应行号位置。

Redis(高阶篇)02章——BigKey

一、面试题 阿里广告平台&#xff0c;海量数据里查询某一个固定前缀的key小红书&#xff0c;你如何生产上限制 keys* /flushdb/flushall等危险命令以防止阻塞或误删数据&#xff1f;美团&#xff0c;memory usage命令你用过吗&#xff1f;BigKey问题&#xff0c;多大算big&…

《Zookeeper 分布式过程协同技术详解》读书笔记-2

目录 zk的一些内部原理和应用请求&#xff0c;事务和标识读写操作事务标识&#xff08;zxid&#xff09; 群首选举Zab协议&#xff08;ZooKeeper Atomic Broadcast protocol&#xff09;文件系统和监听通知机制分布式配置中心, 简单Demojava code 集群管理code 分布式锁 zk的一…

53倍性能提升!TiDB 全局索引如何优化分区表查询?

作者&#xff1a; Defined2014 原文来源&#xff1a; https://tidb.net/blog/7077577f 什么是 TiDB 全局索引 在 TiDB 中&#xff0c;全局索引是一种定义在分区表上的索引类型&#xff0c;它允许索引分区与表分区之间建立一对多的映射关系&#xff0c;即一个索引分区可以对…

unity学习39:连续动作之间的切换,用按键控制角色的移动

目录 1 不同状态之间的切换模式 1.1 在1个连续状态和一个连续状态之间的transition&#xff0c;使用trigger 1.2 在2个连续状态之间的转换&#xff0c;使用bool值切换转换 2 至少现在有2种角色的移动控制方式 2.1 用CharacterController 控制角色的移动 2.2 用animator…

【Python 打造高效文件分类工具】

【Python】 打造高效文件分类工具 一、代码整体结构二、关键代码解析&#xff08;一&#xff09;初始化部分&#xff08;二&#xff09;界面创建部分&#xff08;三&#xff09;核心功能部分&#xff08;四&#xff09;其他辅助功能部分 三、运行与使用四、示图五、作者有话说 …

网络工程师 (43)IP数据报

前言 IP数据报是互联网传输控制协议&#xff08;Internet Protocol&#xff0c;IP&#xff09;的数据报格式&#xff0c;由首部和数据两部分组成。 一、首部 IP数据报的首部是控制部分&#xff0c;包含了数据报传输和处理所需的各种信息。首部可以分为固定部分和可变部分。 固定…

Leetcode 424-替换后的最长重复字符

给你一个字符串 s 和一个整数 k 。你可以选择字符串中的任一字符&#xff0c;并将其更改为任何其他大写英文字符。该操作最多可执行 k 次。 在执行上述操作后&#xff0c;返回 包含相同字母的最长子字符串的长度。 题解 可以先做LCR 167/Leetcode 03再做本题 滑动窗口&…

28 在可以控制 postgres 服务器, 不知道任何用户名的情况下怎 进入 postgres 服务器

前言 最近有这样的一个需求, 有一个 postgres 服务器 但是 不知道 他的任何的用户名密码, 但是我想要查询这台 postgres 服务器 然后 基于这个需求, 我们看一下 怎么来处理 pg_hba.conf 认证方式修改为 trust 首先将 postgres 服务器的认证方式修改为 trust 这时候 …

LM Studio笔记

一、什么是 LM Studio&#xff1f; LM Studio 是一款功能强大、易于使用的桌面应用程序&#xff0c;用于在本地机器上实验和评估大型语言模型&#xff08;LLMs&#xff09;。它允许用户轻松地比较不同的模型&#xff0c;并支持使用 NVIDIA/AMD GPU 加速计算。 功能集&#xff1…

内网下,Ubuntu (24.10) 离线安装docker最新版教程

一般在数据比较敏感的情况下&#xff0c;是无法使用网络的&#xff0c;而对于Ubuntu系统来说&#xff0c;怎么离线安装docker呢&#xff1f; 下面我给大家来讲一下&#xff1a; 采用二进制安装&#xff1a; 1.下载docker离线包 官网下载&#xff1a; Index of linux/static…