使用 React 提供 Django 视图?

IT技术 javascript python reactjs django
2021-05-02 17:55:00

我正在制作一个以 react 作为前端和 django-rest-framework 作为后端的 Web 应用程序。

对于 Django,我正在学习教程。https://www.techwithtim.net/tutorials/django/user-registration/ - 在这里,他们已经使用 django 制作了一个具有适当验证的注册表单。

有没有办法对 React 做同样的事情?本质上,有没有办法用 React 显示 Django 模板和视图?如果没有,我是否应该只链接到 Django 服务器上托管的特定 Django 页面?

请帮忙。谢谢!

1个回答

首先,您必须像这样为登录和注册视图创建序列化程序

from rest_framework import serializers
from django.contrib.auth.models import User
from django.contrib.auth import authenticate

# Register Serializer
class RegisterSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'username', 'email', 'password')
        extra_kwarg = {'password':{'write_only':True}}

    def create(self, validated_data):
        user = User.objects.create_user(
            validated_data['username'],
            validated_data['email'],
            validated_data['password']
            )
        return user

# Login Serializer

class LoginSerializer(serializers.Serializer):
    username = serializers.CharField()
    password = serializers.CharField()

    def validate(self, data):
        user = authenticate(**data)
        if user and user.is_active:
            return user
        raise serializers.ValidationError("Incorrect Credentials")

在您的views.py 中,您必须创建这样的视图

from rest_framework import generics
from rest_framework.response import Response
from .serializers import RegisterSerializer, LoginSerializer

# Register API
class RegisterAPI(generics.GenericAPIView):
    #I'm using generic view you can create your custom view
    serializer_class = RegisterSerializer
    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        #here your data get validated and throw ValidationError to your API endpoint
        user = serializer.save()
        return Response({
            "user":UserSerializer(user, context=self.get_serializer_context()).data})

# Login API
class LoginAPI(generics.GenericAPIView):
    serializer_class = LoginSerializer

    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        user = serializer.validated_data
        return Response({
            "user":UserSerializer(user, context=self.get_serializer_context()).data})

并且您必须为此创建端点以将前端连接到后端

网址.py

from django.urls import path
from .api import RegisterAPI, LoginAPI

urlpatterns = [
    path('api/auth/register', RegisterAPI.as_view()),
    path('api/auth/login', LoginAPI.as_view()),
]

然后你必须在你的前端应用程序onSubmit或任何你想要的方法中调用一个方法

onSubmit = e => {
        e.preventDefault();
        const {username, email, password} = this.state; //you have to create state I've not provided because it will be to big code
        const login = {name, email, password};
        this.Login(login);//this method you have to create to fetch data to your endpoint and it will give you a response 
        this.setState({
            name:'',
            email:'',
            password:''
        });
    };

从 Login 方法中,您将收到来自该响应的响应,您必须.catch()像这样访问方法中的所有错误

.catch(err => {
  const errorText = err.response.data,
  const errorStatus = err.response.status
});

我认为这是很多代码,所以我将在此处停止提供更多信息,我将为您提供教程 URL。

更新

用户序列化器

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'username', 'email')