reactjs - 如何使用 React 和 Django REST 框架以理想的方式（两种方式）获取和发布数据（序列化）

Question

我正在做一个项目，其中基于 Django 框架的 API 作为服务器，前端是使用 React/Redux 创建的。

我的问题是，我已经编写了一些关于 Django 用户和项目的序列化程序。在获取我以 JSON 格式收到的一个或多个项目时：

{
"project_leader": 
{
    "id": user_id,
    "last_login": ...,
    "username": ...,
    "first_name": ...,
    "last_name": ...,
 }
"project_name": string,
"project_description": string,
"done": boolean,
"due_date": time
}

project_leader(User) 数据的格式与下面的序列化程序中的格式相同。我想要接收的数据格式很好，但是当我尝试创建一个新格式时问题就开始了。

1. 当我以类似在序列化程序中的方式格式化反应组件中的数据时 - 我收到如下错误：Cannot parse keyword query as dict.
2. 当我以“django-way”格式化数据时——例如，用户只是一个用户 ID，而不是整个字典——项目已创建，但我在用户字段中收到的只是一个用户 ID，所以我无法将操作分派给减速器，因为我没有映射的所有用户数据。

楷模：

class Project(models.Model):
    project_leader = models.ForeignKey(User, on_delete=models.CASCADE)
    project_name = models.CharField(max_length=128)
    project_description = models.TextField()
    done = models.BooleanField(default=False)
    due_date = models.DateField()

序列化器：

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = [
            'id', 'last_login', 'is_superuser', 'username', 'first_name',
            'last_name', 'email', 'date_joined', 'groups'
        ]

class ProjectSerializer(serializers.ModelSerializer):
    project_leader = UserSerializer()


class Meta:
    model = Project
    fields = [
        'id',  'project_description', 'done', 'due_date', 
        'project_leader'
    ]

意见：

class ProjectAPIView(APIView):

def get(self, request, project_id=None):
    if project_id is not None:
        project = Project.objects.get(id=project_id)
        serializer = ProjectSerializer(project)
    else:
        projects = Project.objects.all()
        serializer = ProjectSerializer(projects, many=True)
    return Response(serializer.data)

def post(self, request):
    serializer = ProjectSerializer(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)

派遣行动：

export const addTask = (task) => dispatch => {
axios.post(`http://127.0.0.1:8000/api/projects/`, task)
    .then((res) => {
        dispatch({
            type: ADD_TASK,
            payload: res.data
        })
    })
    .catch((err) => {
        dispatch({
            type: SET_ERRORS,
            payload: err.response.data
        })
    })

}

减速器：

case ADD_TASK:
return {
    ...state,
    tasks: [
        action.payload,
        ...state.tasks,
    ]
}

坦率地说 - 我想以一种格式发布数据，当创建对象时，我想以另一种格式接收数据作为响应。您对如何处理这个问题有任何想法吗？

标签： reactjsdjangoreduxdjango-rest-framework