Django表单和前端框架认证（AngularJS / ReactJS） [英] Django Forms and Authentication with Front-end Framework (AngularJS/ReactJS)

问题描述

阅读并观看相当多的关于将ReactJS集成到Django项目中。通过Django REST框架，我得到了Django以JSON形式流出的基本概念。

尽管教程似乎结束了，但数据流向相反的方向，什么角色，如果有什么Django形式玩？我认为输入元素被渲染回JSON，然后通过Django REST框架以 PUT ， PATCH ， POST 等更新模型。

然而，当谈到使用用户输入对Django的内置在看法中，我有点迷失了。有没有人有这样的经验，关心解释？

解决方案

首先你必须用Django-Rest-Framework开发API / p>

以下是在ReactJs中发送和接收数据的最小示例

将数据提交给api：

  onSubmit（）{
 fetch（'https://djangoRest.com/endpoint/'，{
 method ：'POST'，
 header：{
'Accept'：'application / json'，
'Content-Type'：'application / json'，
}，
 body：JSON.stringify（{
 firstParam：'yourValue'，
 secondParam：'yourOtherValue'，
}）
}）
} 
  

ReactJs从API获取数据

  loadData（）{
 fetch（'https://djangoRest.com/endpoint/'，{
 method：'GET'，
 headers：{
'接受'：'application / json'，
'Content-Ty pe'：'application / json'，
} 
}）
 .then（（response）=> response.json（））
 .then（（responseJson）=> {
 if（responseJson.data）{
 this.setState（{Data：responseJson.data}）; 
} 
 if（responseJson.errors）{
 console.log（'errors'，responseJson.errors）
} 
}）
} 
  

参考：
https://facebook.github.io/react-native/docs/network.html

Been reading and watching quite a bit about integration ReactJS into a Django project. I get the basic concepts of data flowing from Django in the form of JSON via Django REST Framework.

Where tutorials seem to end though is how data flows in the reverse direction and what role, if any do Django forms play? I am thinking input elements are rendered back into JSON and then sent back through Django REST Framework in the form of PUT, PATCH, POST, etc. to update models.

However, when it comes to using user input against Django's built in auth views, I am a bit lost. Does anyone have experience with this that cares to explain?

解决方案

First you have to develop API with Django-Rest-Framework.

Below is the minimal example how to send and receive data in ReactJs

submit data to api:

onSubmit(){
  fetch('https://djangoRest.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
  })
}

ReactJs fetch data from API

loadData() {    
    fetch('https://djangoRest.com/endpoint/', {
            method: 'GET',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            }
          })
          .then((response) => response.json())
          .then((responseJson) => {
            if (responseJson.data) {
                this.setState({ Data: responseJson.data });
            }
            if (responseJson.errors) {
              console.log('errors', responseJson.errors)
            }
          })
    }

Ref: https://facebook.github.io/react-native/docs/network.html

这篇关于Django表单和前端框架认证（AngularJS / ReactJS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！