yongchin's blog

背景

大家有没有这么一种困境

我现在需要去配置一个定时任务：“每天早上九点执行任务”

若你有一个好的定时任务平台，相信很容易就能配置完成。那若是没有定时任务平台呢？是不是就要自己写 cron 表达式

那 “每天早上九点执行任务” 的 cron 表达式怎么写呢？

这个时候我会去百度一些 cron 在线生成，因为我比较菜

然而，现在能找到的在线解析生成 cron 的网站有很多，但是使用体验都不太好，他可能是长这样的

如果我的需求再复杂一点点，“工作日的每天早上九点执行任务”，那又该怎么操作呢

大多时候，我更需要知道一个 cron 表达式它是什么意思，比如 “0 9 _/3 _ *”。这个时候，有很多网页的 cron 反解析就不好用了。后来我才知道，原来 cron 表达式分 5,6,7 位数，而我们熟知的 crontab 是 5 位数，意思是 6,7 位数的 cron 表达式在 linux 上是不可用的。各个解析网页对 5,6,7 位数的 cron 反解析的支持也是参差不齐的。

那么有没有一种，使用起来比较简洁，又支持 5,6,7 位数的 cron 解析呢？不如自己手搓一个吧！

所以 awesome-cron 诞生了

awesome-cron 介绍

我们先来看看它的使用，我争取一张图能说明

是的，就这么简单，你只需要在输入框中输入 cron 表达式就行了

除了支持 5,6,7 位数的 cron 解析以外，我觉得它最大的亮点就是光标落在某处，就能在对应解释除标红，并且告诉你当前是时分秒还是什么，然后这个地方支持哪些写法

如果你只是一个使用者，那么你可以直接访问传送门，就可以使用了

如果你是开发，那么很高兴地告诉你，它是一个 vue 组件，你可以引入到你的 vue 项目中

特点

Zero dependencies（0 依赖）
Supports all cron expression special characters including * / , - ? L W, # (支持 cron 所有特殊符号的解析)
Supports 5, 6 (w/ seconds or year), or 7 (w/ seconds and year) part cron expressions（支持 5,6,7 位数的解析）
i18n support with 29 languages （国际化）

安装

npm install awesome-cron

使用

import { createApp } from "vue";
import cron from "awesome-cron";

const app = createApp(App);
app.use(cron);
app.mount("#app");

安装之后你可以全局加载到你的 VUE SFC 组建文件中，像这样: <cron-parser> 和 <cronParser> 都是可以的

<template>
  <cron-parser></cron-parser>
</template>

<template>
  <cronParser></cronParser>
</template>

按需导入

手动导入

<script>
  import { defineComponent } from "vue";
  import { CronParser } from "awesome-cron";

  export default defineComponent({
    components: {
      CronParser,
    },
    setup() {
      return {};
    },
  });
</script>

<template>
  <CronParser></CronParser>
</template>

<style></style>

如果觉得这个 cron 解析不错，希望能给这个项目点个 star⭐，项目地址 ←

最强cron解析器

背景

awesome-cron 介绍

特点

安装

使用

按需导入

手动导入