MyBatis实现留言板的示例代码

更新时间：2024年08月14日 08:31:49 作者：Script_7

本文主要介绍了MyBatis实现留言板的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

效果预览

界面长这样，每次提交之后，会在下面生成一条记录，刷新页面或者关掉后重新打开，这些记录仍然存在

思路

我们需要在数据库中保存一条一条的消息，那就需要一个类

@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 接口

由于要实现持久化存储，所以发布留言就是将留言放进数据库的表中，即 insert 操作；而对于查看留言，其实就是查询表中所有留言

@Mapper
public interface MessageInfoMapper {
    //发布留言：把留言放进数据库
    @Insert("insert into message_info (`from`,`to`,`message`) values (#{from},#{to},#{message})")
    public Integer insertMessage(MessageInfo messageInfo);

    @Select("select from,to,message from message_info where delete_flag = 0")
    public List<MessageInfo> selectAllList();
}

接下来写 Service，调用接口那两个方法就 ok 了：

@Service
public class MessageService {
    @Autowired
    private MessageInfoMapper messageInfoMapper;

    //发布留言
    public Integer publishMessage(MessageInfo messageInfo) {
        return messageInfoMapper.insertMessage(messageInfo);
    }

    //查询留言
    public List<MessageInfo> getMessageList() {
        return messageInfoMapper.selectAllList();
    }
}

再来写 Controller 实现接口中的方法

@RestController
@RequestMapping("MessageBoard")
public class MessageController {
    private List<MessageInfo> list = new ArrayList<>();

    @RequestMapping("/getList")
    public List<MessageInfo> getList() {
        return list;
    }

    //发布留言，就是把留言信息加入 list
    @RequestMapping("/publish")
    public boolean publish(MessageInfo messageInfo) {
        System.out.println("接收参数"); //打日志
        //检查留言是否为空
        if(!StringUtils.hasLength(messageInfo.getTo())
                || !StringUtils.hasLength(messageInfo.getFrom())
                || !StringUtils.hasLength(messageInfo.getMessage()))
            return false;
        //不为空就加入 list
        list.add(messageInfo);
        return true;
    }
}

最后是前端部分的代码，这部分直接粘贴下面的代码就 ok 了，如果要改 UI 的话，可以到 BootStrap 上面拿现成的模板改一下

网址：BootStrap

<!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: mediumpurple;
      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="message">
  </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: "/MessageBoard/getList",
    type: "get",
    success: function (messageInfos) {
        var finalHtml = "";
        for(var message of messageInfos) {
          finalHtml += '<div>' + message.from + '对' + message.to + '说：' + message.message + '</div>';
        }
        $(".container").append(finalHtml);
    }
  });
  submit();
  function submit(){
    console.log("发布留言");
    //1. 获取留言的内容
    var from = $('#from').val();
    var to = $('#to').val();
    var message = $('#message').val();
    if (from== '' || to == '' || message == '') {
      return;
    }

    //发送ajax请求
    $.ajax({
      url: "/MessageBoard/publish",
      type: "post",
      data: {
        from: $('#from').val(),
        to: $('#to').val(),
        message: $('#message').val()
      },
      success: function(result) {
        if(result) {
          //2. 构造节点
          var divE = "<div>"+from +"对" + to + "说:" + message + "</div>";
          //3. 把节点添加到页面上
          $(".container").append(divE);
          //4. 清空输入框的值
          $('#from').val("");
          $('#to').val("");
          $('#message').val("");
        } else {
          alert("输入不合法，请重新输入");
        }
      }
    });
  }

  </script>
</body>
</html>

到此这篇关于MyBatis实现留言板的示例代码的文章就介绍到这了,更多相关MyBatis 留言板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Java向数据库中插入数据后获取自增ID的常用方法
有时候因为新增的需求需要获取刚刚新增的数据的自增的主键ID,下面这篇文章主要给大家介绍了关于Java向数据库中插入数据后获取自增ID的常用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-11-11
浅析Java异常处理中断言的使用
这篇文章主要介绍了Java异常处理中断言的使用,是Java入门学习中的基础知识,需要的朋友可以参考下
2015-09-09
Java动态循环队列是如何实现的
今天带大家学习java队列的相关知识,文章围绕着如何实现Java动态循环队列展开,文中有非常详细的介绍及代码示例,需要的朋友可以参考下
2021-06-06
JAVA简单链接Oracle数据库注册和登陆功能的实现代码
这篇文章主要介绍了JAVA链接Oracle并实现注册与登录功能的代码实例，有需要的朋友可以参考一下
2014-01-01
Spring Boot 会员管理系统之处理文件上传功能
Spring Boot会员管理系统的中，需要涉及到Spring框架，SpringMVC框架，Hibernate框架，thymeleaf模板引擎。这篇文章主要介绍了Spring Boot会员管理系统之处理文件上传功能,需要的朋友可以参考下
2018-03-03
JAVA并发编程有界缓存的实现详解
这篇文章主要介绍了JAVA并发编程有界缓存的实现详解的相关资料,这里举例说明如何实现，四种方法一一代码实现，需要的朋友可以参考下
2016-12-12
Java多线程中的ThreadPoolExecutor使用解析
这篇文章主要介绍了Java多线程中的ThreadPoolExecutor使用解析,作为线程池的缓冲,当新增线程超过maximumPoolSize时,会将新增线程暂时存放到该队列中,需要的朋友可以参考下
2023-12-12
SpringCloud中Zuul网关原理及其配置
Spring Cloud是一个基于Spring Boot实现的微服务应用开发工具，其中的Zuul网关可以实现负载均衡、路由转发、鉴权、限流等功能，本文将从Spring Cloud中Zuul网关的原理、使用场景和配置过程详细介绍，帮助大家更好地了解和应用Zuul网关,需要的朋友可以参考下
2023-06-06
zuul过滤器中转发请求头的解决方案
这篇文章主要介绍了zuul过滤器中转发请求头的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-07-07
Feign如何解决服务之间调用传递token
这篇文章主要介绍了Feign如何解决服务之间调用传递token，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03

MyBatis实现留言板的示例代码

目录

效果预览

思路

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具