This is the fifth day of my participation in the First Challenge 2022

preface

In my company project, I was asked to do a page for timed tasks that involved CRON expressions, but I had never written about them and had no idea what a CRON expression was. Simple to understand, found that if their handwriting, it will be very troublesome, the amount of code is still relatively large, and the existing online individual code template, in the expression is more complex, easy to make mistakes. So I finally decided to find a plug-in to use.

What is a CRON expression

A CRON expression is a set of strings composed of numbers, Spaces, and symbols according to certain rules. It is used to express time information, similar to a regular expression

For example, if we have a task to update the system data at 12:00 am every day, we can’t wait in front of the computer manually to update the system at 12:00 am every day. So, we can use the CRON expression to help us control the time and automatically perform the system update task at 12:00 am.

The format of a CRON expression

Let’s start with a picture:

As you can see, the CRON expression in the table above is divided into six or seven sections by space

Each part, representing a meaning, corresponds to “second minute hour day month week” and “second minute hour day month week year”.

In general, we don’t write “year”, because there is rarely a need to perform a task every few years or specify the year from which the task will be executed, so we can usually ignore “year” and not write “year”, of course, you can also write “year”

This article is mainly to record the use of my plug-in, so HERE I will not do the expression value description, specific value description, you can go to the Internet to understand, such as this Cron expression detailed usage

Vue-cron plugin for generating CRON expressions

This is a cron expression generation plugin based on vUE and element-UI implementation.

The installation

npm install --save vue-cron

Copy the code

The introduction of

// Pre-configuration
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
 
// Global import in main.js
import VueCron from 'vue-cron'
Vue.use(VueCron);  
      
 
// Local introduction in the relevant page file
import {cron} from 'vue-cron' 
      

export default {
    template: '<cron/>'.components: { cron }
}

Copy the code

demo

// html
<el-popover v-model="cronPopover">
    <cron @change="onChangeCron" @close="cronPopover = false"></cron>
        <el-input
            slot="reference"
            @click="cronPopover = true"
            v-model="formData.cronExpression"
            placeholder="Please enter a timing policy"
            size="small"
        ></el-input>
</el-popover>

// Define variables
export default {
  components: { cron },
  data() {
    return {
      cronPopover: false.cron: "".formData: {
        cronExpression: "",}}; }}// js
 methods: {
    // When the value of the corn expression changes, the argument is the value of the cron expression
    onChangeCron(v) {
      this.formData.cronExpression = v; }},Copy the code

rendering

CRON expression conversion plugin – Cronstrue

Cronstrue is a JavaScript library that parses CRon expressions and outputs human-readable descriptions of CRon scheduling. For example, given the expression */5 * * * *, it will output every 5 minutes. GitHub – Bradymholt /cRonstrue

The installation

npm install --save cronstrue

// There are several ways to install it, but I'll use the most common one here
Copy the code

The introduction of

import cronstrue from "cronstrue/i18n"; 

// Make sure you don't miss the "/i18n", I missed it at the beginning, so I failed to convert the language
Copy the code

use

cronstrue.toString("* 0/20 0/5 * *? *", {locale: "zh_CN" });

// The result: every second, every 20 minutes, every 5 hours
Copy the code

Always remember to set the locale, use Chinese or some other language, so I’m using simplified Chinese here. Please click the plugin address to see which languages can be converted

rendering

Finally, I was able to translate the CRON expression in the table into a more readable Chinese interpretation

conclusion

Ok, plug-in to share here, share at the same time is to make a record for yourself, if it can help you, of course it is better, or the same, there is any mistake please friendly point out, thank you, the core ❤❤❤❤❤❤❤❤ ❤❤