VUE实现简单留言板（Timeline+infinite scroll+Springboot+Hibernate）

先贴出效果图：

留言按照倒序排列。在底部的文本框内输入留言后，点击“留言”按钮，留言将保存至数据库中，同时刷新网页，新留言出现在顶部。

当滚动条到底部时，自动调用加载函数，显示更多早期留言。

前端代码index.vue:

<script setup lang="ts">

import { useBoard } from "./utils/hook";
import { ref, markRaw } from "vue";


const {
  boardInfo,
  dataList,
  onSubmit,
  onLazyLoad
} = useBoard();


</script>

<template>
<div>
  <el-card shadow="never">

          <div class="flex justify-between">
            <span class="text-md font-medium">留言区</span>
          </div>
          <!-- <el-scrollbar max-height="380" class="mt-3"> -->
          <div>
            <el-timeline v-infinite-scroll="onLazyLoad" style="overflow:auto" class="infinite-list">
              <el-timeline-item class="infinite-list-item"
                v-for="(item, index) in dataList"
                :key="index"
                center
                placement="top"
                 :timestamp="item.date"
              >
              <el-card>
                <p>{
  
  {item.username}}</p>
                <p class="text-text_color_regular text-sm">
                  {
  
  {item.comments}}
                </p>
              </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
          <!-- </el-scrollbar> -->
  </el-card>
  <el-card>
        <el-input
          v-model="boardInfo.comments"
          placeholder="请输入留言"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 3 }"
          maxlength="256"
          show-word-limit      
        />
        <div>
         <el-button type="primary" class="submit-btn" @click="onSubmit(boardInfo)">
          留言
         </el-button>
         </div>
  

  </el-card>
<div>
</template>

<style lang="scss" scoped>
.infinite-list {
  height: 440px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  margin: 10px;
}

.submit-btn{
  float: right;
  margin-top: 10px;
}

</style>