如何利用spring实现一个简单任务调度（三）前端篇开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

后台基本搭建完成后，我们就可以开始构建我们的前端了，实现页面效果

技术栈

标题	版本
vue	2.6.14
antdv	1.7.8
nodejs	v18.12.1

搭建项目

使用的ant design pro来构建我们的管理端

通过上面命令，创建我们的任务管理控制台。

功能

主要实现两个功能，一个是服务的自动获取，另一个是任务创建。

服务自动获取

通过DiscoveryClient获取到所有的服务，通过服务id拿到所有的对应客户端服务的地址和端口。然后进行动态展示。主要是依托nacos的客户端发现的能力。

@GetMapping("list")
public WebResult list() {

    // 查询所有服务
    List<String> services = discoveryClient.getServices();
    List<TaskServer> taskServers = new ArrayList<>();

    // 查询服务对应服务器
    services.stream().forEach(name -> {
        List<ServiceInstance> instanceList = discoveryClient.getInstances(name);
        for (ServiceInstance instance : instanceList) {
            taskServers.add(TaskServer.builder().host(instance.getHost())
                    .port(instance.getPort())
                    .serviceName(instance.getServiceId()).build());
        }
    });
    return WebResult.wrapSuccessResult(taskServers);
}

同时也提供另一个接口，展示所有的服务给页面显示绑定任务时使用。

@GetMapping("select")
public WebResult select() {
    // 查询所有服务
    return WebResult.wrapSuccessResult(discoveryClient.getServices());
}

页面展示

通过nacos发现服务，可以直观的看到每个服务对应的ip和端口。因为是动态获取，可以实时知道每个服务的运行状态情况。取代了xxljob中的执行器配置的问题。也节约了一个rpc注册端口。

任务列表

简单列举了任务的基本信息和开关状态，相应的也可以创建任务。

spring中的任务是不支持参数和结果传递的，有一些缺陷。我们手动创建的任务是支持通过参数进行任务的调用，因为是spring框架，参数也是可以直接配置成spring el表达式，任务执行的时候直接解析。充分利用spring内置的一些功能进行优化任务调度处理。

客户端服务

下拉框可以直接选取上述服务，都是通过动态获取，如果有多个相同名称的服务，ip端口不同的情况。这里可以把ip和端口也显示出来。或者直接选取某个服务。

扩展

策略

由于集成nacos的服务发现功能，所以很容易实现不同的路由策略。针对xxljob中的第一个，最后一个，轮询，随机都是很容易去实现。

调用的class和method

调用的class和method后续也可以通过nacos中的元数据，直接写入进来。就不用盲写调用的类或者bean方法了。直接进行选择即可。spring中的普通bean的普通方法也是可以相同的方式进行调用。

如何利用spring实现一个简单任务调度 （三）前端篇

技术栈