快捷導(dǎo)航

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

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

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

1. 基本知識

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

往下的數(shù)據(jù)多數(shù)結(jié)合自身實戰(zhàn)代碼的一個總結(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="還柜時間" prop="appointmentEndTime" />
  <el-table-column label="操作" />
</el-table>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例如：當(dāng) appointmentEndTime 不為 null 且時間差在 1 秒內(nèi)時，觸發(fā)請求（時間上用等于不合適，因為毫秒級別很難會以等于作判定）

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

2. Demo

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

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

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

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

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

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

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

<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小時內(nèi)
        await ProductApi.sendReminder(item.id)
      }
    }
  })
}
onMounted(() => {
  setInterval(() => {
    checkExpirationTimes()
  }, 60000) // 每分鐘檢查一次
})
</script>

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

場景：自動提醒用戶即將開始的會議

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

<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分鐘內(nèi)
        await MeetingApi.sendMeetingReminder(item.id)
      }
    }
  })
}
onMounted(() => {
  setInterval(() => {
    checkMeetingTimes()
  }, 60000) // 每分鐘檢查一次
})
</script>

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

您可能感興趣的文章: