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"centerplacement="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-inputv-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>

hook.tsx，滚动条滚到底时自动调用onLazyLoad函数，提交留言调用onSubmit函数。


import { reactive, ref, toRaw, onMounted } from "vue";
import { http } from "@/utils/http";
import { baseUrlApi } from "../../../api/utils";export function useBoard() {type Result = {success: boolean;data?: Array<any>;}type ResultTable = {success: boolean;data?: {list: Array<any>;total?: number;pageSize?: number;currentPage?: number;};};const boardInfo = reactive({avatar: "",nickname: "",comments: "",username: "游客"});const dataList = ref([]);async function onSubmit(data) {const { success } = await addBoard(boardInfo);if (success) {reload();}}const count = ref(0);const currentPage = ref(-1);const pageSize = ref(-1);async function onLazyLoad() {count.value += 1;console.log("--------->lazyload----" + count.value);const param = {"currentPage": currentPage.value,"pageSize": pageSize.value,"total": dataList.value.length};const { success, data } = await lazyload(param);if (success) {dataList.value = dataList.value.concat(data.list);currentPage.value = data.currentPage;pageSize.value = data.pageSize;}}async function reload() {count.value += 1;const param = {"currentPage": 0,"pageSize": 4,"total": 0};const { success, data } = await lazyload(param);if (success) {dataList.value = data.list;currentPage.value = data.currentPage;pageSize.value = data.pageSize;}}onMounted(async () => {});const addBoard = (data?: object) => {return http.request<Result>("post", baseUrlApi("/board/addBoard"), { data });};const lazyload = (data?: object) => {return http.request<ResultTable>("post", baseUrlApi("/board/getBoard-lazyload"), { data });};return {boardInfo,dataList,onSubmit,onLazyLoad};}

后端代码BoardController.java：

package com.test.controller;import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.test.Utils;
import com.test.entity.Board;
import com.test.service.BoardService;@Controller
@RequestMapping("/board")
public class BoardController {@Autowiredprivate BoardService boardService;@PostMapping("/getBoard-lazyload")@ResponseBodypublic Map getBoardLazyLoad(@RequestBody Map<String,Object> param) {Integer currentPage = Utils.parseInt(param, "currentPage");Integer pagesize = Utils.parseInt(param, "pageSize");Integer total = Utils.parseInt(param, "total");currentPage += 1;pagesize = 4;Map ret = new HashMap();System.out.print("++++++++++>" + currentPage);List<Board> list = boardService.getBoards(currentPage, pagesize,total);if(list.size()>0) {			Map map = new HashMap();map.put("list", list);map.put("total", list.size());map.put("pageSize", pagesize);map.put("currentPage", currentPage);ret.put("data", map);ret.put("success", true);}else {ret.put("data", null);ret.put("success", false);}return ret;}@PostMapping("/addBoard")@ResponseBody@Transactional(value = "primaryTransactionManager")public Map addBoard(@RequestBody Map<String, Object> param) {Map map = new HashMap();try {Board b = new Board();b.setComments(Utils.parseString(param, "comments"));b.setUsername(Utils.parseString(param, "username"));SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");long timestamp = System.currentTimeMillis();String dateString = sdf.format(new Date(timestamp));b.setDate(dateString);boardService.addBoard(b);		map.put("data", null);map.put("success", true);}catch(Exception e) {map.put("data", null);map.put("success", false);}return map;}}

Hibernate配置类PrimaryDbConfig：

package com.test.conf;import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.boot.jdbc.DataSourceBuilder;
import org.springframework.boot.orm.jpa.EntityManagerFactoryBuilder;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Primary;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
import org.springframework.orm.jpa.JpaTransactionManager;
import org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean;
import org.springframework.transaction.PlatformTransactionManager;import javax.sql.DataSource;/*** 数据库配置** basePackages：JPA扫描配置* entityManagerFactoryRef：实体扫描配置* transactionManagerRef：事务配置** */
@Configuration
@EnableJpaRepositories(basePackages = "com.test.dao", entityManagerFactoryRef = "primaryEntityManager", transactionManagerRef = "primaryTransactionManager")
public class PrimaryDbConfig {private final Logger log = LoggerFactory.getLogger(getClass());private DataSource dataSource;private LocalContainerEntityManagerFactoryBean entityManager;/** 创建数据库连接* @Primary 配置多个数据源时，用于标记主库* @ConfigurationProperties 指定配置文件中的属性前缀** */@Primary@ConfigurationProperties(prefix = "spring.datasource.primary")@Bean(name = "primaryDataSource")public DataSource primaryDataSource() {System.out.printf("++++++++++++++++++++++++++++++++++>");dataSource = DataSourceBuilder.create().build();log.info("正在连接数据库1...");return dataSource;}/** 实体扫描配置** 方法名与类注解中的entityManagerFactoryRef的值保持一致，配置多个数据源时方法名不能相同** */@Bean@PrimaryLocalContainerEntityManagerFactoryBean primaryEntityManager(EntityManagerFactoryBuilder builder) {log.info("正在扫描接数据库1的实体类...");entityManager = builder.dataSource(dataSource).packages("com.test.entity").persistenceUnit("primaryPersistenceUnit").build();return entityManager;}/** 事务配置** 方法名与类注解中的transactionManagerRef的值保持一致，配置多个数据源时方法名不能相同** */@Bean@PrimaryPlatformTransactionManager primaryTransactionManager(EntityManagerFactoryBuilder builder) {log.info("正在配置接数据库1的事务管理器...");return new JpaTransactionManager(entityManager.getObject());}
}

Hibernate配置文件application.properties：

server.port=5000
spring.datasource.primary.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.primary.jdbc-url=jdbc:mysql://localhost:3306/数据库名称
spring.datasource.primary.username=root
spring.datasource.primary.password=密码
spring.jpa.properties.hibernate.hbm2ddl.auto=update
spring.jpa.show-sql=true
spring.jpa.open-in-view=false

BoardDaoImpl.java:

package com.test.dao;import java.util.List;import org.hibernate.HibernateException;
import org.springframework.stereotype.Repository;
import com.test.entity.Board;
import jakarta.persistence.EntityManager;
import jakarta.persistence.PersistenceContext;
import jakarta.persistence.Query;@Repository
public class BoardDaoImpl implements BoardDao {@PersistenceContext(unitName = "primaryEntityManager")private EntityManager entityManager;@Override/*** page:当前起始页，total：已查询的总数*/public List<Board> getBoards(int page, int pagesize, int total) {try {page = total / pagesize;String sql = "select * from board ORDER BY create_time DESC limit :start,:size ";Query query = entityManager.createNativeQuery(sql, Board.class);query.setParameter("start", total);query.setParameter("size", pagesize);List<Board> result = query.getResultList();return result;} catch (HibernateException e) {e.printStackTrace();}return null;}@Overridepublic Boolean addBoard(Board b) {try {entityManager.persist(b);return true;} catch (HibernateException e) {e.printStackTrace();}return false;}}

Board.java:

package com.test.entity;import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;@Entity
@Table(name = "board")
public class Board {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private String createTime;private String comments;private String username;public Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getDate() {return createTime;}public void setDate(String createTime) {this.createTime = createTime;}public String getComments() {return comments;}public void setComments(String comments) {this.comments = comments;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}}