快捷導(dǎo)航

Vue?3?表格時(shí)間監(jiān)控與動(dòng)態(tài)后端請求觸發(fā)詳解?附Demo展示

更新時(shí)間：2024年09月26日 14:14:54 作者：碼農(nóng)研究僧

在Vue3中,使用el-table組件渲染表格數(shù)據(jù),通過el-table-column指定內(nèi)容,時(shí)間點(diǎn)需前端校準(zhǔn),用getTime()比較,到達(dá)時(shí)觸發(fā)操作,異步API請求可用async/await處理,setInterval實(shí)現(xiàn)定時(shí)監(jiān)控,配合條件判斷防止重復(fù)請求

1. 基本知識(shí)

這一類的時(shí)間點(diǎn)是因數(shù)據(jù)而異，所以定時(shí)任務(wù)不適用，需要前端表格自身數(shù)據(jù)到達(dá)之后去觸發(fā)

往下的數(shù)據(jù)多數(shù)結(jié)合自身實(shí)戰(zhàn)代碼的一個(gè)總結(jié)

表格數(shù)據(jù)渲染

在 Vue 3 中使用 el-table 組件來展示表格數(shù)據(jù)，表格中的每一行數(shù)據(jù)通過列組件 el-table-column 來指定展示的內(nèi)容
在表格中通過 prop 綁定數(shù)據(jù)字段，label 用于展示列的名稱

<el-table :data="tableData">
  <el-table-column label="還柜時(shí)間" prop="appointmentEndTime" />
  <el-table-column label="操作" />
</el-table>

tableData 是一個(gè)數(shù)組或?qū)ο箢愋偷臄?shù)據(jù)源，表格會(huì)根據(jù) prop 屬性將數(shù)據(jù)展示到表格列中

時(shí)間格式化與校準(zhǔn)
在前端場景中，經(jīng)常需要格式化時(shí)間來便于展示或進(jìn)行邏輯判斷

比如Date 對象的 getTime() 方法獲取時(shí)間戳，用于比較某一時(shí)間點(diǎn)是否到達(dá)

const currentTime = new Date().getTime() // 獲取當(dāng)前時(shí)間的時(shí)間戳
const appointmentTime = new Date(item.appointmentEndTime).getTime() // 獲取預(yù)約時(shí)間的時(shí)間戳

這有助于處理時(shí)間相關(guān)的業(yè)務(wù)邏輯，比如：在到達(dá)某個(gè)時(shí)間點(diǎn)時(shí)觸發(fā)某種操作

異步 API 請求
在時(shí)間到達(dá)時(shí)，通過前端代碼自動(dòng)觸發(fā)后端 API 請求

在 Vue 3 中，常見的異步請求是使用 async/await 或 .then/.catch 來處理請求的成功和失敗

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

這個(gè)場景適合動(dòng)態(tài)刪除數(shù)據(jù)庫中的數(shù)據(jù)，或是其他需要時(shí)間精確觸發(fā)的操作

定時(shí)器與實(shí)時(shí)監(jiān)控
使用 setInterval 方法可以實(shí)現(xiàn)定時(shí)任務(wù)，會(huì)每隔指定的時(shí)間執(zhí)行一次回調(diào)函數(shù)

這個(gè)方法常用于實(shí)時(shí)檢查某些條件是否滿足，例如檢查表格中某個(gè)時(shí)間是否已經(jīng)到達(dá)當(dāng)前時(shí)間

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

通過這種方式可以實(shí)現(xiàn)實(shí)時(shí)監(jiān)控某個(gè)數(shù)據(jù)的變化，達(dá)到特定條件時(shí)，自動(dòng)觸發(fā)相關(guān)操作

條件判斷與防止多次請求
為避免多次觸發(fā)請求，必須明確條件
通常會(huì)檢查某個(gè)數(shù)據(jù)是否為空，或時(shí)間差是否符合條件

例如：當(dāng) appointmentEndTime 不為 null 且時(shí)間差在 1 秒內(nèi)時(shí)，觸發(fā)請求（時(shí)間上用等于不合適，因?yàn)楹撩爰墑e很難會(huì)以等于作判定）

if (appointmentTime - currentTime <= 1000 && appointmentTime >= currentTime) {
  // 觸發(fā)后端請求
}

2. Demo

以下的Demo和邏輯比較通用！

Demo 1: 刪除過期預(yù)約（自身實(shí)戰(zhàn)代碼）

場景：自動(dòng)刪除超過還柜時(shí)間的預(yù)約

表格渲染：通過 el-table 渲染表格，展示每一行的預(yù)約時(shí)間
時(shí)間檢查：每秒檢查表格中的時(shí)間列，當(dāng)?shù)竭_(dá)還柜時(shí)間時(shí)，自動(dòng)刪除對應(yīng)數(shù)據(jù)

<template>
  <el-table :data="Object.values(tableData)">
    <el-table-column label="還柜時(shí)間" 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: 即將到期商品提醒

場景：在商品即將到期時(shí)發(fā)送提醒請求

時(shí)間邏輯：這里將檢查時(shí)間差設(shè)置為 1 小時(shí)（3600000 毫秒），即只有在商品到期時(shí)間的一小時(shí)內(nèi)才會(huì)觸發(fā)提醒請求
后端請求：當(dāng)時(shí)間滿足條件時(shí)，觸發(fā)提醒請求，向用戶發(fā)送即將到期的通知

<template>
  <el-table :data="Object.values(productList)">
    <el-table-column label="到期時(shí)間" 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小時(shí)內(nèi)
        await ProductApi.sendReminder(item.id)
      }
    }
  })
}
onMounted(() => {
  setInterval(() => {
    checkExpirationTimes()
  }, 60000) // 每分鐘檢查一次
})
</script>

Demo 3: 會(huì)議提醒系統(tǒng)

場景：自動(dòng)提醒用戶即將開始的會(huì)議

邏輯設(shè)定：會(huì)議開始前 10 分鐘發(fā)送提醒，通過 setInterval 每分鐘檢查會(huì)議列表
API 觸發(fā)：當(dāng)時(shí)間差小于 10 分鐘時(shí)，通過 API 發(fā)送提醒

<template>
  <el-table :data="Object.values(meetingList)">
    <el-table-column label="會(huì)議開始時(shí)間" 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分鐘內(nèi)
        await MeetingApi.sendMeetingReminder(item.id)
      }
    }
  })
}
onMounted(() => {
  setInterval(() => {
    checkMeetingTimes()
  }, 60000) // 每分鐘檢查一次
})
</script>

到此這篇關(guān)于Vue 3 表格時(shí)間監(jiān)控與動(dòng)態(tài)后端請求觸發(fā)詳解（附Demo）的文章就介紹到這了,更多相關(guān)Vue 3 表格時(shí)間監(jiān)控內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: