快捷導(dǎo)航

MyBatis實(shí)現(xiàn)留言板的示例代碼

更新時(shí)間：2024年08月14日 08:31:49 作者：Script_7

本文主要介紹了MyBatis實(shí)現(xiàn)留言板的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

效果預(yù)覽

界面長(zhǎng)這樣，每次提交之后，會(huì)在下面生成一條記錄，刷新頁(yè)面或者關(guān)掉后重新打開(kāi)，這些記錄仍然存在

思路

我們需要在數(shù)據(jù)庫(kù)中保存一條一條的消息，那就需要一個(gè)類

@Data
public class MessageInfo {
    private Integer id;
    private String from; //誰(shuí)留言
    private String to; //留言對(duì)誰(shuí)說(shuō)
    private String message; //留言的內(nèi)容
    private Integer deleteFlag; //刪除的標(biāo)志
    private Date createTime;
    private Date updateTime;
}

主體要實(shí)現(xiàn)兩個(gè)功能：發(fā)布留言、查看所有留言

先來(lái)寫 Mapper 接口

由于要實(shí)現(xiàn)持久化存儲(chǔ)，所以發(fā)布留言就是將留言放進(jìn)數(shù)據(jù)庫(kù)的表中，即 insert 操作；而對(duì)于查看留言，其實(shí)就是查詢表中所有留言

@Mapper
public interface MessageInfoMapper {
    //發(fā)布留言：把留言放進(jìn)數(shù)據(jù)庫(kù)
    @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();
}

接下來(lái)寫 Service，調(diào)用接口那兩個(gè)方法就 ok 了：

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

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

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

再來(lái)寫 Controller 實(shí)現(xiàn)接口中的方法

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

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

    //發(fā)布留言，就是把留言信息加入 list
    @RequestMapping("/publish")
    public boolean publish(MessageInfo messageInfo) {
        System.out.println("接收參數(shù)"); //打日志
        //檢查留言是否為空
        if(!StringUtils.hasLength(messageInfo.getTo())
                || !StringUtils.hasLength(messageInfo.getFrom())
                || !StringUtils.hasLength(messageInfo.getMessage()))
            return false;
        //不為空就加入 list
        list.add(messageInfo);
        return true;
    }
}

最后是前端部分的代碼，這部分直接粘貼下面的代碼就 ok 了，如果要改 UI 的話，可以到 BootStrap 上面拿現(xiàn)成的模板改一下

網(wǎng)址：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">輸入后點(diǎn)擊提交, 會(huì)將信息顯示下方空白處</p>
  <div class="row">
    <span>誰(shuí):</span> <input type="text" name="" id="from">
  </div>
  <div class="row">
    <span>對(duì)誰(shuí):</span> <input type="text" name="" id="to">
  </div>
  <div class="row">
    <span>說(shuō)什么:</span> <input type="text" name="" id="message">
  </div>
  <input type="button" value="提交" id="submit" onclick="submit()">
  <!-- <div>A 對(duì) B 說(shuō): 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 + '對(duì)' + message.to + '說(shuō)：' + message.message + '</div>';
        }
        $(".container").append(finalHtml);
    }
  });
  submit();
  function submit(){
    console.log("發(fā)布留言");
    //1. 獲取留言的內(nèi)容
    var from = $('#from').val();
    var to = $('#to').val();
    var message = $('#message').val();
    if (from== '' || to == '' || message == '') {
      return;
    }

    //發(fā)送ajax請(qǐng)求
    $.ajax({
      url: "/MessageBoard/publish",
      type: "post",
      data: {
        from: $('#from').val(),
        to: $('#to').val(),
        message: $('#message').val()
      },
      success: function(result) {
        if(result) {
          //2. 構(gòu)造節(jié)點(diǎn)
          var divE = "<div>"+from +"對(duì)" + to + "說(shuō):" + message + "</div>";
          //3. 把節(jié)點(diǎn)添加到頁(yè)面上
          $(".container").append(divE);
          //4. 清空輸入框的值
          $('#from').val("");
          $('#to').val("");
          $('#message').val("");
        } else {
          alert("輸入不合法，請(qǐng)重新輸入");
        }
      }
    });
  }

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

到此這篇關(guān)于MyBatis實(shí)現(xiàn)留言板的示例代碼的文章就介紹到這了,更多相關(guān)MyBatis 留言板內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: