定时任务与cron表达式

最新推荐文章于 2024-08-08 08:28:40 发布
最新推荐文章于 2024-08-08 08:28:40 发布
阅读量597 收藏 3
点赞数
分类专栏： # Vue+Element+... 所遇问题，小记 文章标签： 定时任务与cron表达式 cron表达式 定时任务 cron表达式的? cron的通配符
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddx2019/article/details/110231950
版权

文章目录


cronValue: "0/5 * * * * ? * " cronValue中是cron表达式的值，每五秒执行一次

一、封装cron表达式组件 cronModal.vue

UI组件库：ElementUI vue+element 的项目中：

cronModal.vue

<template>
  <div class="cron-modal">
    <el-dialog
      class="comn_dialog"
      title="cron表达式"
      :visible.sync="visible"
      width="650px"
      top="12vh"
    >
      <div class="cron-modal_container">
        <el-tabs type="border-card">
          <el-tab-pane label="1">
            <span slot="label"><i class="el-icon-date"></i> 秒</span>
            <el-radio-group v-model="result.second.cronEvery">
              <el-row class="radio-row">
                <el-radio label="1">每一秒钟</el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="2">
                  每隔
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.second.incrementIncrement"
                    :min="1"
                    :max="59"
                  ></el-input>
                  秒执行
                  <span style="margin-left:10px;">从</span>
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.second.incrementStart"
                    :min="0"
                    :max="59"
                  ></el-input>
                  秒开始
                </el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="3">具体秒数(可多选)</el-radio>
                <el-select
                  class="gap_left"
                  size="mini"
                  multiple
                  v-model="result.second.specificSpecific"
                >
                  <el-option
                    v-for="(val, index) in 60"
                    :key="index"
                    :value="index"
                    :label="index"
                  ></el-option>
                </el-select>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="4"
                  >周期从
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.second.rangeStart"
                    :min="1"
                    :max="59"
                  ></el-input>
                  到
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.second.rangeEnd"
                    :min="0"
                    :max="59"
                  ></el-input>
                  秒
                </el-radio>
              </el-row>
            </el-radio-group>
          </el-tab-pane>
          <el-tab-pane label="2">
            <span slot="label"><i class="el-icon-date"></i> 分</span>

            <el-radio-group v-model="result.minute.cronEvery">
              <el-row class="radio-row">
                <el-radio label="1">每一分钟</el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="2"
                  >每隔
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.minute.incrementIncrement"
                    :min="1"
                    :max="60"
                  ></el-input>
                  分执行 <span style="margin-left:15px;">从</span>
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.minute.incrementStart"
                    :min="0"
                    :max="59"
                  ></el-input>
                  分开始
                </el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="3">具体分钟数(可多选)</el-radio>
                <el-select
                  class="gap_left"
                  style="width:250px;"
                  size="mini"
                  multiple
                  v-model="result.minute.specificSpecific"
                >
                  <el-option
                    v-for="(val, index) in 60"
                    :key="index"
                    :value="index"
                    :label="index"
                  >
                  </el-option>
                </el-select>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="4"
                  >周期从
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.minute.rangeStart"
                    :min="1"
                    :max="60"
                  ></el-input>
                  到
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.minute.rangeEnd"
                    :min="0"
                    :max="59"
                  ></el-input>
                  分
                </el-radio>
              </el-row>
            </el-radio-group>
          </el-tab-pane>
          <el-tab-pane label="3">
            <span slot="label"><i class="el-icon-date"></i> 时</span>

            <el-radio-group v-model="result.hour.cronEvery">
              <el-row class="radio-row">
                <el-radio label="1">每一小时</el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="2"
                  >每隔
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.hour.incrementIncrement"
                    :min="0"
                    :max="23"
                  ></el-input>
                  小时执行 从
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.hour.incrementStart"
                    :min="0"
                    :max="23"
                  ></el-input>
                  小时开始
                </el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="3">具体小时数(可多选)</el-radio>
                <el-select
                  class="gap_left"
                  style="width:250px;"
                  size="mini"
                  multiple
                  v-model="result.hour.specificSpecific"
                >
                  <el-option
                    v-for="(val, index) in 24"
                    :key="index"
                    :value="index"
                    :label="index"
                  ></el-option>
                </el-select>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="4"
                  >周期从
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.hour.rangeStart"
                    :min="0"
                    :max="23"
                  ></el-input>
                  到
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.hour.rangeEnd"
                    :min="0"
                    :max="23"
                  ></el-input>
                  小时
                </el-radio>
              </el-row>
            </el-radio-group>
          </el-tab-pane>
          <el-tab-pane label="4">
            <span slot="label"><i class="el-icon-date"></i> 天</span>

            <el-radio-group v-model="result.day.cronEvery">
              <el-row class="radio-row">
                <el-radio label="1">每一天</el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="2"
                  >每隔
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.week.incrementIncrement"
                    :min="1"
                    :max="7"
                  ></el-input>
                  周执行 从
                  <el-select
                    class="gap_left"
                    size="mini"
                    v-model="result.week.incrementStart"
                  >
                    <el-option
                      v-for="(val, index) in 7"
                      :key="index"
                      :value="index + 1"
                      :label="weekDays[index]"
                    ></el-option>
                  </el-select>
                  开始
                </el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="3"
                  >每隔
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.day.incrementIncrement"
                    :min="1"
                    :max="31"
                  ></el-input>
                  天执行 从
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.day.incrementStart"
                    :min="1"
                    :max="31"
                  ></el-input>
                  天开始
                </el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="4">具体星期几(可多选)</el-radio>
                <el-select
                  class="gap_left"
                  style="width:250px;"
                  size="mini"
                  multiple
                  v-model="result.week.specificSpecific"
                >
                  <el-option
                    v-for="(val, index) in 7"
                    :key="index"
                    :value="index + 1"
                    :label="weekDays[index]"
                  ></el-option>
                </el-select>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="5">具体天数(可多选)</el-radio>
                <el-select
                  class="gap_left"
                  style="width:250px;"
                  size="mini"
                  multiple
                  v-model="result.day.specificSpecific"
                >
                  <el-option
                    v-for="(val, index) in 31"
                    :key="index"
                    :value="index + 1"
                    :label="index + 1"
                  ></el-option>
                </el-select>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="6">在这个月的最后一天</el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="7">在这个月的最后一个工作日</el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="8"
                  >在这个月的最后一个
                  <el-select
                    class="gap_left"
                    size="mini"
                    v-model="result.day.cronLastSpecificDomDay"
                  >
                    <el-option
                      v-for="(val, index) in 7"
                      :key="index"
                      :value="index + 1"
                      :label="weekDays[index]"
                    ></el-option>
                  </el-select>
                </el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="9">
                  在本月底前
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.day.cronDaysBeforeEomMinus"
                    :min="1"
                    :max="31"
                  ></el-input>
                  天
                </el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="10"
                  >最近的工作日（周一至周五）至本月
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.day.cronDaysNearestWeekday"
                    :min="1"
                    :max="31"
                  ></el-input>
                  日
                </el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="11"
                  >在这个月的第
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.week.cronNthDayNth"
                    :min="1"
                    :max="5"
                  ></el-input>
                  个
                  <el-select
                    class="gap_left"
                    size="mini"
                    v-model="result.week.cronNthDayDay"
                  >
                    <el-option
                      v-for="(val, index) in 7"
                      :key="index"
                      :value="index + 1"
                      :label="weekDays[index]"
                    ></el-option>
                  </el-select>
                </el-radio>
              </el-row>
            </el-radio-group>
          </el-tab-pane>
          <el-tab-pane label="5">
            <span slot="label"><i class="el-icon-date"></i> 月</span>

            <el-radio-group v-model="result.month.cronEvery">
              <el-row class="radio-row">
                <el-radio label="1">每一月</el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="2"
                  >每隔
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.month.incrementIncrement"
                    :min="0"
                    :max="12"
                  ></el-input>
                  月执行 从
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.month.incrementStart"
                    :min="0"
                    :max="12"
                  ></el-input>
                  月开始
                </el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="3">具体月数(可多选)</el-radio>
                <el-select
                  class="gap_left"
                  style="width:250px;"
                  size="mini"
                  multiple
                  v-model="result.month.specificSpecific"
                >
                  <el-option
                    v-for="(val, index) in 12"
                    :key="index"
                    :value="index + 1"
                    :label="index + 1"
                  ></el-option>
                </el-select>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="4"
                  >从
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.month.rangeStart"
                    :min="1"
                    :max="12"
                  ></el-input>
                  到
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.month.rangeEnd"
                    :min="1"
                    :max="12"
                  ></el-input>
                  月之间的每个月
                </el-radio>
              </el-row>
            </el-radio-group>
          </el-tab-pane>
          <el-tab-pane label="6">
            <span slot="label"><i class="el-icon-date"></i> 年</span>

            <el-radio-group v-model="result.year.cronEvery">
              <el-row class="radio-row">
                <el-radio label="1">每一年</el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="2"
                  >每隔
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.year.incrementIncrement"
                    :min="1"
                    :max="99"
                  ></el-input>
                  年执行 从
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.year.incrementStart"
                    :min="2020"
                    :max="2099"
                  ></el-input>
                  年开始
                </el-radio>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="3">具体年份(可多选)</el-radio>
                <el-select
                  class="gap_left"
                  style="width:250px;"
                  size="mini"
                  multiple
                  v-model="result.year.specificSpecific"
                >
                  <el-option
                    v-for="(val, index) in 100"
                    :key="index"
                    :value="2020 + index"
                    :label="2020 + index"
                  ></el-option>
                </el-select>
              </el-row>
              <el-row class="radio-row">
                <el-radio label="4"
                  >从
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.year.rangeStart"
                    :min="2020"
                    :max="2099"
                  ></el-input>
                  到
                  <el-input
                    class="input_from"
                    type="number"
                    size="mini"
                    v-model="result.year.rangeEnd"
                    :min="2020"
                    :max="2099"
                  ></el-input>
                  年之间的每一年
                </el-radio>
              </el-row>
            </el-radio-group>
          </el-tab-pane>
        </el-tabs>
        <div class="cron-value">
          {{ cronStr }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="Save">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    cronValue: {
      type: String,
      default() {
        return "* * * * * ? *"; // 默认选中每一个radio-group的第一项
      }
    },
    cronVisible: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      size: "large",
      weekDays: ["天", "一", "二", "三", "四", "五", "六"].map(
        val => "星期" + val
      ),
      result: {
        second: {},
        minute: {},
        hour: {},
        day: {},
        week: {},
        month: {},
        year: {}
      },
      defaultValue: {
        second: {
          cronEvery: "",
          incrementStart: 3,
          incrementIncrement: 5,
          rangeStart: 1,
          rangeEnd: 0,
          specificSpecific: []
        },
        minute: {
          cronEvery: "",
          incrementStart: 3,
          incrementIncrement: 5,
          rangeStart: 1,
          rangeEnd: "0",
          specificSpecific: []
        },
        hour: {
          cronEvery: "",
          incrementStart: 3,
          incrementIncrement: 5,
          rangeStart: "0",
          rangeEnd: "0",
          specificSpecific: []
        },
        day: {
          cronEvery: "",
          incrementStart: 1,
          incrementIncrement: "1",
          rangeStart: "",
          rangeEnd: "",
          specificSpecific: [],
          cronLastSpecificDomDay: 1,
          cronDaysBeforeEomMinus: 1,
          cronDaysNearestWeekday: 1
        },
        week: {
          cronEvery: "",
          incrementStart: 1,
          incrementIncrement: 1,
          specificSpecific: [],
          cronNthDayDay: 1,
          cronNthDayNth: 1
        },
        month: {
          cronEvery: "",
          incrementStart: 3,
          incrementIncrement: 5,
          rangeStart: 1,
          rangeEnd: 1,
          specificSpecific: []
        },
        year: {
          cronEvery: "",
          incrementStart: 2017,
          incrementIncrement: 1,
          rangeStart: 2020,
          rangeEnd: 2020,
          specificSpecific: []
        },
        label: ""
      }
    };
  },
  computed: {
    visible: {
      get() {
        return this.cronVisible;
      },
      set(val) {
        this.$emit("updateCornVisible", val);
      }
    },
    secondsText() {
      let seconds = "";
      let cronEvery = this.result.second.cronEvery || "";
      switch (cronEvery.toString()) {
        case "1":
          seconds = "*";
          break;
        case "2":
          seconds =
            this.result.second.incrementStart +
            "/" +
            this.result.second.incrementIncrement;
          break;
        case "3":
          this.result.second.specificSpecific.map(val => {
            seconds += val + ",";
          });
          seconds = seconds.slice(0, -1);
          break;
        case "4":
          seconds =
            this.result.second.rangeStart + "-" + this.result.second.rangeEnd;
          break;
      }
      return seconds;
    },
    minutesText() {
      let minutes = "";
      let cronEvery = this.result.minute.cronEvery || "";
      switch (cronEvery.toString()) {
        case "1":
          minutes = "*";
          break;
        case "2":
          minutes =
            this.result.minute.incrementStart +
            "/" +
            this.result.minute.incrementIncrement;
          break;
        case "3":
          this.result.minute.specificSpecific.map(val => {
            minutes += val + ",";
          });
          minutes = minutes.slice(0, -1);
          break;
        case "4":
          minutes =
            this.result.minute.rangeStart + "-" + this.result.minute.rangeEnd;
          break;
      }
      return minutes;
    },
    hoursText() {
      let hours = "";
      let cronEvery = this.result.hour.cronEvery || "";
      switch (cronEvery.toString()) {
        case "1":
          hours = "*";
          break;
        case "2":
          hours =
            this.result.hour.incrementStart +
            "/" +
            this.result.hour.incrementIncrement;
          break;
        case "3":
          this.result.hour.specificSpecific.map(val => {
            hours += val + ",";
          });
          hours = hours.slice(0, -1);
          break;
        case "4":
          hours = this.result.hour.rangeStart + "-" + this.result.hour.rangeEnd;
          break;
      }
      return hours;
    },
    daysText() {
      let days = "";
      let cronEvery = this.result.day.cronEvery || "";
      switch (cronEvery.toString()) {
        case "1":
          break;
        case "2":
        case "4":
        case "11":
          days = "?";
          break;
        case "3":
          days =
            this.result.day.incrementStart +
            "/" +
            this.result.day.incrementIncrement;
          break;
        case "5":
          this.result.day.specificSpecific.map(val => {
            days += val + ",";
          });
          days = days.slice(0, -1);
          break;
        case "6":
          days = "L";
          break;
        case "7":
          days = "LW";
          break;
        case "8":
          days = this.result.day.cronLastSpecificDomDay + "L";
          break;
        case "9":
          days = "L-" + this.result.day.cronDaysBeforeEomMinus;
          break;
        case "10":
          days = this.result.day.cronDaysNearestWeekday + "W";
          break;
      }
      return days;
    },
    weeksText() {
      let weeks = "";
      let cronEvery = this.result.day.cronEvery || "";
      switch (cronEvery.toString()) {
        case "1":
        case "3":
        case "5":
          weeks = "?";
          break;
        case "2":
          weeks =
            this.result.week.incrementStart +
            "/" +
            this.result.week.incrementIncrement;
          break;
        case "4":
          this.result.week.specificSpecific.map(val => {
            weeks += val + ",";
          });
          weeks = weeks.slice(0, -1);
          break;
        case "6":
        case "7":
        case "8":
        case "9":
        case "10":
          weeks = "?";
          break;
        case "11":
          weeks =
            this.result.week.cronNthDayDay +
            "#" +
            this.result.week.cronNthDayNth;
          break;
      }
      return weeks;
    },
    monthsText() {
      let months = "";
      let cronEvery = this.result.month.cronEvery || "";
      switch (cronEvery.toString()) {
        case "1":
          months = "*";
          break;
        case "2":
          months =
            this.result.month.incrementStart +
            "/" +
            this.result.month.incrementIncrement;
          break;
        case "3":
          this.result.month.specificSpecific.map(val => {
            months += val + ",";
          });
          months = months.slice(0, -1);
          break;
        case "4":
          months =
            this.result.month.rangeStart + "-" + this.result.month.rangeEnd;
          break;
      }
      return months;
    },
    yearsText() {
      let years = "";
      let cronEvery = this.result.year.cronEvery || "";
      switch (cronEvery.toString()) {
        case "1":
          years = "*";
          break;
        case "2":
          years =
            this.result.year.incrementStart +
            "/" +
            this.result.year.incrementIncrement;
          break;
        case "3":
          this.result.year.specificSpecific.map(val => {
            years += val + ",";
          });
          years = years.slice(0, -1);
          break;
        case "4":
          years = this.result.year.rangeStart + "-" + this.result.year.rangeEnd;
          break;
      }
      return years;
    },
    cronStr() {
      return `${this.secondsText || "*"} ${this.minutesText || "*"} ${this
        .hoursText || "*"} ${this.daysText || "*"} ${this.monthsText ||
        "*"} ${this.weeksText || "?"} ${this.yearsText || "*"}`;
    }
  },
  watch: {
    visible: {
      handler() {
        let label = this.cronValue;
        if (label) {
          this.secondsReverseExp(label);
          this.minutesReverseExp(label);
          this.hoursReverseExp(label);
          this.daysReverseExp(label);
          this.daysReverseExp(label);
          this.monthsReverseExp(label);
          this.yearReverseExp(label);
          JSON.parse(JSON.stringify(label));
        } else {
          this.result = JSON.parse(JSON.stringify(this.defaultValue));
        }
      }
    }
  },
  methods: {
    Cancel() {
      this.$emit("resetCornPopup");
    },
    Save() {
      this.$emit("submitCornPopup", this.cronStr);
    },
    secondsReverseExp(seconds) {
      let val = seconds.split(" ")[0];
      let second = {
        cronEvery: "",
        incrementStart: 3,
        incrementIncrement: 5,
        rangeStart: 1,
        rangeEnd: 0,
        specificSpecific: []
      };
      switch (true) {
        case val.includes("*"):
          second.cronEvery = "1";
          break;
        case val.includes("/"):
          second.cronEvery = "2";
          second.incrementStart = val.split("/")[0];
          second.incrementIncrement = val.split("/")[1];
          break;
        case val.includes(","):
          second.cronEvery = "3";
          second.specificSpecific = val
            .split(",")
            .map(Number)
            .sort();
          break;
        case val.includes("-"):
          second.cronEvery = "4";
          second.rangeStart = val.split("-")[0];
          second.rangeEnd = val.split("-")[1];
          break;
        default:
          second.cronEvery = "1";
      }
      this.result.second = second;
    },
    minutesReverseExp(minutes) {
      let val = minutes.split(" ")[1];
      let minute = {
        cronEvery: "",
        incrementStart: 3,
        incrementIncrement: 5,
        rangeStart: 1,
        rangeEnd: 0,
        specificSpecific: []
      };
      switch (true) {
        case val.includes("*"):
          minute.cronEvery = "1";
          break;
        case val.includes("/"):
          minute.cronEvery = "2";
          minute.incrementStart = val.split("/")[0];
          minute.incrementIncrement = val.split("/")[1];
          break;
        case val.includes(","):
          minute.cronEvery = "3";
          minute.specificSpecific = val
            .split(",")
            .map(Number)
            .sort();
          break;
        case val.includes("-"):
          minute.cronEvery = "4";
          minute.rangeStart = val.split("-")[0];
          minute.rangeEnd = val.split("-")[1];
          break;
        default:
          minute.cronEvery = "1";
      }
      this.result.minute = minute;
    },
    hoursReverseExp(hours) {
      let val = hours.split(" ")[2];
      let hour = {
        cronEvery: "",
        incrementStart: 3,
        incrementIncrement: 5,
        rangeStart: 1,
        rangeEnd: "0",
        specificSpecific: []
      };
      switch (true) {
        case val.includes("*"):
          hour.cronEvery = "1";
          break;
        case val.includes("/"):
          hour.cronEvery = "2";
          hour.incrementStart = val.split("/")[0];
          hour.incrementIncrement = val.split("/")[1];
          break;
        case val.includes(","):
          hour.cronEvery = "3";
          hour.specificSpecific = val
            .split(",")
            .map(Number)
            .sort();
          break;
        case val.includes("-"):
          hour.cronEvery = "4";
          hour.rangeStart = val.split("-")[0];
          hour.rangeEnd = val.split("-")[1];
          break;
        default:
          hour.cronEvery = "1";
      }
      this.result.hour = hour;
    },
    daysReverseExp(cron) {
      let days = cron.split(" ")[3];
      let weeks = cron.split(" ")[5];
      let day = {
        cronEvery: "",
        incrementStart: 1,
        incrementIncrement: 1,
        rangeStart: 1,
        rangeEnd: 1,
        specificSpecific: [],
        cronLastSpecificDomDay: 1,
        cronDaysBeforeEomMinus: 1,
        cronDaysNearestWeekday: 1
      };
      let week = {
        cronEvery: "",
        incrementStart: 1,
        incrementIncrement: 1,
        specificSpecific: [],
        cronNthDayDay: 1,
        cronNthDayNth: "1"
      };
      if (!days.includes("?")) {
        switch (true) {
          case days.includes("*"):
            day.cronEvery = "1";
            break;
          case days.includes("?"):
            // 2、4、11
            break;
          case days.includes("/"):
            day.cronEvery = "3";
            day.incrementStart = days.split("/")[0];
            day.incrementIncrement = days.split("/")[1];
            break;
          case days.includes(","):
            day.cronEvery = "5";
            day.specificSpecific = days
              .split(",")
              .map(Number)
              .sort();
            // day.specificSpecific.forEach(function (value, index) {
            //   day.specificSpecific[index] = value -1;
            // });
            break;
          case days.includes("LW"):
            day.cronEvery = "7";
            break;
          case days.includes("L-"):
            day.cronEvery = "9";
            day.cronDaysBeforeEomMinus = days.split("L-")[1];
            break;
          case days.includes("L"):
            if (days.len == 1) {
              day.cronEvery = "6";
              day.cronLastSpecificDomDay = "1";
            } else {
              day.cronEvery = "8";
              day.cronLastSpecificDomDay = Number(days.split("L")[0]);
            }
            break;
          case days.includes("W"):
            day.cronEvery = "10";
            day.cronDaysNearestWeekday = days.split("W")[0];
            break;
          default:
            day.cronEvery = "1";
        }
      } else {
        switch (true) {
          case weeks.includes("/"):
            day.cronEvery = "2";
            week.incrementStart = weeks.split("/")[0];
            week.incrementIncrement = weeks.split("/")[1];
            break;
          case weeks.includes(","):
            day.cronEvery = "4";
            week.specificSpecific = weeks
              .split(",")
              .map(Number)
              .sort();
            break;
          case "#":
            day.cronEvery = "11";
            week.cronNthDayDay = weeks.split("#")[0];
            week.cronNthDayNth = weeks.split("#")[1];
            break;
          default:
            day.cronEvery = "1";
            week.cronEvery = "1";
        }
      }
      this.result.day = day;
      this.result.week = week;
    },
    monthsReverseExp(cron) {
      let months = cron.split(" ")[4];
      let month = {
        cronEvery: "",
        incrementStart: 3,
        incrementIncrement: 5,
        rangeStart: 1,
        rangeEnd: 1,
        specificSpecific: []
      };
      switch (true) {
        case months.includes("*"):
          month.cronEvery = "1";
          break;
        case months.includes("/"):
          month.cronEvery = "2";
          month.incrementStart = months.split("/")[0];
          month.incrementIncrement = months.split("/")[1];
          break;
        case months.includes(","):
          month.cronEvery = "3";
          month.specificSpecific = months
            .split(",")
            .map(Number)
            .sort();
          break;
        case months.includes("-"):
          month.cronEvery = "4";
          month.rangeStart = months.split("-")[0];
          month.rangeEnd = months.split("-")[1];
          break;
        default:
          month.cronEvery = "1";
      }
      this.result.month = month;
    },
    yearReverseExp(cron) {
      let years = cron.split(" ")[6];
      let year = {
        cronEvery: "",
        incrementStart: 3,
        incrementIncrement: 5,
        rangeStart: 2020,
        rangeEnd: 2020,
        specificSpecific: []
      };
      switch (true) {
        case years.includes("*"):
          year.cronEvery = "1";
          break;
        case years.includes("/"):
          year.cronEvery = "2";
          year.incrementStart = years.split("/")[0];
          year.incrementIncrement = years.split("/")[1];
          break;
        case years.includes(","):
          year.cronEvery = "3";
          year.specificSpecific = years
            .split(",")
            .map(Number)
            .sort();
          break;
        case years.includes("-"):
          year.cronEvery = "4";
          year.rangeStart = years.split("-")[0];
          year.rangeEnd = years.split("-")[1];
          break;
        default:
          year.cronEvery = "1";
      }
      this.result.year = year;
    }
  }
};
</script>
<style lang="scss">
.cron-modal {
  .radio-row {
    margin-top: 12px;
  }
  .input_from,
  .input_to {
    width: 150px;
    margin: 0 6px 0 6px;
  }
  .gap_left {
    margin-left: 16px;
  }
  .cron-value {
    text-align: center;
    margin-top: 20px;
    color: #006fb6;
    font-size: 18px;
    font-weight: 600;
  }
  .cron-modal_container {
    padding: 30px;
  }
}
</style>

二、引入并使用刚刚封装的cronModal.vue组件

Test.vue

<template>
  <div class="test">
    <el-input
      type="text"
      v-model="FormInPopup.cronExpression"
      autocomplete="off"
      class="cron-value_input"
      @input="showCronModal"
    >
      <el-button
        slot="append"
        @click="showCronModal"
        class="el-icon-more"
        title="设置cron表达式"
      >
      </el-button>
    </el-input>
    <cron-modal
      :cronValue="cronValue"
      :cronVisible="cronVisible"
      @resetCornPopup="resetCornPopup"
      @submitCornPopup="submitCornPopup"
      @updateCornVisible="updateCornVisible"
    ></cron-modal>
  </div>
</template>
<script>
import cronModal from "@/views/task/modules/cronModal.vue";
export default {
  components: {
    cronModal
  },
  data() {
    return {
      FormInPopup: {
        cronExpression: "0/5 * * * * ? *"
      },
      cronVisible: false, // cron表达式弹框
      cronValue: "0/5 * * * * ? *" // cron的初始值, 如 0/5 * * * * ? * 表示每隔5秒运行一次
    };
  },
  methods: {
    updateCornVisible(val) {
      this.cronVisible = val;
    },
    showCronModal() {
      // 打开cron表达式的弹框
      this.cronVisible = true;
      this.cronValue = this.FormInPopup["cronExpression"];
    },
    resetCornPopup() {
      this.cronVisible = false;
    },
    submitCornPopup(val) {
      // 提交cron的弹窗
      this.$set(this.FormInPopup, "cronExpression", val);
      this.cronVisible = false;
    }
  }
};
</script>
<style>
.test {
  background: lightblue;
  height: 100vh;
  padding: 50px;
}
.test .cron-value_input {
  width: 300px;
}
</style>

在这里插入图片描述

三、样式预览

  1. vue+element 写的cron表达式，即 上面封装的cronModal.vue组件效果如图：，（弹框样式可忽略,被重写过，需要的参考 博客）

在这里插入图片描述

  1. vue+ant-design-vue 写的cron表达式，参考：jeecg项目,界面如图
    在这里插入图片描述

四、使用场景

项目中，一般使用 cron 表达式来定义定时任务的执行策略，定义你的任务多久执行一次。

可在 在线Cron表达式生成器 测试你的cron表达式是否正确。

该在线工具样式如下：
在这里插入图片描述

五、cron表达式详解

1. cron 表达式的定义

cron 表达式是一个字符串，该字符串由 6 个空格分为 7 个域，每一个域代表一个时间含义。 格式如下：

 [秒] [分] [时] [日] [月] [周] [年]  //  通常定义 “年” 的部分可以省略，实际常用的由 前六部分组成

2. cron各部分定义

域是否必填值以及范围通配符
秒是0-59,-*/
分是0-59,-*/
时是0-23,-*/
日是1-31, - * ? / L W
月是1-12 或 JAN-DEC,-*/
周是1-7 或 SUN-SAT, - * ? / L #
年是1970-2099, - * /

3. cron中的通配符

  • , 表示 都触发； 两个及以上的时间点中间用了逗号合开，表示在这几个时间点中都执行，如5,8表示在第5分第8分都执行该定时任务
  • - 表示在 连续范围内都触发；如1-3 是 “时”这个域，表示1点到3点每小时都触发一次
  • * 表示 所有值，都，‘每’, 如在 ‘秒’ 这个域中表示每一秒触发一次
  • ? 表示 不确定的值，通常也不关心它是什么值， 0/5 * * * * ? * 表示 每5秒执行一次，此时我并不关心今天是周几
  • / 表示在 某个域上，周期性触发；0/5 表示从第0秒开始，每5秒执行一次
  • L 表示 last,只能在 日和周期 中使用；在"日“中，表示本月的最后一天；在”周" 表示周六
  • W 表示 离指定日期最近的那个工作日（周一到周五）触发； 只能在**日**中使用，前面是数字，表示具体的号数，如日设置3W，表示离3号最近的那个工作日，遇到周末，推迟到下周执行。
  • # 表示每个月的第几个周几， 只能作用于 “周”上；如 1#2 表示 每个月的第二个周一。

参考博文

ddx2019
关注
专栏目录
定时任务Cron表达式
fighting_tobe_better的博客
11-13 6406
Cron表达式是一个字符串，字符串以5或6个空格隔开,中间均由空格隔开，分为6或7个域，每一个域代表一个含义，Cron有如下两种语法格式： 1.Seconds Minutes Hours DayofMonth Month DayofWeek Year 2.Seconds Minutes Hours DayofMonth Month DayofWeek 每一个域可出现的字符如下： Seconds:可出现", - * /"四个字符，有效范围为0-59的整数 Minutes:可出现", - * /"...
vue-cron:这是一个cron表达式ui组件
05-02
vue-cron 这是一个cron表达式生成插件,基于vue与element-ui实现 依赖 Vue 2.0.0+ element-ui 2.0.0+ 安装方式 npm install vue-cron 引入方式 //前置配置 import Vue from 'vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI); //全局引入 import VueCron from 'vue-cron' Vue.use(VueCron);//使用方式：<vueCron></vueCron> //局部引入 import {cron} from 'vue-cron' export default { template: '<cron>',
定时任务之 cron 表达式
一颗小白羊
05-26 302
cron 表达式有 6 个或 7 个有空格分隔的元素组成 按顺序依次为: 秒（0 ~ 59） 分钟（0 ~ 59） 小时（0 ~ 23） 天（0 ~ 31） 月（0 ~ 11） 星期（ 1~ 7 ，顺序为SUN, MON, TUE, WED, THU, FRI, SAT） 年份（1970 ~ 2099） 每个元素格式为 一个单独的值（如：1） 一个连续的区间（如：2-4） 一个时间间隔（如：8-18/4 ）（每间隔 4 个小时） 一个列表（1,3,5） 通配符 * " /" 用来指定数值
Spring 定时任务之 @Scheduled cron表达式
superhoy的专栏
09-05 315
cron表达式有至少6个（也可能7个）有空格分隔的时间元素。 按顺序依次为 秒（0~59） 分钟（0~59） 小时（0~23） 天（月）（0~31，但是你需要考虑你月的天数） 月（0~11） 天（星期）（1~7 1=SUN 或 SUN，MON，TUE，WED，THU，FRI，SAT） 7.年份（1970－2099） 其中每个元素可以是一个值
vue-cron: Cron表达式UI组件开发指南
最新发布
gitblog_00809的博客
08-08 1079
vue-cron: Cron表达式UI组件开发指南 项目地址:https://gitcode.com/gh_mirrors/vu/vue-cron 项目介绍 vue-cron 是一个基于Vue框架设计的cron表达式UI组件库. 该项目特别适用于那些需要在前端界面中提供cron表达式编辑功能的应用场景。通过简洁直观的接口，开发者可以轻松地将此组件集成到他们的Vue应用程序中，以实现对定时任务计划的...
Quartz的应用之Cron生成表达式html（基于vue、element）
XiaoY的专栏
08-20 4031
一、先看效果 二、怎么使用 1、引用组件（注意修改文件路径） import CustomCronInput from '../../../components/common/CustomCronInput.vue'; 2、页面使用 <custom-cron-input v-model="cronExpression"></custom-cron-input> 三、源...
定时任务与cron表达式md，学习代码
06-21
【定时任务与cron表达式】是Java开发中的一个重要概念，特别是在服务器端的后台处理和自动化运维中广泛应用。cron表达式是一种强大的时间调度器，源于Unix系统，现在在各种编程语言和操作系统中都有实现，Java也不...
定时任务cron表达式生成.rar
11-25
本压缩包“定时任务cron表达式生成.rar”提供的工具，正是为了帮助开发者更方便地创建和管理这些表达式。 cron表达式是一种字符串格式，由7个子字段组成，每个字段代表不同的时间元素：秒（0-59）、分钟（0-59）、...
定时任务的cron表达式
qq_42839378的博客
12-18 241
Cron表达式 Quartz使用类似于Linux下的Cron表达式定义时间规则，Cron表达式由6或7个由空格分隔的时间字段组成，如表1所示： 位置 时间域名 允许值 允许的特殊字符 1 秒 0-59 , - * / 2 分钟 0-59 , - * / 3 小时 0-23 , - * / 4 日 1-31 , - * / L W C 5 月 1-12 , - * / 6 星期 1-7 ,...
Spring Task深度解析：定时任务与Cron表达式在Java中的应用
虽然Spring官方文档对这些功能有详细的英文描述，但为了帮助非英语背景的开发者更好地理解和使用，本文将重点讲解Spring Task的实现原理、如何使用cron表达式以及通过代码实例演示如何配置和启动定时任务。...
Cron在前端的使用，vue与element ui的vue-cron插件的使用及将定时任务cron表达式解析成中文
世上哪有什么岁月静好,不过是有人替你负重前行
06-06 7071
如图中生成的cron表达式 * * * 1L *?* 是错误的表达式，应为 * * *?在vue页面“style scoped”中通过控制样式去掉秒年。输出：* * *?
android app图标定时变化,安卓-自动定时切换APP图标，节假日APP icon图标自动变化...
weixin_39984578的博客
05-26 287
首先在AndroidManifest中预定义好, 设置好icon，enabble设为false不启用，并指向原有的SplashActivityandroid:name=".SplashAliasActivity"android:enabled="false"android:icon="@mipmap/ic_launcher_spring_festival"android:targetActivit...
CSS自定义滚动条样式
Dwyane、的博客
02-24 363
效果图1： 第一个 CSS: .list { max-height: 300px; overflow-y: auto; &::-webkit-scrollbar { /*滚动条整体样式*/ width : 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
前端Vue3+element-plus表单输入框实现Cron表达式校验
wdm891026的博客
09-21 1600
5、但是由于用户的使用习惯不同，你可能需要开启其他的配置，比如需要支持秒，那就需要设置seconds为true来开启支持，如果设置为false，则保持不支持。下面代码中，列举了四个其他开启配置项，可通过阅读代码中的注释部分来理解。4、使用，上一步从’cron-validator’导入{ isValidCron }，就可以使用isValidCron('* * * * *')进行判断，开发使用框架为vue3+element-plus，于是选择cron-validator依赖。
VUE3+TS和Element-plus实现的Cron表达式组件no-vue3-cron
明天的博客
04-14 3215
VUE3+TS和Element-plus实现的Cron表达式组件no-vue3-cron。
c++任务调度，支持cron表达式
06-29
cron表达式是Unix/Linux系统中广泛使用的定时任务表达方式，用于定义周期性的任务执行时间。 Bosma::Scheduler库的设计可能包含以下几个核心概念： 1. **任务（Task）**：在Bosma::Scheduler中，任务是一个可执行...
把el-element的日期格式改为CRON
肥晨开发的学习之路
05-25 315
在日常的开发当中，经常会遇到格式的不匹配造成的困扰。 在日期管理上，el-element也是贴心的准备了相关的日期选择器，但是在取值的时候发现，el-element所给出的值格式可能并不是我们常用的。 el-element地址：https://element.eleme.cn/#/zh-CN Sat May 29 2021 01:44:01 GMT+0800 (中国标准时间) 我这次正好遇到的...
Element客制化CRON表达式生成组件
itfound的博客
07-21 669
大部分cron插件都不适用非专业人员，配置也比较繁琐，本插件使用通俗易懂的方言来配置cron表达式，虽然做不到特别复杂cron配置，但是满足大部分需求。
Cron表达式
weixin_42948074的博客
06-11 211
Cron表达式是一个字符串，字符串以5或6个空格隔开，分为6或7个域，每一个域代表一个含义，Cron有如下两种语法格式： 　　（1）Seconds Minutes Hours DayofMonth Month DayofWeek Year 　　（2）Seconds Minutes Hours DayofMonth Month DayofWeek 　　 　　一、结构 　　corn从左到右（用空格隔开）：秒 分 小时 月份中的日期 月份 星期中的日期 年份 　　二、各字段的含义 字段 ..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值