MyBatis实现留言板的示例代码

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

MyBatis实现留言板的示例代码

效果预览

思路

您可能感兴趣的文章: