基于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();
    }
}
相关推荐
超级大只老咪27 分钟前
字段行居中(HTML基础语法)
前端·css·html
IT_陈寒40 分钟前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只1 小时前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience1 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹1 小时前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo1 小时前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse1 小时前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye1 小时前
前端架构师,是架构什么
前端·架构
全马必破三1 小时前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库1 小时前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库