脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → MyBatis 留言板

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 留言板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:

相关文章

  • hadoop实现grep示例分享

    hadoop实现grep示例分享

    这篇文章主要介绍了hadoop实现grep示例,可从文档中提取包含某些字符串的行,需要的朋友可以参考下
    2014-03-03
  • JAVA 数据结构之Queue处理实例代码

    JAVA 数据结构之Queue处理实例代码

    这篇文章主要介绍了JAVA 数据结构之Queue处理实例代码的相关资料,需要的朋友可以参考下
    2017-02-02
  • spring boot实战教程之shiro session过期时间详解

    spring boot实战教程之shiro session过期时间详解

    这篇文章主要给大家介绍了关于spring boot实战教程之shiro session过期时间的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-10-10
  • SpringBatch从入门到精通之StepScope作用域和用法详解

    SpringBatch从入门到精通之StepScope作用域和用法详解

    这篇文章主要介绍了SpringBatch从入门到精通之StepScope作用域和用法详解,主要包括IOC容器中几种bean的作用范围以及可能遇到的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05
  • SpringBoot日志配置全过程

    SpringBoot日志配置全过程

    Spring Boot默认使用Logback作为日志框架,可以配置多种日志系统,包括JavaUtilLogging、CommonsLogging、Log4J及SLF4J,默认日志输出在控制台,可以通过配置文件将日志保存到文件中,日志级别包括TRACE、DEBUG、INFO、WARN、ERROR和FATAL
    2025-01-01
  • spring boot里增加表单验证hibernate-validator并在freemarker模板里显示错误信息(推荐)

    spring boot里增加表单验证hibernate-validator并在freemarker模板里显示错误信息(推

    这篇文章主要介绍了spring boot里增加表单验证hibernate-validator并在freemarker模板里显示错误信息的相关资料,需要的朋友可以参考下
    2018-01-01
  • SpringBoot和Vue2项目配置https协议过程

    SpringBoot和Vue2项目配置https协议过程

    本文详细介绍了SpringBoot项目和Vue2项目的部署流程及SSL证书配置,对于SpringBoot项目,需将.pfx文件放入resources目录并配置server,然后打包部署,Vue2项目中,涉及检查nginx的SSL模块、编译新的nginx文件
    2024-10-10
  • 在MyBatisPlus中使用@TableField完成字段自动填充的操作

    在MyBatisPlus中使用@TableField完成字段自动填充的操作

    这篇文章主要介绍了在MyBatisPlus中使用@TableField完成字段自动填充的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2021-02-02
  • SpringBoot中给指定接口加上权限校验的实现

    SpringBoot中给指定接口加上权限校验的实现

    本文介绍了使用SpringSecurity为接口添加权限校验,以防止外部访问并确保安全性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-12-12
  • 如何使用Java爬虫批量爬取图片

    如何使用Java爬虫批量爬取图片

    这篇文章主要介绍了如何使用Java爬虫批量爬取图片,对于爬虫的入门来说，图片相对来说是比较容易获取的，因为大部分图片都不是敏感数据，所以不会遇到什么反爬措施，对于入门爬虫来说是比较合适的,需要的朋友可以参考下
    2023-04-04

最新评论