Réagir → Ajax → Django sur les notes d'implémentation Linux

Contexte

1. Je veux combiner React et Django
2. Découvrez comment faire ⇒ Jouez avec l'environnement virtuel ⇒ Mort instantanée
3. Construisez deux serveurs de développement ⇒ Vous ne construisez pas? ⇒ Impossible
4. Dois-je mettre le React intégré dans Django?

Quand je l'ai essayé, c'était très gênant et très inutilisable. Parce que j'étais très démente d'oublier comment utiliser Django Je vais l'écrire ici sous forme de mémorandum Peut-être la même chose que les autres Je suis un programmeur faible

méthodologie

Unifier les serveurs virtuels (simple) L'objectif est d'amener la mise en œuvre 1 à l'état de mise en œuvre 2. Parce que c'est un environnement UNCO qui nécessite une implémentation et un développement intégrés Explorez la procédure pour créer l'implémentation 1 et l'amener à l'implémentation 2.

La réponse correcte est probablement la littérature de sand [1]. La faiblesse qui ne pouvait pas le faire est de prendre une méthode de gorille comme cette fois En repensant à son article, je ne comprends pas le webpack (Kas) Probablement cette fois, si elle est limitée à l'implémentation de l'objectif final 2, ne pas npm / pip sauf react et django

Pour l'environnement, utilisez le cours d'application Web de N Preparatory School tel quel Je construis Linux sur Windows 10 avec Vagrant

Mise en œuvre 1

Créez et communiquez des serveurs de développement avec React et Django

React

Commencez par déplacer tmux et créez d'abord une application React Nommé ajax-js

create-react-app ajax-js

Déplacez-vous dans le dossier et supprimez le fichier initial dans src

cd ajax-js
rm -rf src/*

Créez index.js dans le dossier

index.js a une variable URL de serveur et l'envoie là-bas La classe (composant?) A une chaîne comme état Initialement "React", mais si la communication avec le serveur réussit, il devient "Django"

src/index.js

import React from "react";
import ReactDOM from "react-dom";

const SERVER = "http://127.0.0.1:8000/ajax/"; //Poste de serveur

class Ajax extends React.Component {
  constructor(props) {
    console.log(props);
    super(props);
    this.state = {
      message: props.message
    };
  }

  /**
   *Obtenir des jetons CSRF à partir des cookies
   */
  getCSRFtoken() {
    for (let c of document.cookie.split(";")) { //Sortez un par un
      let cArray = c.split("="); //plus loin=Divisez avec et dans un tableau
      if (cArray[0] === "csrftoken")
        return cArray[1]; //S'il correspond à la clé que vous souhaitez récupérer
    }
  }

  /**
   *Envoyer des données au serveur
   */
  submitData() {
    console.log("Envoyer", this.state);
    fetch(SERVER + "res/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": this.getCSRFtoken()  //Jeton CSRF
      },
      body: JSON.stringify({
        message: this.state.message　  //Statut
      })
    })
      .then((res) => res.json())
      .then((res) => {
        console.log("Recevoir", res);
        this.setState({ message: res.message });
        this.render();
      });
  }

  /**
   *Bouton et envoyer / recevoir le rendu des données
   */
  render() {
    return (
      <div>
        <div className="submit-element">
            <button onClick={() => this.submitData()}>Submit</button>
        </div>
        <div className="message-element">
            <span className="message-text">{this.state.message}</span>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <React.StrictMode>
    <Ajax message={"React"} />
  </React.StrictMode>,
  document.getElementById("root")
);

~~ Je me souviens avoir fait quelque chose comme {% CRSF_token%} avec le modèle Django. Le modèle semble avoir un jeton dans le cookie ~~ Vous êtes un mensonge Il semble que si vous mettez `` {% csrf_token%} '' dans le modèle, le jeton sera défini dans le cookie. Hum ... Alors prenez [2]

• Le navigateur invité ne peut pas utiliser de cookies, donc NG

Modèle 1

  getCSRFtoken() {
    for (let c of document.cookie.split(";")) { //Sortez un par un
      let cArray = c.split("="); //plus loin=Divisez avec et dans un tableau
      if (cArray[0] === "csrftoken")
        return cArray[1]; //S'il correspond à la clé que vous souhaitez récupérer
    }
  }

Par conséquent, envoyez-le à l'en-tête de la fonctionnalité Cependant, ce chapitre désactive les mesures CSRF du côté Django, donc cela n'a pas de sens ici. Relatif au chapitre suivant (peut-être)

  submitData() {
    console.log("Envoyer", this.state);
    fetch(SERVER + "res/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": this.getCSRFtoken()  //Jeton CSRF
      },
      body: JSON.stringify({
        message: this.state.message　  //Statut
      })
    })

Vérifiez le résultat sur le serveur de développement npm start (slow cusso) ou codes and box (fast cusso) Étant donné que la communication avec le serveur ne peut être effectuée qu'avec le serveur de développement, créez-la avec des codes et une boîte et placez-la dans le serveur de développement une fois terminée

La construction est `` npm run-script build '' C'est aussi lent et je veux arrêter la programmation

Pendant que le bouton bâclé et React sont affichés et que je veux mourir Démarrez le serveur de développement et appuyez sur tmux pour passer au suivant

Django C'est un problème

Environnement virtuel Python

Créer un environnement ajax-python (approprié) avec venv

python3 -m venv ajax-python

Si vous utilisez venv dans un environnement virtuel sous Windows, vous ne pouvez pas l'exécuter en fonction de l'autorité du shell d'invite que vous avez démarré, alors rouvrez le shell en tant qu'administrateur Le terminal est probablement inutile (Mac est Dieu.)

Déplacez-vous et entrez dans l'environnement

cd ajax-python
source bin/activate

Mettez Django avec pip django-cors-headers peut être plus tard

pip install django django-cors-headers
django-admin startproject mysite

Créez une application ajax et migrez comme un sort

python manage.py startapp ajax
python manage.py migrate

application ajax

A partir de là, c'est gênant et chauve

urls

Créer de nouvelles URL dans l'application Ajax Je retournerai quelques json à l'utilisateur lorsqu'une demande de res arrivera

ajax/urls.py

from django.urls import path

from . import views

app_name = 'urls'
urlpatterns = [
	path('', views.Index, name='index'),
    path('res/', views.Res, name='res'),
]

views Approprié dans la vue Afficher uniquement sur la console à l'intérieur de la requête Pour le moment, retournez le message "Django"

ajax/views.py

from django.shortcuts import render
from django.http.response import JsonResponse

def Index(request):
	"""
Afficher la page créée par React
	"""
	return render(request, 'ajax/index.html')

def Res(request):
	"""
	"Django"Retour
	"""
	data = request.body.decode('utf-8')
	print("Recevoir", data)
	response = JsonResponse({
	    "message": "Django",
	})
	return response

mysite

Ensuite, enregistrez l'application ajax sur mysite

setting

Serveur de développement Deux étapes croiseront les sites avec React et Django Ensuite, React ne recevra pas le jeton CRSF généré par Django avec le premier cookie et mourra instantanément Par conséquent, régissez la sécurité [3]

mysite/setting.py

ALLOWED_HOSTS = ["127.0.0.1"]
CORS_ORIGIN_ALLOW_ALL = True # TODO: Cross-Origin

Ajouter une application ajax Ajoutez également des corsheaders pour les mesures CS

mysite/setting.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'ajax.apps.AjaxConfig', #Application nouvellement créée
    'corsheaders', # TODO: Cross-Origin
]

De plus, désactivez les mesures CSRF de Django Mettre Cors Middleware

mysite/setting.py

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware', # TODO: add before
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware', # TODO: Cross-Origin
]

urls Passez le chemin de l'application ajax à mon site

mysite/setting.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('ajax/', include('ajax.urls')),
]

Importer ```include``

Bref résumé

Le résultat est le même que celui du chapitre suivant, il est donc omis. Jusqu'à présent, les enfants de la maternelle et les gens sales peuvent le faire. Le problème est que vous ne pouvez pas l'utiliser sur le serveur, non? Étudiez la solution alternative J'ai été submergé par le degré de conscience que Docker avait déjà été distribué. Ensuite, essayez de résoudre avec le système d'alimentation Ikenuma move

Mise en œuvre 2

Ajustez le contenu du React intégré et plongez dans le modèle Django

React ⇒ Django

Déplacez tmux vers npm et construisez d'abord

npm run-script build

Puisreact-js/build```Dans le dossierindex.html``Et d'autres dossiers de fichiers sont générés Cet index.html contient le chemin du fichier js Je ne sais pas comment gérer cela avec Django. Index pour le moment.html est des modèles Django Mettez les autres en statique

Créez un dossier de modèles et un répertoire statique dans votre application ajax-js/build/index.htmlÀajax-py/mysite/ajax/templates/ajax/Copier ajax-js/build/Dossier dansajax-py/mysite/ajax/static/ajax/Copier

"/À"{% static 'ajax/' %}/Remplacer par C'est en bref

<script src="/static/js/2.f563a5c7.chunk.js"></script>

À

<script src="{% static 'ajax/' %}/static/js/2.f563a5c7.chunk.js"></script>

Je veux être comme Maintenant que le chemin est passé du modèle au mystère js Au début{% csrf_token %}Quand{% load static %}Insérer pour charger le modèle et définir le jeton CSRF dans le cookie

index.html

{% csrf_token %}
{% load static %}
<!doctype html>
...

Ceci termine le chargement statique

Maintenant, démarrez le serveur Djangohttp://127.0.0.1:8000/ajax/Accéder Lorsque la page est chargée et que le bouton est enfoncé, si les caractères à l'écran deviennent Django, cela se termine.

Django

Enfin, désactivez le CORS associé qui a été activé dans le chapitre précédent. Vérifiez s'il fonctionne avec le middleware désactivé activé

mysite/setting.py

ALLOWED_HOSTS = ["127.0.0.1"]
 CORS_ORIGIN_ALLOW_ALL = True # TODO: Cross-Origin

mysite/setting.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
 'ajax.apps.AjaxConfig', # Application nouvellement créée
    # 'corsheaders', # TODO: Cross-Origin
]

mysite/setting.py

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware', # TODO: add before
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    # 'corsheaders.middleware.CorsMiddleware', # TODO: Cross-Origin
]

##résultat

#Conclusion Mourir

#référence [1]@sand, Créer une page Django avec React- Webpack4,21 décembre 2019. [2]@dokkoisho, Opération de cookie avec javascript,22 mai 2019. [3]@MuuKojima, Django REST Framework : Cros-Paramètres d'origine,10 novembre 2017.