Подключение фронтенда Angular к представлению Django

У меня есть базовое приложение django, которое просто загружает файл excel в базу данных oracle. Я создал класс python (uploader) для выполнения некоторых проверок на вменяемость файла и загрузки в базу данных.

Мне удалось успешно создать пользовательский интерфейс с использованием HTML в шаблонах Django, который отлично работает.

Однако я хотел перенести фронт-енд на фронт-енд Angular.

Я создал приложение на angular, но сейчас пытаюсь понять, как подключить фронт-энд к django. Исследуя онлайн, они советуют использовать модели, сериализаторы, но поскольку я выполняю загрузку через отдельный класс python, я не уверен, как соединить два этих метода. Я предполагаю, что мне нужно использовать HttpClient, чтобы как-то подключиться к этому представлению?

Любая помощь будет высоко оценена. Спасибо

upload/views.py

def clickToUpload(request):
if request.method == 'POST':
    if 'form' in request.POST:
        try:
            upload_instance = uploader(request.FILES['file'], request.POST['date'])
            _ = upload_instance.run_process('File', update_log=True)
            message= "Success"
        except Exception as e:
            upload_message = 'Error: ' + str(e)

     return render(request, 'Upload/upload.html', {'upload_message':upload_message})

Так что вам придется изменить ваш текущий clickToUpload на конечную точку API в Django, которая в основном принимает ваш файл в качестве данных формы. Он не должен возвращать представление в ваш шаблон. В Angular вы будете вызывать эту конечную точку API, когда пользователь загружает файл.

Пример Django API загрузки файлов (views.py):

from rest_framework.parsers import FileUploadParser
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework import status

from .serializers import FileSerializer #you need to create a serializer, see below

class FileUploadView(APIView):
    parser_class = (FileUploadParser,)

    def post(self, request, *args, **kwargs):

      file_serializer = FileSerializer(data=request.data)

      if file_serializer.is_valid():
          file_serializer.save()
          return Response(file_serializer.data, status=status.HTTP_201_CREATED)
      else:
          return Response(file_serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Serializer:

from rest_framework importserializers

class FileSerializer(serializers.ModelSerializer):
    class Meta:
        model = File
        fields = "__all__"

После создания API вам нужно будет создать сервис в Angular, который будет вызывать конечную точку и передавать данные загруженной формы. Есть хорошее руководство здесь.

Вернуться на верх