Reagieren Sie → Ajax → Django auf Linux-Implementierungshinweise

Hintergrund

1. Ich möchte React und Django kombinieren
2. Finden Sie heraus, wie es geht ⇒ Spielen Sie mit der virtuellen Umgebung ⇒ Sofortiger Tod
3. Erstellen Sie zwei Entwicklungsserver ⇒ Bauen Sie nicht? ⇒ Unmöglich
4. Soll ich die eingebaute Reaktion in Django einfügen?

Als ich es versuchte, war es sehr mühsam und sehr unbrauchbar. Weil ich sehr verrückt war, zu vergessen, wie man Django benutzt Ich werde es hier als Memorandum schreiben Vielleicht genauso wie andere Ich bin eine schwache Programmierperson

Methodik

Vereinheitlichen Sie virtuelle Server (einfach) Ziel ist es, Implementierung 1 auf den Stand der Implementierung 2 zu bringen. Weil es sich um eine Unco-Umgebung handelt, für die Implementierung 2 und Entwicklung erforderlich sind Informieren Sie sich über das Verfahren zum Erstellen von Implementierung 1 und bringen Sie es zur Implementierung 2.

Wahrscheinlich ist die richtige Antwort Sands Literatur [1]. Die Schwäche, die es nicht konnte, ist eine Gorilla-Methode wie diese Wenn ich auf seinen Artikel zurückblicke, verstehe ich Webpack nicht (Kas) Wahrscheinlich dieses Mal, wenn es auf die endgültige Zielimplementierung 2 beschränkt ist, npm / pip nur reagieren und django

Verwenden Sie für die Umwelt den Webanwendungskurs der N Preparatory School so wie er ist Ich baue Linux unter Windows 10 mit Vagrant

Implementierung 1

Erstellen und kommunizieren Sie Entwicklungsserver mit React und Django

React

Bewegen Sie zuerst tmux und erstellen Sie zuerst eine React-App Benannt ajax-js

create-react-app ajax-js

Wechseln Sie in den Ordner und löschen Sie die ursprüngliche Datei in src

cd ajax-js
rm -rf src/*

Erstellen Sie index.js im Ordner

index.js hat eine Server-URL-Variable und sendet sie dorthin Die Klasse (Komponente?) Hat eine Zeichenfolge als Status Anfangs "Reagieren", aber wenn die Kommunikation mit dem Server erfolgreich ist, wird es zu "Django".

src/index.js

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

const SERVER = "http://127.0.0.1:8000/ajax/"; //Serverpost

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

  /**
   *Holen Sie sich CSRF-Token von Cookies
   */
  getCSRFtoken() {
    for (let c of document.cookie.split(";")) { //Nehmen Sie einen nach dem anderen heraus
      let cArray = c.split("="); //des Weiteren=Teilen Sie mit und in ein Array
      if (cArray[0] === "csrftoken")
        return cArray[1]; //Wenn es mit dem Schlüssel übereinstimmt, den Sie abrufen möchten
    }
  }

  /**
   *Daten an Server senden
   */
  submitData() {
    console.log("Senden", this.state);
    fetch(SERVER + "res/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": this.getCSRFtoken()  //CSRF-Token
      },
      body: JSON.stringify({
        message: this.state.message　  //Status
      })
    })
      .then((res) => res.json())
      .then((res) => {
        console.log("Erhalten", res);
        this.setState({ message: res.message });
        this.render();
      });
  }

  /**
   *Schaltfläche und Senden / Empfangen von Datenwiedergabe
   */
  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")
);

~~ Ich erinnere mich, dass ich mit der Django-Vorlage so etwas wie {% CRSF_token%} gemacht habe. Die Vorlage scheint ein Token im Cookie zu haben ~~ Du bist eine Lüge Es scheint, dass, wenn Sie {% csrf_token%} in die Vorlage einfügen, das Token im Cookie gesetzt wird. Hmm ... Nehmen Sie also [2]

• Der Gastbrowser kann keine Cookies verwenden, daher NG

Muster 1

  getCSRFtoken() {
    for (let c of document.cookie.split(";")) { //Nehmen Sie einen nach dem anderen heraus
      let cArray = c.split("="); //des Weiteren=Teilen Sie mit und in ein Array
      if (cArray[0] === "csrftoken")
        return cArray[1]; //Wenn es mit dem Schlüssel übereinstimmt, den Sie abrufen möchten
    }
  }

Senden Sie es daher an den Header des Features Dieses Kapitel deaktiviert jedoch CSRF-Maßnahmen auf der Django-Seite, sodass es hier bedeutungslos ist. Bezogen auf das nächste Kapitel (vielleicht)

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

Überprüfen Sie das Ergebnis auf dem Entwicklungsserver npm start (langsamer Cusso) oder Codes und Box (schneller Cusso). Da die Kommunikation mit dem Server nur mit dem Entwicklungsserver erfolgen kann, erstellen Sie sie mit Codes und Box und legen Sie sie nach Abschluss auf dem Entwicklungsserver ab

Der Build ist npm run-script build Dies ist auch langsam und ich möchte die Programmierung beenden

Während die schlampige Taste und Reagieren angezeigt werden und ich sterben möchte Starten Sie den Entwicklungsserver und drücken Sie tmux, um zum nächsten zu wechseln

Django Es ist ein Ärger

Virtuelle Python-Umgebung

Erstellen Sie mit venv eine Ajax-Python-Umgebung (entsprechend)

python3 -m venv ajax-python

Wenn Sie venv in einer virtuellen Umgebung unter Windows verwenden, können Sie es abhängig von der Berechtigung der von Ihnen gestarteten Eingabeaufforderungs-Shell nicht ausführen. Öffnen Sie die Shell daher erneut als Administrator Terminal ist wahrscheinlich unnötig (Mac ist Gott.)

Bewegen Sie sich und betreten Sie die Umgebung

cd ajax-python
source bin/activate

Setzen Sie Django mit pip Django-Cors-Header können später sein

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

Erstellen Sie eine Ajax-App und migrieren Sie wie ein Zauber

python manage.py startapp ajax
python manage.py migrate

Ajax App

Ab diesem Zeitpunkt ist es lästig und kahl

urls

Erstellen Sie neue URLs in der Ajax-App Ich werde dem Benutzer etwas json zurückgeben, wenn eine Res-Anfrage eingeht

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 Passend in der Ansicht Nur auf der Konsole innerhalb der Anfrage anzeigen Geben Sie vorerst die Nachricht "Django" zurück.

ajax/views.py

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

def Index(request):
	"""
Zeigen Sie die von React erstellte Seite an
	"""
	return render(request, 'ajax/index.html')

def Res(request):
	"""
	"Django"Kehrt zurück
	"""
	data = request.body.decode('utf-8')
	print("Erhalten", data)
	response = JsonResponse({
	    "message": "Django",
	})
	return response

mysite

Registrieren Sie anschließend die Ajax-App auf mysite

setting

Entwicklungsserver Zwei Phasen werden mit React und Django standortübergreifend durchgeführt Dann erhält React den von Django mit dem ersten Cookie generierten CRSF-Token nicht und stirbt sofort Regeln Sie daher die Sicherheit [3]

mysite/setting.py

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

Ajax App hinzufügen Fügen Sie auch Corsheaders für CS-Maßnahmen hinzu

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', #Neu gemachte App
    'corsheaders', # TODO: Cross-Origin
]

Deaktivieren Sie außerdem die CSRF-Maßnahmen von Django Setzen Sie 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 Übergeben Sie den Ajax-App-Pfad an mysite

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')),
]

Importieren Sie include

Kurze Zusammenfassung

Das Ergebnis ist das gleiche wie das Ergebnis im nächsten Kapitel, daher wird es weggelassen. Bis zu diesem Punkt können sowohl Kindergartenkinder als auch schmutzige Menschen dies tun. Das Problem ist, dass Sie dies nicht auf dem Server verwenden können, oder? Untersuchen Sie die alternative Lösung Ich war überwältigt von der Höhe des Bewusstseins, dass Docker bereits verteilt worden war. Als nächstes versuchen Sie mit dem Energiesystem Ikenuma zu bewegen

Implementierung 2

Optimieren Sie den Inhalt des erstellten React und tauchen Sie in die Django-Vorlage ein

React ⇒ Django

Verschieben Sie tmux auf npm und erstellen Sie zuerst

npm run-script build

Dannreact-js/build```Im Ordnerindex.html``Und andere Dateiordner werden generiert Dieser Index.HTML enthält den Pfad der JS-Datei Ich bin mir nicht sicher, wie ich mit Django umgehen soll. Index vorerst.HTML ist Django-Vorlagen Setzen Sie andere in statische

Erstellen Sie einen Vorlagenordner und ein statisches Verzeichnis in Ihrer App ajax-js/build/index.htmlZuajax-py/mysite/ajax/templates/ajax/Kopieren nach ajax-js/build/Ordner inajax-py/mysite/ajax/static/ajax/Kopieren nach

"/Zu"{% static 'ajax/' %}/Ersetzen mit Das ist kurz gesagt

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

Zu

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

Willst du wie sein Jetzt, da der Pfad von der Vorlage zum Mysterium js übergegangen ist Am Anfang{% csrf_token %}Wann{% load static %}Einfügen, um die Vorlage zu laden und das CSRF-Token im Cookie festzulegen

index.html

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

Damit ist das statische Laden abgeschlossen

Starten Sie nun den Django-Serverhttp://127.0.0.1:8000/ajax/Zugreifen Wenn die Seite geladen und die Taste gedrückt wird und die Zeichen auf dem Bildschirm zu Django werden, endet sie.

Django

Deaktivieren Sie abschließend das CORS-bezogene Element, das im vorherigen Kapitel aktiviert wurde. Überprüfen Sie, ob es mit aktivierter deaktivierter Middleware funktioniert

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', # Neu erstellte App
    # '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
]

##Ergebnis

#Fazit sterben

#Referenz [1]@sand, Erstellen Sie eine Django-Seite mit React- Webpack4,21. Dezember 2019. [2]@dokkoisho, Cookie-Operation mit Javascript,22. Mai 2019. [3]@MuuKojima, Django REST Framework : Cros-Ursprungseinstellungen,10. November 2017.