vue使用cron表达式以及解析cron表达式

项目场景：

业务需求：设置数据的采集频率，使用到cron表达式来定义任务执行的时间和频率。

<template>
  <el-dialog
    title="采集频率设置"
    :visible.sync="dialogVisible"
    width="22%"
    :before-close="handleClose"
  >
    <div class="radio-box">
      <div>
        <el-radio v-model="taskCronChoose" label="none" @input="changeRadio"
          >暂不设置</el-radio
        >
      </div>
      <div>
        <el-radio v-model="taskCronChoose" label="once" @input="changeRadio"
          >运行一次</el-radio
        >
      </div>
      <div>
        <el-radio v-model="taskCronChoose" label="daily" @input="changeRadio"
          >每天</el-radio
        >
        <el-time-picker
          v-model="dailyTime"
          placeholder="选择时间"
          size="small"
          :disabled="taskCronChoose != 'daily'"
        >
        </el-time-picker>
      </div>
      <div>
        <el-radio v-model="taskCronChoose" label="monthly" @input="changeRadio"
          >每月</el-radio
        >
        <el-select
          v-model="monthlyDate"
          placeholder=""
          style="width: 80px"
          size="small"
          :disabled="taskCronChoose != 'monthly'"
        >
          <el-option v-for="item in 31" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
        <span style="margin: 0px 10px 0px 2px">日</span>
        <el-time-picker
          style="width: 160px"
          v-model="monthlyTime"
          placeholder="选择时间"
          size="small"
          :disabled="taskCronChoose != 'monthly'"
        >
        </el-time-picker>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="medium" @click="setTaskCron"
        >确 定</el-button
      >
      <el-button @click="handleClose" size="medium">取 消</el-button>
    </span>
  </el-dialog>
</template>

---

生成cron表达式

它通过一个字符串来定义任务执行的时间和频率，格式通常由5到7个部分组成，每个部分代表不同的时间单位，如‌秒、分、时、‌日、‌月、‌星期等。

每30秒触发任务："30 * * * * ?"

每小时的6分30秒触发任务："30 6 * * * ?"

每天16点08分59秒触发任务："59 8 16 * * ?"

每月7号16点10分07秒触发任务："7 10 16 7 * ?"

每年9月12号17点41分30秒触发任务："30 41 17 12 9 ? *" 等等

1、因为需要设置的频率较简单就自定义方法，复杂的Cron 表达式可以使用cron插件：

 根据选定的频率和时间生成对应的 Cron 表达式

generateCronExpression(frequency, selectedTime, monthlyDate) {
      let cronExpression = "";
      if (frequency === "none") {
        // 暂不设置
        cronExpression = "";
      } else if (frequency === "once") {
        // 一次运行的逻辑
        cronExpression = "";
      } else if (frequency === "daily") {
        // 每天运行的逻辑，根据选定的时间生成 Cron 表达式
        if (selectedTime) {
          cronExpression =
            selectedTime.getSeconds() +
            " " +
            selectedTime.getMinutes() +
            " " +
            selectedTime.getHours() +
            " * * ?";
        }
      } else if (frequency === "monthly") {
        // 每月运行的逻辑，根据选定的日期（monthlyDate）和时间生成 Cron 表达式 
        if (selectedTime) {
          cronExpression =
            selectedTime.getSeconds() +
            " " +
            selectedTime.getMinutes() +
            " " +
            selectedTime.getHours() +
            " " +
            monthlyDate +
            " * ?";
        }
      }
      return cronExpression;
    },

---

使用cron-parser解析cron表达式

它是一个用于解析和生成cron表达式的JavaScript库。用来将Cron 格式的时间表达式 解析为 JavaScript 的 Date 对象

1、安装 cron-parser 库：

        npm install cron-parser

2、在需要使用的文件中引入：

        import cronParser from 'cron-parser';

configParams(taskCron) {
      const options = {
        currentDate: new Date(), // 使用当前日期作为参考日期
        iterator: true, // 表示要返回一个迭代器对象，以便逐步获取下一个满足条件的日期时间
      };
      // 该方法用于解析 Cron 表达式并返回一个表示时间表达式的对象
      const interval = cronParser.parseExpression(
        taskCron, // 传入的 Cron 表达式，描述了定时任务的调度规则
        options // 包含了当前日期和迭代器设置，用于解析 Cron 表达式。
      );
      return interval.next().value; // 返回下一个满足 Cron 表达式条件的日期时间
    },

---