<div class="content" id="articleContent">
<p>最近研究一个github上的一个比较火的项目<a href="https://github.com/zhangdaiscott/jeecg-boot">jeecg-boot</a>。6月份github java开源项目排名第二，欢迎star</p>
<p>由于本人现在所处的公司不是特别忙，业余时间比较多，回家老婆不让玩dota，天天让我带娃，所以自己找个与技术相关且比较感兴趣的项目来研究，并有幸成为部分源码提供者之一，当时收到的第一个任务就是将网上的<a href="https://github.com/1615450788/vue-cron">vue-cron</a>改写成ant-design-vue版。</p>
<ul><li>vue-cron 这个组件使用式vue+elementui开写的（项目中使用vue+elementui可以参考这个），elementui和ant-design-vue在组件语法上还是有很大的差别的。</li></ul>
<p>vue-cron这个组件同时采用了中英文展示，能够正向生成cron表达式，但不能逆向解析将cron表达式渲染到组件面上。</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-9530d10e22493f5dcde43f53ca5a130c.jpg"></p>
<ul><li>言归正传，本次主要介绍cron表达组件过程中任务演进。</li></ul>
<p>1.初次任务：参考vue-cron 写在线cron表达式生成组件demo，不考虑逻辑。</p>
<p>初次任务完成事例：<a href="http://www.56.com/u28/v_MTU4Njg1NzUz.html">视频演示demo</a></p>
<p>2.修改任务1-动态效果做出来，只显示全部中文，动态生成表达式</p>
<p>修改任务1完成任务事例：<a href="http://www.56.com/u11/v_MTU4Njg3NTg0.html">视频演示demo</a></p>
<p>3.修改任务2-将写的代码归纳到对应的components文件夹下</p>
<p>4.将封装的cron表达式组件命名JCron.vue, 在【系统监控】-【定时任务】中使用</p>
<p>成果展示：</p>
<p><img alt="ab414534c623d921da44cda7c51600d8561.jpg" height="1200" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-01c1715ba6e86d260387da7daf40a1a3.jpg" width="1200"></p>
<p><img alt="6b9004ef2490502380fca4ad57e7afb4306.jpg" height="922" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-dda03a580c26f4d5e77b4aae84eaf04a.jpg" width="1200"></p>
<p>5.任务修改：在4的成果中，cron表达式，这个控件使用了cron ={label:'',value:{}},这样的一个对象来展示的，这样的一个结果，需要修改定时器表</p>
<p><s>ALTER TABLE sys_quartz_job ADD COLUMN cron_value VARCHAR(2000) DEFAULT NULL COMMENT 'cron的原始value'<span style="color:#c0392b;">（需要废弃）</span></s></p>
<p>现在要求只使用一个字段，也就是原始字段cron_expression来表示</p>
<p>同时支持复制渲染：将他处获取的cron表达式，复制到cron表达式控件，在控件页面渲染显示。</p>
<p>修改内容：将</p>
<pre class="blockcode"><code>result: {
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:2019,
rangeEnd: 2019,
specificSpecific:[],
}</code></pre>
<p>这个result保存到数据库的对象，删除，使用 最终结果1,50 * * 1,13,25 1-6 ? * 来解析成 result 对象，然后渲染到组件中</p>
<p>逆向解析代码如下：</p>
<pre class="blockcode"><code>secondsReverseExp(seconds) {
let val = seconds.split(" ")[0];
//alert(val);
let second = {
cronEvery:'',
incrementStart:3,
incrementIncrement:5,
rangeStart:1,
rangeEnd:0,
specificSpecific:[]
};
switch (true) {
case val.includes('*'):
second.cronEvery = '1';
break;
case val.includes(&# |
|
转播
