如何执行从 Ionic 4 到 djangorestframework 的发布请求（带有数据）

Question

我正在尝试从我的 ionic 4 项目向 Django 后端网站发出发布请求。

这是我的代码

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]

最后，这是我在 views.py 中用来创建的APIVIEW：

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)] ..

从 ionic 项目中的表单中获取所有这些值

问题它什么也没给我，当我单击按钮时，控制台或后端服务器中没有显示任何响应。

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)
)}