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

更新时间：2024年09月26日 14:14:54 作者：码农研究僧

在Vue3中,使用el-table组件渲染表格数据,通过el-table-column指定内容,时间点需前端校准,用getTime()比较,到达时触发操作,异步API请求可用async/await处理,setInterval实现定时监控,配合条件判断防止重复请求

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>
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>
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>
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>

到此这篇关于Vue 3 表格时间监控与动态后端请求触发详解（附Demo）的文章就介绍到这了,更多相关Vue 3 表格时间监控内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3使用深度选择器修改样式问题
这篇文章主要介绍了vue3使用深度选择器修改样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
详解基于vue-router的动态权限控制实现方案
本篇文章主要介绍了详解基于vue-router的动态权限实现方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue 设置 input 为不可以编辑的实现方法
今天小编就为大家分享一篇vue 设置 input 为不可以编辑的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
基于elementUI竖向表格、和并列的案例
这篇文章主要介绍了基于elementUI竖向表格、和并列的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue在css中图片路径问题解决的配置方法
这篇文章主要为大家介绍了Vue在css中图片路径问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
深入了解Vue动态组件和异步组件
这篇文章主要介绍了深入了解Vue动态组件和异步组件的相关资料，帮助大家更好的理解和学习vue组件的相关知识，感兴趣的朋友可以了解下
2021-01-01
使用vue3.2实现多页签导航
这篇文章主要为大家详细介绍了如何使用vue3.2 + elementPlus + pinia 实现多页签导航,文中的示例代码讲解详细,有需要的小伙伴可以参考一下
2023-12-12
Vue3数据更新,页面没有同步更新的问题及解决
这篇文章主要介绍了Vue3数据更新,页面没有同步更新的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
VUE3 click点击事件及修饰符详解
这篇文章主要介绍了VUE3 click点击事件及修饰符的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
Vue之修改数据页面不更新的问题
这篇文章主要介绍了Vue之修改数据页面不更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12