基于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();
    }
}
相关推荐
上官熊猫9 分钟前
nuxt3项目打包部署到服务器后配置端口号和开启https
前端·vue3·nuxt3
dal118网工任子仪2 小时前
61,【1】BUUCTF WEB BUU XSS COURSE 11
前端·数据库·xss
约定Da于配置4 小时前
uniapp封装websocket
前端·javascript·vue.js·websocket·网络协议·学习·uni-app
山楂树の4 小时前
xr-frame 模型摆放与手势控制,支持缩放旋转
前端·xr·图形渲染
大叔_爱编程4 小时前
wx030基于springboot+vue+uniapp的养老院系统小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
LBJ辉5 小时前
1. 小众但非常实用的 CSS 属性
前端·css
milk_yan5 小时前
Docker集成onlyoffice实现预览功能
前端·笔记·docker
计算机学姐6 小时前
基于微信小程序的驾校预约小程序
java·vue.js·spring boot·后端·spring·微信小程序·小程序
m0_748255026 小时前
头歌答案--爬虫实战
java·前端·爬虫
noravinsc7 小时前
python md5加密
前端·javascript·python