基于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();
    }
}
相关推荐
我是天龙_绍2 分钟前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲13 分钟前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计
遂心_2 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒2 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
王同学QaQ2 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
岛风风2 小时前
关于手机的设备信息
前端
ReturnTrue8682 小时前
nginx性能优化之Gzip
前端
华仔啊2 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
w_y_fan3 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇3 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端