vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue 3 表格时间监控

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

作者：码农研究僧

在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: 删除过期预约 （自身实战代码）

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

<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: 即将到期商品提醒

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

<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: 会议提醒系统

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

<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 表格时间监控内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文