Vue 3 表格时间监控与动态后端请求触发详解（附Demo）

1. 基本知识

这一类的时间点是因数据而异，所以定时任务不适用，需要前端表格自身数据到达之后去触发

往下的数据多数结合自身实战代码的一个总结

表格数据渲染

在 Vue 3 中使用 el-table 组件来展示表格数据，表格中的每一行数据通过列组件 el-table-column 来指定展示的内容
在表格中通过 prop 绑定数据字段，label 用于展示列的名称

<el-table :data="tableData"><el-table-column label="还柜时间" prop="appointmentEndTime" /><el-table-column label="操作" />
</el-table>

tableData 是一个数组或对象类型的数据源，表格会根据 prop 属性将数据展示到表格列中

时间格式化与校准
在前端场景中，经常需要格式化时间来便于展示或进行逻辑判断

比如Date 对象的 getTime() 方法获取时间戳，用于比较某一时间点是否到达

const currentTime = new Date().getTime() // 获取当前时间的时间戳
const appointmentTime = new Date(item.appointmentEndTime).getTime() // 获取预约时间的时间戳

这有助于处理时间相关的业务逻辑，比如：在到达某个时间点时触发某种操作

异步 API 请求
在时间到达时，通过前端代码自动触发后端 API 请求

在 Vue 3 中，常见的异步请求是使用 async/await 或 .then/.catch 来处理请求的成功和失败

await GoodsStoragePlanApi.deleteGoodsStoragePlan(item.id).then(response => { console.log("成功处理请求") }).catch(error => { console.error("请求失败") })

这个场景适合动态删除数据库中的数据，或是其他需要时间精确触发的操作

定时器与实时监控
使用 setInterval 方法可以实现定时任务，会每隔指定的时间执行一次回调函数

这个方法常用于实时检查某些条件是否满足，例如检查表格中某个时间是否已经到达当前时间

setInterval(() => {checkAppointmentTimes() // 每秒检查一次
}, 1000)

通过这种方式可以实现实时监控某个数据的变化，达到特定条件时，自动触发相关操作

条件判断与防止多次请求
为避免多次触发请求，必须明确条件
通常会检查某个数据是否为空，或时间差是否符合条件

例如：当 appointmentEndTime 不为 null 且时间差在 1 秒内时，触发请求（时间上用等于不合适，因为毫秒级别很难会以等于作判定）

if (appointmentTime - currentTime <= 1000 && appointmentTime >= currentTime) {// 触发后端请求
}

2. Demo

以下的Demo和逻辑比较通用！

Demo 1: 删除过期预约（自身实战代码）

场景：自动删除超过还柜时间的预约

表格渲染：通过 el-table 渲染表格，展示每一行的预约时间
时间检查：每秒检查表格中的时间列，当到达还柜时间时，自动删除对应数据

<template><el-table :data="Object.values(tableData)"><el-table-column label="还柜时间" prop="appointmentEndTime" /><el-table-column label="操作" /></el-table>
</template><script setup>javascript">
import { ref, onMounted } from 'vue'
import { GoodsStoragePlanApi } from '@/api'const tableData = ref({data1: { id: 1, appointmentEndTime: '2024-09-21 15:00:00' },data2: { id: 2, appointmentEndTime: '2024-09-21 16:00:00' }
})const checkAppointmentTimes = async () => {const currentTime = new Date().getTime()Object.values(tableData.value).forEach(async (item) => {if (item.appointmentEndTime) {const appointmentTime = new Date(item.appointmentEndTime).getTime()if (appointmentTime - currentTime <= 1000 && appointmentTime >= currentTime) {await GoodsStoragePlanApi.deleteGoodsStoragePlan(item.id)}}})
}onMounted(() => {setInterval(() => {checkAppointmentTimes()}, 1000)
})
</script>

Demo 2: 即将到期商品提醒

场景：在商品即将到期时发送提醒请求

时间逻辑：这里将检查时间差设置为 1 小时（3600000 毫秒），即只有在商品到期时间的一小时内才会触发提醒请求
后端请求：当时间满足条件时，触发提醒请求，向用户发送即将到期的通知

<template><el-table :data="Object.values(productList)"><el-table-column label="到期时间" prop="expirationTime" /><el-table-column label="操作" /></el-table>
</template><script setup>javascript">
import { ref, onMounted } from 'vue'
import { ProductApi } from '@/api'const productList = ref({product1: { id: 101, expirationTime: '2024-10-01 18:00:00' },product2: { id: 102, expirationTime: '2024-10-02 12:00:00' }
})const checkExpirationTimes = async () => {const currentTime = new Date().getTime()Object.values(productList.value).forEach(async (item) => {if (item.expirationTime) {const expirationTime = new Date(item.expirationTime).getTime()if (expirationTime - currentTime <= 3600000 && expirationTime >= currentTime) { // 1小时内await ProductApi.sendReminder(item.id)}}})
}onMounted(() => {setInterval(() => {checkExpirationTimes()}, 60000) // 每分钟检查一次
})
</script>

Demo 3: 会议提醒系统

场景：自动提醒用户即将开始的会议

逻辑设定：会议开始前 10 分钟发送提醒，通过 setInterval 每分钟检查会议列表
API 触发：当时间差小于 10 分钟时，通过 API 发送提醒

<template><el-table :data="Object.values(meetingList)"><el-table-column label="会议开始时间" prop="meetingStartTime" /><el-table-column label="操作" /></el-table>
</template><script setup>javascript">
import { ref, onMounted } from 'vue'
import { MeetingApi } from '@/api'const meetingList = ref({meeting1: { id: 201, meetingStartTime: '2024-09-25 09:00:00' },meeting2: { id: 202, meetingStartTime: '2024-09-26 11:00:00' }
})const checkMeetingTimes = async () => {const currentTime = new Date().getTime()Object.values(meetingList.value).forEach(async (item) => {if (item.meetingStartTime) {const meetingTime = new Date(item.meetingStartTime).getTime()if (meetingTime - currentTime <= 600000 && meetingTime >= currentTime) { // 10分钟内await MeetingApi.sendMeetingReminder(item.id)}}})
}onMounted(() => {setInterval(() => {checkMeetingTimes()}, 60000) // 每分钟检查一次
})
</script>