用Django的restful framework 写一个检测某一脚本执行进度的进度条功能，前端用vue3

好的，我来为您解答。

首先，我们需要安装 Django 和 Django Rest Framework。您可以使用以下命令进行安装：

pip install django
pip install djangorestframework

接下来，我们需要创建一个 Django 项目和一个应用程序。您可以使用以下命令创建：

django-admin startproject progressbar_project
cd progressbar_project
python manage.py startapp progressbar

然后，我们需要在 progressbar 应用程序中创建一个视图和一个序列化器。

在 progressbar/views.py 文件中，我们可以编写以下代码：

from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from .serializers import ProgressSerializer

class ProgressView(APIView):
    def get(self, request):
        progress = {"progress": 50} # 假设进度为50%
        serializer = ProgressSerializer(progress)
        return Response(serializer.data, status=status.HTTP_200_OK)

在上面的代码中，我们创建了一个名为 ProgressView 的视图类，它继承了 rest_framework.views.APIView。我们定义了一个 get() 方法来获取进度值。在这个方法中，我们定义了一个名为 progress 的字典，其中包含当前进度的值。然后，我们使用 ProgressSerializer 序列化器将 progress 字典序列化为 JSON 格式，并使用 Response 对象返回给客户端。

接下来，我们需要在 progressbar/serializers.py 文件中编写序列化器代码：

from rest_framework import serializers

class ProgressSerializer(serializers.Serializer):
    progress = serializers.IntegerField()

在上面的代码中，我们定义了一个名为 ProgressSerializer 的序列化器类，它继承了 rest_framework.serializers.Serializer。我们定义了一个 progress 字段，它是一个整数类型。

最后，我们需要在 progressbar_project/urls.py 文件中定义 URL 路由。我们可以编写以下代码：

from django.urls import path
from progressbar.views import ProgressView

urlpatterns = [
    path('progress/', ProgressView.as_view()),
]

在上面的代码中，我们定义了一个名为 progress 的 URL 路由，它将请求发送到 ProgressView 视图。

现在，我们已经创建了一个简单的进度条功能的 Django Restful API，我们可以使用 Vue3 来调用它。在 Vue3 中，我们可以使用 Axios 库来发送 GET 请求并获取进度值。以下是一个简单的 Vue3 组件代码示例：

<template>
  <div>
    <div v-if="progress !== null">
      <span>{{ progress }}%</span>
      <progress :value="progress" max="100"></progress>
    </div>
    <div v-else>
      Loading...
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      progress: null
    }
  },
  mounted() {
    this.getProgress();
  },
  methods: {
    getProgress() {
      axios.get('/progress/')
        .then(response => {
          this.progress = response.data.progress;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为 progress 的变量来存储进度值。在 mounted() 生命周期钩子中，我们调用 getProgress() 方法来获取进度值。在 getProgress() 方法中，我们使用 Axios 库发送 GET 请求到 /progress/ URL，并将响应数据中的进度值存储在 progress 变量中。在模板中，我们使用 progress 变量来显示进度条和进度值。

以上就是使用 Django Restful Framework 和 Vue3 创建检测脚本执行进度的进度条功能的完整步骤。