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


技术场景

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

实现功能

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

代码实现

Vue前端代码

javascript 复制代码
<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

cs 复制代码
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

cs 复制代码
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模块中注册应用服务和后台作业:

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

4)配置API控制器以暴露进度信息:

cs 复制代码
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();
    }
}
相关推荐
uncleTom66610 分钟前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey12 分钟前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆20 分钟前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W25 分钟前
uniapp全局状态管理实现方案
前端
Vertira26 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
共享ui设计和前端开发人才30 分钟前
UI前端与数字孪生融合新趋势:智慧医疗的可视化诊断辅助
状态模式
PeterJXL1 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
用户7579419949701 小时前
Vue响应式原理推导过程
vue.js·响应式设计
君子宜耘心1 小时前
el-table虚拟列表封装
前端