drf-vue数据导入导出

对于使用DRF（Django Rest Framework）和Vue的数据导入和导出，可以按照以下步骤进行操作：

1. 在Django中创建一个可以导出数据的API视图。你可以使用DRF的`APIView`类作为基类，并在`get`方法中编写逻辑来导出数据。例如，你可以使用`HttpResponse`返回CSV格式的数据。

   from django.http import HttpResponse
   from rest_framework.views import APIView

   class ExportDataAPIView(APIView):
       def get(self, request, format=None):
           # 导出数据的逻辑
           # 数据可以从数据库或其他来源获取

           # 创建CSV数据
           csv_data = "col1,col2,col3\nvalue1,value2,value3\n"

           response = HttpResponse(content_type='text/csv')
           response['Content-Disposition'] = 'attachment; filename="data.csv"'
           response.write(csv_data)
           return response

2. 在Vue中创建一个导出数据的页面或组件。你可以使用`axios`库发送GET请求到Django的API视图，并将响应保存为CSV文件并进行下载。

   import axios from 'axios';

   const exportData = () => {
     axios.get('/api/export-data/', { responseType: 'blob' })
       .then(response => {
         const url = window.URL.createObjectURL(new Blob([response.data]));
         const link = document.createElement('a');
         link.href = url;
         link.setAttribute('download', 'data.csv');
         document.body.appendChild(link);
         link.click();
       })
       .catch(error => {
         console.error(error);
       });
   };

   exportData();

3. 对于数据的导入，你可以在Django中创建一个可以接收上传文件的API视图。你可以使用DRF的`APIView`类，并在`post`方法中编写逻辑来处理上传的文件。

   from rest_framework.parsers import MultiPartParser
   from rest_framework.views import APIView

   class ImportDataAPIView(APIView):
       parser_classes = [MultiPartParser]

       def post(self, request, format=None):
           file = request.FILES['file']

           # 处理上传文件的逻辑
           # 可以使用CSV库来解析文件并将数据保存到数据库或进行其他操作

           return Response(status=status.HTTP_200_OK)

4. 在Vue中创建一个页面或组件来处理文件上传。你可以使用`axios`库发送POST请求到Django的API视图，并将文件作为`FormData`对象发送。

   import axios from 'axios';

   const importData = (file) => {
     const formData = new FormData();
     formData.append('file', file);

     axios.post('/api/import-data/', formData)
       .then(response => {
         // 处理导入成功的逻辑
       })
       .catch(error => {
         console.error(error);
       });
   };

   const handleFileChange = (event) => {
     const file = event.target.files[0];
     importData(file);
   };

   // 在HTML中添加一个文件上传的input元素，并监听change事件
   <input type="file" @change="handleFileChange">

这是一个简单的示例，你可以根据你的具体需求进行更改和扩展。希望能对你有所帮助！