基于SpringBoot和Mybatis实现的留言板案例

目录

一、需求及界面展示

二、准备工作

引入依赖

.yml文件相关配置

数据库数据准备

三、编写后端代码

需求分析

代码结构 

Model

Mapper

Service

Controller

前端代码

四、测试

一、需求及界面展示

需求：

1. 输入留言信息，点击提交，后端把数据存储起来

2. 页面展示输入的留言板信息

二、准备工作

引入依赖

.yml文件相关配置

spring:application:name: messageboard-demodatasource:url: jdbc:mysql://127.0.0.1:3306/mybatis_test?characterEncoding=utf8&useSSL=falseusername: rootpassword: rootdriver-class-name: com.mysql.cj.jdbc.Drivermybatis:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 配置打印 MyBatis 执行的 SQLmap-underscore-to-camel-case: true  #配置自动驼峰转换

数据库相关配置，需要改成自己的数据库名和数据库用户名密码

数据库数据准备

我这里使用的数据库是mybatis_test 

create database mybatis_test;use mybatis_test;DROP TABLE IF EXISTS message_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;

update_time字段中 ON UPDATE now()，表示当数据发生更新操作时，自动把该列的值设置为now()，now()可以替换成其他获取时间的标识符，比如：CURRENT_TIMESTAMP()，LOCALTIME()等。MySQL5.6.5以上版本和5.6.5以下版本会有一些区别。

三、编写后端代码

需求分析

后端需要提供两个服务：

1. 提交留言：用户输入留言信息之后，后端需要把留言信息保存起来

2. 展示留言：页面展示时，需要从后端获取到所有的留言信息

代码结构 

Model

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;
}

Mapper

import cn.hxxy.messageboard.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 MessageInfoMapper {@Select("select `from`, `to`, `message` from message_info where delete_flag = 0")List<MessageInfo> queryAll();@Insert("insert into message_info (`from`, `to`, `message`) values (#{from}, #{to}, #{message})")Integer insertMessage(MessageInfo messageInfo);
}

insert语句中，from和to属于MySQL关键字，必须加上反引号.

Service

import cn.hxxy.messageboard.mapper.MessageInfoMapper;
import cn.hxxy.messageboard.model.MessageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class MessageService {@Autowiredprivate MessageInfoMapper messageInfoMapper;public Integer publish(MessageInfo messageInfo) {return messageInfoMapper.insertMessage(messageInfo);}public List<MessageInfo> getList() {return messageInfoMapper.queryAll();}
}

Controller

import cn.hxxy.messageboard.model.MessageInfo;
import cn.hxxy.messageboard.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.List;@RestController
@RequestMapping("/message")
public class MessageController {@Autowiredprivate MessageService messageService;@RequestMapping("/publish")public boolean publish(MessageInfo messageInfo) {//参数合法性校验if (!StringUtils.hasLength(messageInfo.getFrom()) ||!StringUtils.hasLength(messageInfo.getTo()) ||!StringUtils.hasLength(messageInfo.getMessage())) {return false;}Integer result = messageService.publish(messageInfo);return result != 0; //插入成功，返回true}@RequestMapping("/getList")public List<MessageInfo> getList() {return messageService.getList();}
}

前端代码

<!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/getList",type: "get",success: function (MessageInfoList) {//展示列表内容var data = "";for (var messageInfo of MessageInfoList) {data += "<div>" + messageInfo.from + "对" +messageInfo.to + "说: " + messageInfo.message + "</div>";}$(".container").append(data);}});//点击提交按钮进行的处理function submit() {//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from === '' || to === '' || say === '') {alert("请将输入框填完整")return;}//内容合法，使用Ajax发起请求$.ajax({url: "/message/publish",type: "post",data: {from: from, //from: $("#from").val(),to: to,     //to: $("#to").val(),message: say    //say: $("#say").val(),},success: (function (result) {if (result) {//信息格式正确，页面要展示数据//2. 构造节点var divE = "<div>" + from + "对" + to + "说: " + say + "</div>";//3. 把节点添加到页面上$(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");} else {//格式错误alert("输入数据不合法")}})});}</script>
</body></html>

前端主要看script标签内的代码，里面使用了jQuery和Ajax，通过GET请求从服务器获取消息列表，并将其展示在名为"container"的容器中。定义了一个名为"submit"的函数，该函数在点击提交按钮时被调用，它从输入框中获取留言内容，并通过POST请求将留言发布到服务器。如果留言格式正确，它会将留言内容添加到页面上，并清空输入框的值；如果留言格式错误，它会弹出一个警告框。

请注意，这段代码依赖于引入jQuery库，因此需要在HTML文件中添加以下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

四、测试

运行程序，访问 http://127.0.0.1:8080/messagewall.html

数据库已有信息会直接展示

输入留言信息，点击提交，发现页面列表展示新的数据，并且数据库也添加了一条记录

重启服务，页面展示不变

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

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

相关文章

hubilder Android模拟器华为手机连接不上

hubilder Android模拟器华为手机连接不上

APP真机测试注意点&#xff1a; 1. 同一个局域网下 2. 手机连接USB模式&#xff08;华为选择USB配置&#xff1a;音频来源&#xff09; &#xff0c;开发者模式 3. 实在不行重启HBuilderX再运行真机 可是卡在了“正在安装手机端HBuilder调试基座...” 就没反应了&#xff1f;&…
阅读更多...
Flask+Vue+MySQL天水麻辣烫管理系统设计与实现（附源码 配置 文档）

Flask+Vue+MySQL天水麻辣烫管理系统设计与实现（附源码 配置 文档）

背景&#xff1a; 同学找到我期望做一个天水麻辣烫的网页&#xff0c;想复用以前做过的课设&#xff0c;结合他的实际需求&#xff0c;让我们来看看这个系统吧~ 项目功能与使用技术概述&#xff1a; 里面嵌入了6个子系统&#xff0c;其中餐饮系统可以进行餐馆信息添加、修改…
阅读更多...
Jeecg | 完成配置后，如何启动整个项目？

Jeecg | 完成配置后，如何启动整个项目？

前端启动步骤&#xff1a; 1. 以管理员身份打开控制台&#xff0c;切换到前端项目目录。 2. 输入 pnpm install 3. 输入 pnpm dev 4. 等待前端成功运行。 可以看到此时前端已经成功启动。 后端启动步骤&#xff1a; 1. 启动 mysql 服务器。 管理员身份打开控制台&#…
阅读更多...
微服务-系统架构

微服务-系统架构

微服务&#xff1a; 系统架构的演变 单一应用架构 早期的互联网应用架构&#xff0c;大量应用服务 功能 集中在一个包里&#xff0c;把大量的应用打包为一个jar包&#xff0c;部署在一台服务器&#xff0c;例如tomcat上部署Javaweb项目 缺点:耦合度高&#xff0c;一台服务器…
阅读更多...
谷歌浏览器使用vue插件查看表单提交的数据

谷歌浏览器使用vue插件查看表单提交的数据

1.查看组件&#xff1a; 对应代码里主页面引用的组件名&#xff1a; 表单名称&#xff0c;对应组件里form表单名&#xff1a; 左边的层次结构&#xff1a; 右边层次结构&#xff1a;
阅读更多...
【vue2配置】Vue Router

【vue2配置】Vue Router

Vue Router官网 1、npm install vue-router4 2、创建模块&#xff0c;在src目录小创/views/map/MapIndex.vue模块和创router/index.js文件 3、在router/index.js配置路由 import Vue from "vue"; import Router from "vue-router"; // 引入模块 const Ma…
阅读更多...
【限免】杂波环境下线性调频脉冲、巴克码、频率步进脉冲雷达MTI、脉冲压缩【附MATLAB代码】

【限免】杂波环境下线性调频脉冲、巴克码、频率步进脉冲雷达MTI、脉冲压缩【附MATLAB代码】

来源&#xff1a;微信公众号&#xff1a;EW Frontier 本代码主要模拟杂波环境&#xff08;飞机、地杂波、鸟类信号&#xff09;下&#xff0c;Chirp脉冲、巴克码脉冲、频率步进脉冲雷达信号的脉冲压缩及MTI、​匹配滤波。 MATLAB主代码 % 定义参数 fs 1000; % 采样率 T 1; …
阅读更多...
基于EV54Y39A PIC-IOT WA的手指数量检测功能开发(MPLAB+ADC)

基于EV54Y39A PIC-IOT WA的手指数量检测功能开发(MPLAB+ADC)

目录 项目介绍硬件介绍项目设计开发环境及工程参考总体流程图硬件基本配置光照传感器读取定时器检测逻辑 功能展示项目总结 &#x1f449; 【Funpack3-2】基于EV54Y39A PIC-IOT WA的手指数量检测功能开发 &#x1f449; Github: EmbeddedCamerata/PIC-IOT_finger_recognition 项…
阅读更多...
C++ prime 第五版 第14章 重载运算与类型转换

C++ prime 第五版 第14章 重载运算与类型转换

一、基本概念 重载的运算符是具有特殊名字的函数&#xff1a;它们的名字由关键字operator和其后要定义的运算符号共同组成。和其他函数一样&#xff0c;重载的运算符也包含返回类型、参数列表以及函数体。 我们不能为内置类型的运算对象重定义运算符。对于一个运算符函数来说&…
阅读更多...
【Linux】 虚拟机可以ping通主机 主机却ping不通虚拟机 解决方法

【Linux】 虚拟机可以ping通主机 主机却ping不通虚拟机 解决方法

我当时初学linux&#xff0c;需要虚拟机联网&#xff0c;且虚拟机和windows需要能相互ping通&#xff0c;我当时就是虚拟机一切正常&#xff0c;虚拟机显示有网可以ping通百度&#xff0c;也可以ping通windows&#xff0c;但是windows就是ping不通虚拟机&#xff0c;这个问题困…
阅读更多...
如何关闭或者减少屏蔽 CloudFlare 的真人检测

如何关闭或者减少屏蔽 CloudFlare 的真人检测

经常浏览境外网站的应该常碰到一个真人检测的提示（如下图所示）。最近，明月就收到了一个知乎上的付费咨询：问我如何去掉这个提示，由此明月也特别的研究了一下这个“真人检测”，这算是 CloudFlare 的一个特色了，基本上大家看到站点访问有这个提示的几乎都是用了 CloudFlar…
阅读更多...
list的模拟实现（一）

list的模拟实现（一）

嗨喽大家好&#xff0c;时隔许久阿鑫又给大家带来了新的博客&#xff0c;list的模拟实现&#xff08;一&#xff09;&#xff0c;下面让我们开始今天的学习吧&#xff01; list的模拟实现&#xff08;一&#xff09; 1.list splice接口的使用 2.list尾插的实现 3.list的迭代…
阅读更多...
Elasticsearch集群和Logstash、Kibana部署

Elasticsearch集群和Logstash、Kibana部署

1、 Elasticsearch集群部署 服务器 安装软件主机名IP地址系统版本配置ElasticsearchElk10.3.145.14centos7.5.18042核4GElasticsearchEs110.3.145.56centos7.5.18042核3GElasticsearchEs210.3.145.57centos7.5.18042核3G 软件版本&#xff1a;elasticsearch-7.13.2.tar.gz 示…
阅读更多...
【vue3+elementuiplus】el-select下拉框会自动触发校验规则

【vue3+elementuiplus】el-select下拉框会自动触发校验规则

场景&#xff1a;编辑弹框省份字段下拉框必填&#xff0c;触发方式change&#xff0c;有值第一次打开不会触发校验提示&#xff0c;关闭弹框再次打开触发必填校验提示&#xff0c;但是该字段有值 问题的原因是&#xff1a;在关闭弹层事件中&#xff0c;我做了resetfileds&…
阅读更多...
使用docker完整搭建前后端分离项目

使用docker完整搭建前后端分离项目

1、docker的优势&#xff0c;为啥用docker 2、docker的核心概念 镜像【Image】- 只读模板 容器【Container】- 运行镜像的一个外壳&#xff0c;相当于一个独立的虚拟机 仓库【repository】- 镜像的管理工具&#xff0c;可公开&#xff0c;可私有&#xff1b;类似git仓库 3、c…
阅读更多...
排序算法（二）

排序算法（二）

选择排序 &#xff1a; 思想&#xff1a; 每一轮把最小元素和未排序数组的第一个交换位置&#xff0c;直到全部排好序&#xff0c;最终为一个升序结果 代码展示&#xff1a; #include <stdio.h>int main(void) {int i, j; // 循环变量int MinIndex; // 保存最小的值的…
阅读更多...
MySQL大表删除方案

MySQL大表删除方案

1.问题 在生产环境中&#xff0c;执行大表删除操作时&#xff0c;很容易因为占用了大量io资源导致其他事务被阻塞&#xff0c;最终事务不断堆积导致MySQL挂掉。 2.drop命令 drop命令&#xff0c;MySQL主要干了两件事&#xff1a; 清除buffer pool缓冲&#xff08;内存&…
阅读更多...
jmeter之MD5加密接口请求教程

jmeter之MD5加密接口请求教程

前言&#xff1a; 有时候在项目中&#xff0c;需要使用MD5加密的方法才可以登录&#xff0c;或者在某一个接口中遇到 登录获取token后才可以进行关联&#xff0c;下面介绍下遇到的常见使用 一、第一种方法&#xff1a;使用jmeter自带的函数助手digest 选择工具&#xff0c;选择…
阅读更多...
一文带你学会如何部署个人博客到云服务器，并进行域名备案与解析！

一文带你学会如何部署个人博客到云服务器，并进行域名备案与解析！

哈喽&#xff0c;大家好呀&#xff01;这里是码农后端。之前我给大家介绍了如何快速注册一个自己的域名&#xff0c;并创建一台自己的阿里云ECS云服务器。本篇将介绍如何将个人博客部署到云服务器&#xff0c;并进行域名备案与解析。 1、域名备案 注册了域名并购买了云服务器之…
阅读更多...
识别鼠标绘制的数学公式网站

识别鼠标绘制的数学公式网站

https://webdemo.myscript.com/views/math/index.html x n m x n x m x^{nm}x^{n}\times x^{m} xnmxnxm 使用"$$"进行包裹
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023