Django Vue.js Axios PUT 不允许 405

Question

我正在开发一个小型库存管理项目。当某种产品被撤回时，我正在尝试更新库存数量。我正在使用 Axios 和 .put() 函数，当我发送请求时它说 405 不允许。我似乎不明白问题出在哪里。我将产品 ID 发送到后端并使用它来识别我想要升级的库存量的产品。希望您能指出我的错误并教我如何让它发挥作用。

这是来自 Django 的视图：

class materialWithdraw(APIView):
    authentication_classes = [authentication.TokenAuthentication]
    permission_classes = [permissions.BasePermission]

    def update(self, request, *args, **kwargs):
        serializer = WithdrawFormSerializer(data=request.data)
        if serializer.is_valid():
            material_id = serializer.validated_data['id']
            quantity_to_withdraw = serializer.validated_data['quantity']
            withdrawn_material = Listing.objects.get(id=material_id)
            withdrawn_material.quantity = withdrawn_material.quantity - quantity_to_withdraw
            serializer.save(quantity=withdrawn_material.quantity)
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

这是urls.py:

urlpatterns = [
    path('all-materials/', views.allMarketingMaterials.as_view()),
    path('all-medical-lines/', views.allMedicalLines.as_view()),
    path('gastroenterologia/', views.gastroenterologiaMaterials.as_view()),
    path('withdraw/', views.materialWithdraw.as_view()),
]

这是我来自 Vue.js 的脚本：

export default {
  name: "Gastroenterologia",
  components: {},
  data() {
    return {
      gastroenterologiaMaterials: [],
      quantity: 0,
      id:'',
    }
  },
  mounted() {
    document.title = "Gastroenterologia";
    this.getGastroenterologiaMaterials()
  },
  methods: {
    getGastroenterologiaMaterials() {
      axios
        .get('/api/v1/gastroenterologia/')
        .then(response => {
          this.gastroenterologiaMaterials = response.data
          console.log(this.gastroenterologiaMaterials)
        })
        .catch(error => {
          console.log(error)
        })
    },
    chooseMaterial(index) {
      const materialName = document.querySelector('#material-name')
      const materialType = document.querySelector('#material-type')
      materialName.textContent = this.gastroenterologiaMaterials[index].title
      materialType.textContent = this.gastroenterologiaMaterials[index].type
      this.id = this.gastroenterologiaMaterials[index].id
    },

    materialWithdraw() {

      console.log(this.title)

      const data = {
        'quantity': this.quantity,
        'id': this.id,
      }

      axios
        .put('/api/v1/withdraw/', data)
        .then(response => {
          return response
        })
        .catch(error => {
          console.log(error)
        })
    }


  },
}

Answer 1

我已经解决了这个问题。问题是我的 Axios 请求以及 View 模型。这里是遇到同样问题的人的解决方案。

这是我的 Views.py:

class materialWithdraw(APIView):
    authentication_classes = [authentication.TokenAuthentication]
    permission_classes = [permissions.BasePermission]

    def put(self, request, pk, format=None):
        withdrawn_material = Listing.objects.get(id=pk)
        serializer = WithdrawFormSerializer(withdrawn_material, data=request.data)

        if serializer.is_valid():
            quantity_to_withdraw = serializer.validated_data['quantity']
            withdrawn_material.quantity = withdrawn_material.quantity - quantity_to_withdraw
            print('Success', quantity_to_withdraw, withdrawn_material.quantity)
            serializer.save(quantity=withdrawn_material.quantity)
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

和 Axios：

    materialWithdraw() {

      console.log(this.title)

      const data = {
        'quantity': this.quantity,
      }

      axios
        .put(`/api/v1/withdraw/${this.id}`, data)
        .then(response => {
          return response
        })
        .catch(error => {
          console.log(error)
        })
    }

Django Vue.js Axios PUT 不允许 405

Django Vue.js Axios PUT Not allowed 405

javascript

django

vue.js

django-rest-framework

axios