完整目录

这一篇介绍前端的实现

首先是前端表单

这里只介绍cron组件, 其他的都是文本输入组件, 非常简单

使用了react-js-cron这个组件

import { Cron } from 'react-js-cron'

function generationMonth() {
    let a = []
    for (let i =1; i <=12; i++){
        a.push(i+ "月")
    }
    return a
}
const months = generationMonth()
const weeks = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"]

let CronI18 = {
    everyText: "每",
    emptyMonths: "每月",
    emptyMonthDays: "一个月的某一天",
    emptyMonthDaysShort: "1号",
    emptyWeekDays: "一周的某一天",
    emptyWeekDaysShort: "星期一",
    emptyHours: "每小时",
    emptyMinutes: "每分钟",
    emptyMinutesForHourPeriod: "任何时候",
    yearOption: "年",
    monthOption: "月",
    weekOption: "周",
    dayOption: "日",
    hourOption: "小时",
    minuteOption: "分钟",
    rebootOption: "重启",
    prefixPeriod: "每",
    prefixMonths: " ",
    prefixMonthDays: " ",
    prefixWeekDays: " ",
    prefixWeekDaysForMonthAndYearPeriod: " ",
    prefixHours: " ",
    prefixMinutes: ":",
    prefixMinutesForHourPeriod: " ",
    suffixMinutesForHourPeriod: "分钟",
    errorInvalidCron: "错误的cron表达式",
    weekDays: weeks,
    months: months,
    altWeekDays: weeks,
    altMonths: months,
}

function PeriodicTaskCreate(props) {
    const [value, setValue] = useState('* */2 * * *')

    return (
    <Cron value={value}  locale={CronI18} setValue={(v)=> {setValue(v)}} />
)
}

有几个字段可以在提交表单时进行校验,

• 环境变量, 我们可以在提交时检查, 如果环境变量不为空, 那么我们就把它转换为json, 如果转换失败, 那么就报错提示用户格式错误
• 通知列表,如果不为空, 检查格式是用;分割的一个个标准邮箱
• git的地址是否为标准的git ssh地址

当用户输入完所有信息后, 点击确定, 就会调用后端的API创建任务