前端Cron控件:Vue中使用Cron选择器

Dear 丶 2022-09-14 00:09 99阅读 0赞

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16

前尘往事

用过定时器的都知道。

需要手动配置cron的执行策略。

一般还好,要是遇到了需要修改的话。就要重启服务了。
对于这种情况,一般的情况下,都是在前端使用对应的页面进行配置。

cron表达式说实话,不是很好懂。

而且格式也是固定的。

好兄弟

那么有没有好用的第三方的开源控件可以帮忙呢?

实话告诉你吧。

是有的。那就是Vue-cron。

vue-cron的可以很好的傻瓜的方式来进行cron的配置。

(看到这里,是不是觉得程序员可以下班了)

直接上图。

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 1

项目文件地址:

gitee:vue-cron: vue-cron 基于Vue的Cron表达式组件

依赖:

  1. ue 2.0.0+
  2. element-ui 2.0.0+

安装方式

  1. npm install vue-cron

在main.js中引入:

  1. //全局引入
  2. import VueCron from 'vue-cron'
  3. Vue.use(VueCron);

页面demo

  1. <template>
  2. <div class="cronDemo">
  3. <el-popover v-model="isShow">
  4. <el-input slot="reference" @click="cronPopover=true"
  5. v-model="cron" placeholder="请输入定时策略"
  6. style="width: 40% ;margin-left: -50%">
  7. </el-input>
  8. <cronComponent@change="changeCron" @close="cronPopover=false" i18n="cn"> </cronComponent>
  9. </el-popover>
  10. </div>
  11. </template>
  12. <script>
  13. import {cronComponent} from 'vue-cron';
  14. export default {
  15. components: { cronComponent},
  16. data(){
  17. return {
  18. isShow: false,
  19. cron:''
  20. }
  21. },
  22. methods: {
  23. changeCron(val){
  24. this.cron=val
  25. },
  26. },
  27. }
  28. </script>

到这里就OK了。

在这里顺便说下,如果你系统的后台语言是Java的话。

并且没有走Quartz。使用的默认的Spring的threadPoolTaskScheduler来实现的话。

请记得修改下为6位cron。Spring默认只支持6位

发表评论

表情:
评论列表 (有 0 条评论,99人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Cron】学习:cron 表达式

    不知道你在玩游戏的时候是否发现过以下情况: 1. 玩某些游戏的时候,发现他的排行榜并不是时时更新的,而是每半个小时,或者一个小时更新一次。 2. 又比如很火的王者荣耀手游

    相关 cron linux定时使用

    cron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业。由于Cron 是Linux的内置服务,但它不自动起来,可以用以下的方法启动、关闭这个服务: