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

目录

一、需求及界面展示

二、准备工作

引入依赖

.yml文件相关配置

数据库数据准备

三、编写后端代码

需求分析

代码结构 

Model

Mapper

Service

Controller

前端代码

四、测试

一、需求及界面展示

需求：

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

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

二、准备工作

引入依赖

.yml文件相关配置

spring:
  application:
    name: messageboard-demo
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/mybatis_test?characterEncoding=utf8&useSSL=false
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 配置打印 MyBatis 执行的 SQL
    map-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 {

    @Autowired
    private 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 {

    @Autowired
    private 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

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

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

重启服务，页面展示不变

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

MySQL：图文超详细教程MySQL5.7下载与安装

MySQL：图文超详细教程MySQL5.7下载与安装

一、前言 MySQL 5.7 是一个重要的数据库管理系统版本&#xff0c;它带来了多项改进和新特性&#xff0c;本文将超详细的带大家手动安装一下MySQL5.7。 二、下载MySQL5.7版本 MySQL5.7安装包 链接&#xff1a;https://pan.baidu.com/s/1lz5rp9PwfyeHzkEfI_lW6A 提取码&#…
阅读更多...
MyBatis框架的使用：mybatis介绍+环境搭建+基础sql的使用+如何使用Map传入多个参数+返回多个实体用List或者Map接收+特殊sql的使用

MyBatis框架的使用：mybatis介绍+环境搭建+基础sql的使用+如何使用Map传入多个参数+返回多个实体用List或者Map接收+特殊sql的使用

MyBatis框架的使用&#xff1a;mybatis介绍环境搭建基础sql的使用如何使用Map传入多个参数返回多个实体用List或者Map接收特殊sql的使用 一、MyBatis介绍1.1 特性1.2 下载地址1.3 和其它持久层技术对比 二、搭建环境2.1配置maven2.2 创建mybatis配置文件2.3 搭建测试环境 三、基…
阅读更多...
spring状态机实战

spring状态机实战

引言 完整代码库gitee地址:代码地址 一、什么是状态机 状态机是有限状态自动机的简称&#xff0c;是现实事物运行规则抽象而成的一个数学模型&#xff0c;是一种概念性机器&#xff0c;它能采取某种操作来响应一个外部事件。这种操作不仅能取决于接收到的事件&#xff0c;还…
阅读更多...
如何使用Rust构建Python原生库？注意，不是动态链接库！！！

如何使用Rust构建Python原生库？注意，不是动态链接库！！！

参考文档&#xff1a;https://github.com/PyO3/pyo3 创建python虚拟环境&#xff1a; conda create --name pyo3 python3.11.7激活虚拟环境&#xff1a; conda activate pyo3安装依赖&#xff1a; pip install maturin初始化项目&#xff1a; maturin init构建项目&#x…
阅读更多...
搜索二叉树（C++）

搜索二叉树（C++）

文章目录 1. 搜索二叉树的概念2. 搜索二叉树结构的定义3. 搜索二叉树的操作3.1 搜索二叉树的插入3.2 搜索二叉树的删除3.3 搜索二叉树的查找 4. 完整代码 1. 搜索二叉树的概念 二叉搜索树&#xff08;Binary Search Tree&#xff0c;简称 BST&#xff09;&#xff0c;又称二叉…
阅读更多...
Android Studio 获取 SHA1

Android Studio 获取 SHA1

以 debug.keystore 调试密钥库为例。 步骤1&#xff1a;明确 debug.keystore 位置 debug.keystore 在 .android 目录下&#xff1a; Windows 用户&#xff1a;C:\Users\用户名\.android\debug.keystore Mac 用户&#xff1a;/Users/用户名/.android/debug.keystore 假设我的…
阅读更多...
在Windows中安装Redis

在Windows中安装Redis

一、下载Redis github链接&#xff1a;https://github.com/redis-windows/redis-windows/releases 二、安装 解压后点击start.bat文件即可启动服务 新开一个cmd窗口进入安装了Redis的文件夹输入redis-cli.exe -h 127.0.0.1 -p 6379连接Redis&#xff0c;见如下结果便是成功&…
阅读更多...
数据结构——链式二叉树知识点以及链式二叉树数据操作函数详解！！

数据结构——链式二叉树知识点以及链式二叉树数据操作函数详解！！

引言&#xff1a;该博客将会详细的讲解二叉树的三种遍历方法&#xff1a;前序、中序、后序&#xff0c;也同时会讲到关于二叉树的数据操作函数。值得一提的是&#xff0c;这些函数几乎都是建立在一个函数思想——递归之上的。这次的代码其实写起来十分简单&#xff0c;用不了几…
阅读更多...
【Springboot系列】SpringBoot 中的日志如何工作的，看完这一篇就够了

【Springboot系列】SpringBoot 中的日志如何工作的，看完这一篇就够了

文章目录 强烈推荐引言Spring Boot 中的日志是怎么工作日志框架选择配置文件日志级别自定义日志配置集成第三方日志库实时监控和日志管理 Log4j2工作原理分析1. 核心组件2. 配置文件3. Logger的继承和层次结构4. 日志事件处理流程5. 异步日志 总结强烈推荐专栏集锦写在最后 强烈…
阅读更多...
免费图片文字转换成文本，ocr文字识别软件免费版，真的太实用了！

免费图片文字转换成文本，ocr文字识别软件免费版，真的太实用了！

截屏短视频上一段扎心文字&#xff0c;想把它发到朋友圈怎么办&#xff1f;这时候就需要一个OCR识别软件。 它就像一个聪明的小助手&#xff0c;它可以帮助电脑“看懂”书本上或者图片里的字。就像我们用眼睛看字一样&#xff0c;OCR软件用它的“眼睛”扫描图片&#xff0c;识…
阅读更多...
C语言代码错误（一）

C语言代码错误（一）

今天在写选择排序代码时&#xff0c;在测试数据发现不能显示结果 1、代码如下&#xff1a; #include <stdio.h>int main(void) {int i, j; // 循环变量int MinIndex; // 保存最小的值的下标int buf; // 互换数据时的临时变量int n;printf("你想输入多少个数据n:\n…
阅读更多...
乐理学习-音及音名

乐理学习-音及音名

1. 我觉得练习题很重要。我要得到一个反馈 所以我想没学习完书中的一节就要把练习题做下来&#xff0c;虽然慢点也可以。 2. 做个小计划。 今天计算了一下学完《基本乐理-李重光》如果每天3张。也要80天干完&#xff0c;希望能有一天可以学习7张的速度的时候。 3. 练习记录…
阅读更多...
【除自身以外数组的乘积】python

【除自身以外数组的乘积】python

目录 思路&#xff1a; 代码&#xff1a; 思路&#xff1a; 直接计算前缀乘积&#xff0c;后缀乘积&#xff0c;然后相乘即可 开始我还在想&#xff0c;遍历一次i&#xff0c;怎么能同时计算前缀乘积和后缀乘积&#xff0c;事实上分开计算比较方便。。 代码&#xff1a; cl…
阅读更多...
Spark运行模式详解

Spark运行模式详解

Spark概述 Spark 可以在多种不同的运行模式下执行&#xff0c;每种模式都有其自身的特点和适用场景。 部署Spark集群大体上分为两种模式&#xff1a;单机模式与集群模式。大多数分布式框架都支持单机模式&#xff0c;方便开发者调试框架的运行环境。但是在生产环境中&#xff…
阅读更多...
聊聊变异测试

聊聊变异测试

软件质量保障 所寫即所思&#xff5c;一个阿里质量人对测试的所感所悟。 1. 介绍 有句话说&#xff1a;证实容易&#xff0c;证伪难。正如测试一样&#xff0c;证明缺陷存在容易&#xff0c;但证明不存在缺陷难。而变异测试颠覆了这一原则&#xff0c;如果我们知道存在缺陷&am…
阅读更多...
开发依赖与运行依赖

开发依赖与运行依赖

1. 概念 开发依赖&#xff1a;devDependencies 运行依赖&#xff1a;dependencies 2. 理解 &#xff08;1&#xff09;devDependencies 在线上状态不需要使用的依赖&#xff0c;就是开发依赖。为什么 npm 要把它单独分拆出来呢&#xff1f;最终目的是为了减少 node_modul…
阅读更多...
ElasticSearch插件版本与ES版本不对应的解决方案

ElasticSearch插件版本与ES版本不对应的解决方案

一、背景 最近需要给es安装ik、hanlp分词器和ingest-attachment管道&#xff0c;服务器已有的es版本为8.5.3&#xff08;似乎太新了&#xff09;&#xff0c;hanlp和ingest-attachment都没有这么高的版本&#xff0c;因此只能下载相对老的版本&#xff0c;然后自己修改配置文件…
阅读更多...
Linux定时计划

Linux定时计划

定时计划 一、计划任务种类 突发性&#xff1a;临时决定只执行一次的任务 at&#xff1a;处理执行一次任务就结束定时性&#xff1a;每隔一定时间需要重复执行此命令 crontab&#xff1a;指定任务&#xff0c;按照设定的周期一直循环执行二、作用 定时任务可以用于自动备份…
阅读更多...
Java Swing + MySQL图书借阅管理系统

Java Swing + MySQL图书借阅管理系统

系列文章目录 Java Swing MySQL 图书管理系统 Java Swing MySQL 图书借阅管理系统 文章目录 系列文章目录前言一、项目展示二、部分代码1.Book2.BookDao3.DBUtil4.BookAddInternalFrame5.Login 三、配置 前言 项目是使用Java swing开发&#xff0c;界面设计比较简洁、适合作…
阅读更多...
冯喜运：5.27黄金暴跌大阴后出现“暂定符”今日黄金原油操作策略

冯喜运：5.27黄金暴跌大阴后出现“暂定符”今日黄金原油操作策略

【黄金消息面分析】&#xff1a;金价虽然有大阴线暴跌&#xff0c;但依然属于超买后的调整而非熊市&#xff0c;对中长线投资者来说只是市场洗牌。因此&#xff0c;在出现企稳迹象之后&#xff0c;随时关注反弹时机的启动。未来几日&#xff0c;黄金空头可能在进一步发力之前需…
阅读更多...
最新文章

Copyright @ 2022~2023