Передача данных из формы React в Django - PullRequest
Новая
       177

Передача данных из формы React в Django

0 голосов
/ 14 июля 2020

Я использую сервер Django с интерфейсом на основе Reactjs (в частности, Ant Design). Однако я столкнулся с проблемой, когда пытался передать данные из формы React в бэкэнд Django: данные так и не прошли.

Предположим, что все {whatever_url} в этот файл уже определен. Заголовки также игнорируются, так как нет ошибок импорта.

auth_login. js

function getCookie(name) {
  // As there are no permission errors so far, the contents in
  // this function is ignored. Please ask for it if anyone
  // needs it for any purpose. 
}

class NormalLoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {username: '', password: ''};

    this.handleUsernameChange = this.handleUsernameChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleUsernameChange(event) {
    this.setState({username: event.target.value});
  }
  handlePasswordChange(event) {
    this.setState({password: event.target.value});
  }

  handleSubmit(event) {
    console.log(this.state.username);      // Output see below (1)
    console.log(this.state.password);

    let csrftoken = getCookie('csrftoken');

    fetch('/account/login', {
      credentials: 'include',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json', 'X-CSRFToken': csrftoken,
      },
      body: {
        "username": this.state.username,
        "password": this.state.password
      }
    })
    .then((response) => {console.log('message: ', response);})    // Output see below (2)
    .catch((error) => {console.error('Error:', error);});
  }

  render () {
    return (
      // I am able to successfully retrieve the data (see output below) from
      // this form into the fetch function above, so this part is simplified
      // please do ask for it if anyone needs it
    )
  }
};

ReactDOM.render(<NormalLoginForm />, document.getElementById("root"));

Выводит 

(1)
testuser13
testpassword
(2)
{type: "basic", url: "http://127.0.0.1:8000/account/login", redirected: true, status: 200, ok: true, …}

Это полный javascript файл , на случай, если я слишком упростил его, невозможно отличить.

views.py 

class UserLoginView(View):
    form_class = LoginForm
    initial = {'key': 'value'}
    template_name = 'accounts/auth/auth-login.html'
    
    def get(self, request, *args, **kwargs):
        form = self.form_class(initial=self.initial)
        return render(request, self.template_name, {'form': form})

    def post(self, request, *args, **kwargs):
        form = self.form_class(request.POST)
        username = request.POST.get('username', 'none')
        password = request.POST.get('password', 'none')

        print(username)    # See output (3)
        print(password)

        if form.is_valid():
            user = authenticate(request, username=username, password=password)
            print("valid")    # did not print this and afterwards
            if user is not None:
                login(request, user)
                print("logged in")
                return redirect('index')
        return redirect('login')

Выводы 

(3)
none
none

формы .py 

from django.forms import ModelForm

from .models import User


class UpdateFormBase(ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        password = self.fields.get('password')
        if password:
            password.help_text = password.help_text.format('../password/')
        user_permissions = self.fields.get('user_permissions')
        if user_permissions:
            user_permissions.queryset = user_permissions.queryset.select_related('content_type')

    def clean_password(self):
        return self.initial.get('password')

    class Meta:
        model = User
        fields = '__all__'


class LoginForm(UpdateFormBase):
    class Meta:
        model = User
        fields = ('username', 'password')

Это - это то место, откуда UpdateFormBase изначально.

В основном то, что я ожидаю от вывода (3), - это username: testuser13 \n password: testpassword как на выходе (1). На случай, если кому-то интересно, напечатал ли views.py valid или что-то еще, к сожалению, этого не произошло. Я просмотрел несколько Django документов по формам и документов React / MDN при извлечении, но он по-прежнему не работает.

Любая помощь приветствуется.

...