基于Vue3与ABP vNext 8.0框架实现耗时业务处理的进度条功能

技术场景

前端采用Vue3+Axios，后端为.NetCore下的Abp vnext 8.0框架。

实现功能

前端点击一个“数据同步“功能，将业务处理指令提交至后台，由于”数据同步“功能的业务处理逻辑比如耗时，可能几分钟。前端需要做个进度状态信息条。

代码实现

Vue前端代码

<template>
  <div>
    <button @click="startSync">开始同步</button>
    <div v-if="syncProgress !== null">
      <progress :value="syncProgress" max="100"></progress>
      <p>同步进度：{{ syncProgress }}%</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      syncProgress: null,
      polling: null,
    };
  },
  methods: {
    startSync() {
      // 发起同步请求
      axios.post('/api/data-sync/start')
        .then(response => {
          console.log('同步开始');
          // 开始轮询进度
          this.pollProgress();
        })
        .catch(error => {
          console.error('同步失败', error);
        });
    },
    pollProgress() {
      this.polling = setInterval(() => {
        axios.get('/api/data-sync/progress')
          .then(response => {
            this.syncProgress = response.data.progress;
            if (this.syncProgress >= 100) {
              clearInterval(this.polling);
              console.log('同步完成');
            }
          })
          .catch(error => {
            clearInterval(this.polling);
            console.error('获取进度失败', error);
          });
      }, 1000); // 每1秒轮询一次
    }
  },
  beforeUnmount() {
    // 组件销毁前清除轮询
    if (this.polling) {
      clearInterval(this.polling);
    }
  }
};
</script>

abp vnext后端代码

1）在ABP vNext项目中创建一个应用服务 DataSyncAppService：

using System;
using System.Threading.Tasks;
using Volo.Abp.Application.Services;
using Volo.Abp.BackgroundJobs;
using Volo.Abp.DependencyInjection;

public class DataSyncAppService : ApplicationService, IDataSyncAppService, ITransientDependency
{
    private readonly IBackgroundJobManager _backgroundJobManager;

    public DataSyncAppService(IBackgroundJobManager backgroundJobManager)
    {
        _backgroundJobManager = backgroundJobManager;
    }

    public async Task StartAsync()
    {
        await _backgroundJobManager.EnqueueAsync(new DataSyncJob());
    }

    public async Task<int> GetProgressAsync()
    {
        // 这里简化处理，实际应该从存储（如数据库）中获取进度
        // 示例代码，假设有一个静态变量存储进度
        return DataSyncJob.Progress;
    }
}

public static class DataSyncJob
{
    public static int Progress { get; set; } = 0;

    public static async Task ExecuteAsync()
    {
        for (int i = 0; i <= 100; i++)
        {
            Progress = i;
            await Task.Delay(1000); // 模拟耗时操作
        }
    }
}

2）创建一个后台作业 DataSyncJob：

using System;
using System.Threading.Tasks;
using Volo.Abp.BackgroundJobs;

public class DataSyncJob : BackgroundJob<int>
{
    public override async Task ExecuteAsync(int args)
    {
        await DataSyncJob.ExecuteAsync();
    }
}

3）在ABP模块中注册应用服务和后台作业：

[DependsOn(typeof(AbpBackgroundJobsAbstractionsModule))]
public class YourModule : AbpModule
{
    public override void ConfigureServices(ServiceConfigurationContext context)
    {
        context.Services.AddApplication<DataSyncAppService>();
        context.Services.AddBackgroundJob<YourNamespace.DataSyncJob>();
    }
}

4）配置API控制器以暴露进度信息：

using Microsoft.AspNetCore.Mvc;
using Volo.Abp.AspNetCore.Mvc;

[ApiController]
[Route("api/[controller]")]
public class DataSyncController : AbpController
{
    private readonly IDataSyncAppService _dataSyncAppService;

    public DataSyncController(IDataSyncAppService dataSyncAppService)
    {
        _dataSyncAppService = dataSyncAppService;
    }

    [HttpPost("start")]
    public async Task StartAsync()
    {
        await _dataSyncAppService.StartAsync();
    }

    [HttpGet("progress")]
    public async Task<int> GetProgressAsync()
    {
        return await _dataSyncAppService.GetProgressAsync();
    }
}