Как сделать почтовый запрос (с данными) от Ionic 4 к djangorestframework

Question

Я пытаюсь сделать пост-запрос из моих ионных 4 проектов на бэкэнд-сайт Django.

Вот мой код

Код Джанго

models.py Это класс, который мне нужен для публикации данных на

class Item(models.Model):
    item_title = models.CharField(max_length=80)
    item_description = models.TextField(max_length=600)
    item_price = models.IntegerField(default=1, blank=True, null=True)
    item_price_later = models.BooleanField(default=False)
    item_action = models.ForeignKey(Action, on_delete=DO_NOTHING)
    item_color = models.CharField(max_length=25)
    item_category = models.ForeignKey(Category, on_delete=CASCADE)
    item_type = models.ForeignKey(Type, on_delete=DO_NOTHING)
    item_size = models.ForeignKey(Size, on_delete=DO_NOTHING)
    item_city = models.ForeignKey(City, on_delete=DO_NOTHING)
    item_phone = models.IntegerField()
    item_image_1 = ProcessedImageField(upload_to='media/', processors=[ResizeToFill(1200, 1485)], format='JPEG',
                                       options={'quality': 60})
    item_image_2 = ProcessedImageField(upload_to='media/', processors=[ResizeToFill(1200, 1485)], format='JPEG',
                                       options={'quality': 60}, blank=True)
    item_image_3 = ProcessedImageField(upload_to='media/', processors=[ResizeToFill(1200, 1485)], format='JPEG',
                                       options={'quality': 60}, blank=True)
    created_by = models.ForeignKey(User, on_delete=CASCADE)
    created_at = models.DateTimeField(auto_now=True)
    is_active = models.BooleanField(default=False)
    is_delete = models.BooleanField(default=False)

serializers.py и вот сериализатор, который я использую для API:

class CreateItemSerializer(serializers.ModelSerializer):
        class Meta:
            model = models.Item
            fields = (
                'id',
                'item_title',
                'item_description',
                'item_price',
                'item_price_later',
                'item_action',
                'item_color',
                'item_category',
                'item_type',
                'item_size',
                'item_city',
                'item_phone',
                'item_image_1',
                'item_image_2',
                'item_image_3',
                'created_by',
                'created_at',
                'is_active',
                'is_delete',
            )

        def create(self, validated_data):
            item_title = validated_data.get('user')
            item_description = validated_data.get('item_description')
            item_price = validated_data.get('item_price')
            item_action = validated_data.get('item_action')
            item_color = validated_data.get('item_color')
            item_category = validated_data.get('item_category')
            item_type = validated_data.get('item_type')
            item_size = validated_data.get('item_size')
            item_city = validated_data.get('item_city')
            item_image_1 = validated_data.get('item_image_1')
            item = model.Item.objects.create(self,item_title=item_title,
            item_description=item_description,item_price=item_price,
            item_action=item_action,item_color=item_color,
            item_category=item_category,item_type=item_type,
            item_size=item_size,item_city=item_city,item_image_1=item_image_1)
            item.save()
            return item

Это файл api.py , который я использую для создания наборов:

class CreateItemViewSet(viewsets.ModelViewSet):
    queryset = models.Item.objects.all()
    serializer_class = serializers.CreateItemSerializer
    permission_classes = [permissions.IsAuthenticated]

И, наконец, вот APIVIEW, которое я использую в своем views.py для создания:

class CeateItem(APIView):
    def post(self, request, format=None):
        serializer = CreateItemSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Ионный код

А вот как я пытаюсь отправить данные из моего ionicV4 проекта:

  get_form_data(){
    const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'Basic ' + btoa('myusername:mypassword')
  })
}
    this.httpClient.post('https://www.fostania.com/api/items/create/',
    {   "item_title": this.title,
        "item_description": this.desc,
        "item_price": this.price,
        "item_price_later": false,
        "item_action": this.action,
        "item_color": this.color,
        "item_category": this.category,
        "item_type": this.type,
        "item_size": this.size,
        "item_city": this.city,
        "item_phone": this.phone,
        "item_image_1": "https://fostania-aws-bucket.s3.amazonaws.com/media/media/Jellyfish.jpg",
        "item_image_2": null,
        "item_image_3": null,
      },httpOptions)
      .map(res => res.json());
  }

Обратите внимание, что я получаю все эти значения из формы в ионном проекте, используя [(ngModel)] ..

Проблема в том, что она вообще ничего мне не дает, не показывая никакого ответа в консоли или на бэкэнд-сервере, когда я нажимаю кнопку.

Answer 1

Я не слишком знаком с тем, как работает Djano, но если вы хотите получить ответ на запрос POST, вам нужно будет вернуть ваш httpClient.post(). Не забудьте импортировать карту из пакета RxJS.

import { tap, map } from 'rxjs/operators';
.
.
get_form_data(){
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': 'Basic ' + btoa('myusername:mypassword')
    })
  } 

  const request =  {   
    "item_title": this.title,
    "item_description": this.desc,
    "item_price": this.price,
    "item_price_later": false,
    "item_action": this.action,
    "item_color": this.color,
    "item_category": this.category,
    "item_type": this.type,
    "item_size": this.size,
    "item_city": this.city,
    "item_phone": this.phone,
    "item_image_1": "https://fostania-aws-bucket.s3.amazonaws.com/media/media/Jellyfish.jpg",
    "item_image_2": null,
    "item_image_3": null,
  }
  return this.httpClient.post('https://www.fostania.com/api/items/create/',request, httpOptions) 
    .pipe(
      tap(data => console.log(data),
      //catchError(error => console.log(error)
)}