如何使用 Electron、Vue 和 node-schedule 创建调度程序

Vue小助理

258人浏览 · 2022-08-14 22:26:29

Vue小助理 · 2022-08-14 22:26:29 发布

您好,我的名字是Nick Gottschlich,我是Social Amnesia的创建者,这是一个 Electron/Vue 应用程序,可以帮助您删除您的 reddit 和 twitter 内容。此应用程序的一项功能是安排每日运行:

[ 社交健忘症每日日程功能删除 twitter 内容 ](https://res.cloudinary.com/practicaldev/image/fetch/s--TLSrNerg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https ://dev-to-uploads.s3.amazonaws.com/i/kc1znkk12pcq22g6lvsb.png)

如果您对它的创建方式以及如何使用 Electron 和 Vue 创建自己的调度工具感兴趣(想想闹钟、每日提醒、消息调度程序等),请继续阅读!

如果您还没有设置自己的 Electron/Vue 应用程序,可以使用 vue CLI(命令行界面)执行几个简短的步骤。

npm install -g @vue/cli

vue create electron-vue-node-scheduler

我喜欢使用类风格的组件语法,所以跟随我的代码,选择“打字稿”和“使用类风格的组件语法”

cd electron-vue-node-scheduler

vue add electron-builder

现在,让我们构建一个原型作为我们的用户界面的简单组件。我们可以使用Vue Bootstrap来加速开发。

使用vue add bootstrap-vue安装。

现在,我们可以使用yarn electron:serve启动我们的应用程序。

好的,现在我们可以构建实际的组件了。

您新的样板 Electron/Vue 应用程序带有一个方便的 HelloWorld.Vue 组件,我们将对其进行修改以作为我们的调度程序组件。

继续将这段代码复制粘贴到 HelloWorld.Vue 中的所有内容上:

<template>
  <div>
    <b-time
      v-model="value"
      locale="en"
      @context="onContext"
    ></b-time>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

这里的 b-time 是bootstrap-vue 时间组件。

我们现在已经设置了一个易于使用且美观的时间选择器组件。继续玩它:

[ 时间选择器组件 ](https://res.cloudinary.com/practicaldev/image/fetch/s--DEiBnkXj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/flqu9d11e3236cd3nj3p.png)

太好了,现在让我们从中获取实际时间,以便我们可以将它用于我们的调度程序。

以下是更新类组件的方法:

export default class HelloWorld extends Vue {
  value = '';

  onContext(context) {
    console.log('context value', context.value);
  }

  data() {
    return {
      value: this.value,
    };
  }
}

现在,我们使用Vue 的数据函数来跟踪该值,每当用户更改时间选择器时,我们都会通过onContext获得更新:

[ 时间选择器由用户更改,console.log 更新为以字符串格式显示值 '19:12:00' ](https://res.cloudinary.com/practicaldev/image/fetch/s--EwJIQGcu --/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/wrvw91bitcdl5aevjwbo.png)

太好了,现在我们可以设置调度程序了。我们将为此使用节点调度。

yarn add node-schedule

然后在你添加一个import schedule from "node-schedule";。

然后像这样更新您的组件:

export default class HelloWorld extends Vue {
  value = '';

  // eslint-disable-next-line @typescript-eslint/no-empty-function
  scheduleJob = schedule.scheduleJob('* * * * *', () => {});

  onContext(context) {
    // get hours and minutes off of something like '19:12:00'
    const hours = context.value.split(':')[0];
    const minutes = context.value.split(':')[1];

    this.scheduleJob.cancel();
    this.scheduleJob = schedule.scheduleJob(
      `${minutes || '00'} ${hours || '00'} * * *`,
      () => {
        console.log('job ran on schedule!');
      },
    );
  }

  data() {
    return {
      value: this.value,
    };
  }
}

好吧,这变得有点混乱了。让我们把它分开:

scheduleJob = schedule.scheduleJob('* * * * *', () => {});这将创建一个我们可以引用的本地 scheduleJob。我们需要跟踪这一点,因为无论何时更新时间,我们都将取消任何以前安排的作业并创建一个新的预定作业。

如果星号让您感到困惑,那就是cron 式调度:

cron 样式调度