时间戳

首页 > 解决方案 > 用 React 服务 Django 视图？

javascript - 用 React 服务 Django 视图？

问题描述

我正在制作一个 web 应用程序，其中 react 作为前端，django-rest-framework 作为后端。

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

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

请帮忙。谢谢！

标签： javascriptpythonreactjsdjango

解决方案

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

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:''
        });
    };

从登录方法，您将收到来自该响应的响应，您必须访问.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')

推荐阅读