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

相关文章

  • Spring中Bean命名的方式总结

    Spring中Bean命名的方式总结

    在 Spring 框架中,每个 bean 必须至少有一个唯一的名称,这篇文章主要为大家详细介绍了Spring中Bean命名的各种方式,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • FreeMarker配置(Configuration)

    FreeMarker配置(Configuration)

    所有与该configuration 对象关联的模版实例都就可以通过获得to_upper 转换器,company 来获得字符串,因此你不需要再一次次的往root 中添加这些变量了。如果你往root 添加同名的变量,那么你新添加的变量将会覆盖之前的共享变量。
    2016-04-04
  • PowerJob的UserService工作流程源码解读

    PowerJob的UserService工作流程源码解读

    这篇文章主要介绍了PowerJob的UserService工作流程源码解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • Springboot使用jxls实现excel模板导出excel方式

    Springboot使用jxls实现excel模板导出excel方式

    这篇文章主要介绍了Springboot使用jxls实现excel模板导出excel方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • springAI结合ollama简单实现小结

    springAI结合ollama简单实现小结

    本文主要介绍了springAI结合ollama简单实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-03-03
  • 解决SpringBoot跨域的三种方式

    解决SpringBoot跨域的三种方式

    前后端分离是目前的趋势,解决跨域问题也是老生常谈的话题了,我们了解一下什么是域和跨域。域:协议 + 域名 + 端口;三者完全相同则为同域,反之有其一不同均为不同域。跨域请求:当前【发起请求】的域和【请求指向】的域属于不同域时,该次请求称之为跨域请求
    2021-06-06
  • 在Struts2中的结果集类型

    在Struts2中的结果集类型

    本篇文章,小编为大家介绍关于在Struts2中的结果集类型,有需要的朋友可以参考一下
    2013-04-04
  • Spring MVC DispatcherServlet处理请求过程示例详解

    Spring MVC DispatcherServlet处理请求过程示例详解

    这篇文章主要介绍了Spring MVC DispatcherServlet处理请求过程示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • java中变量和常量详解

    java中变量和常量详解

    这篇文章主要介绍了Java中变量和常量详解,具有一定参考价值,需要的朋友可以了解下。
    2017-11-11
  • 聊聊如何打印GC日志排查的问题

    聊聊如何打印GC日志排查的问题

    这篇文章主要介绍了聊聊如何打印GC日志排查的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-09-09

最新评论