Die auf Javascript basierende ReactJS-Struktur hat in den letzten Jahren zunehmend an Popularität gewonnen.
Und das zu Recht – sie ist sehr flexibel und, ohne Bescheidenheit, die perfekte Lösung für die Erstellung von Single Page Applications, die derzeit ebenfalls sehr beliebt sind.
React hilft auch bei der Entwicklung interaktiver Webanwendungen, die dank des serverseitigen Renderings eine tadellose Leistung aufweisen.
Wenn man dann noch die Unterstützung durch das Facebook-Team und eine umfangreiche Online-Community hinzunimmt, kann man sich selbst davon überzeugen, wie äußerst effizient es für die Frontend-Entwicklung von Webanwendungen sein kann.
Dennoch reicht React allein nicht aus, um vollwertige Web-Softwarezu entwickeln . Es muss auch eine API in das erstellte Frontend integriert werden, um Serverinteraktion und Datentransfer zu ermöglichen.
Wie eine Vielzahl anderer Entwickler bevorzugen wir für diese Aufgabe ein Python-basiertes Framework, Django, in Kombination mit dem Django Rest Framework, das speziell für die Backend-Entwicklung entwickelt wurde.
Obwohl Django und React im Grunde zwei unabhängige Strukturen sind, arbeiten ein Frontend und ein Backend, die mit Hilfe der beiden Frameworks geschrieben wurden, sehr gut zusammen. Wir haben ein kurzes Django-React-Tutorial vorbereitet , in dem wir Ihnen erklären, wie Sie diese Technologien nutzen können.
Warum ist die KombinationReact + Django (Python) so effizient?
Bis zum Auftauchen von Frontend-Frameworks in der IT-Entwicklung wurde die gesamte Geschäftslogik von Anwendungen ausschließlich auf der Serverseite ausgeführt.
Die Benutzeroberfläche musste nur bestimmte Reaktionen auf Benutzeranfragen anzeigen.
Als Lösungen wie React und Angular aufkamen, änderte sich die Herangehensweise an die Entwicklung von Webanwendungen erheblich. Der Prozess der Interaktion zwischen Benutzer und Server wurde fortschrittlicher. Eine Synchronisierung von Benutzereingaben mit Elementen der Benutzeroberfläche wurde in den Code der Frontend-Software implementiert.
Dies ermöglichte eine erhebliche Beschleunigungder Web-Soft-Performance und bot eine völlig neue Ebene der Benutzerfreundlichkeit. Es erleichterte auch die Arbeit der Entwickler – Anwendungen, die mit Hilfe dieser Methode geschrieben wurden, sind viel besser skalierbar.
Die Kombination ausDjango und React ist praktisch eine kanonische Kombination für die Erstellung von Web-Software weltweit.
Sowohl Python als auch Django zeichnen sich durch eine steile Lernkurve, eine große Online-Community und einen guten Satz integrierter Tools aus, die es den Nutzern ermöglichen, sich auf die Konstruktion der Softwarelogik zu konzentrieren, anstatt auf andere, trivialere Aspekte.
React ist recht gut mit Django integriert.
Darüber hinaus wird dieses Framework für sein sehr schnelles Rendering (im Gegensatz zum Beispiel zu Angular), seine überschaubare Lernkurve und seine fortschrittliche Flexibilitätgelobt (die jedoch für unerfahrene Entwickler gewisse Schwierigkeiten mit sich bringen kann, wie z. B. tiefgreifende Codefehler).
Nun, haben wir Sie davon überzeugt, dass React und Django Ihre Aufmerksamkeit wert sind?
Dann lassen Sie uns zu einigen Tipps für die Erstellung eines Frontends mit React JS und Django am Backendkommen .
1. Backend schreiben
Das Wichtigste zuerst – installieren Sie das Django-Framework und verbinden Sie die Datenbank auf folgende Weise:
$ virtualenv env
$ source env/bin/activate
$ pip3 install django djangorestframework django-filter
$ pip3 freeze > anforderungen.txt
Jetzt können wir unser Projekt öffnen und die Anwendung starten:
$ django-admin startproject backend
$ cd backend
$ django-admin startapp api
Der nächste Schritt ist die Konfiguration der ausgewählten Datenbank in Übereinstimmung mit den Django-Arbeitsanforderungen sowie die Konfiguration von DRF.
Nun zu einem der wichtigsten Aspekte der Softwareerstellung – dem Authentifizierungsverfahren.
In unserem Beispiel sehen wir uns die Authentifizierung mit Hilfe von Token an. Dies ist nicht die zuverlässigste Option, da Token auf dem Server zeitlich unbegrenzt gespeichert werden – wenn ein Hacker diese Schwachstelle in Ihrer Lösung findet, wird er sie erfolgreich knacken.
Andererseits können wir mit dieser Authentifizierungsmethode eine Möglichkeit aufzeigen, wie die Verbindung zwischen der Benutzeroberfläche und der Serverseite über eine API hergestellt werden kann. Lesen Sie auf der offiziellen Django-Website, wie Sie Token konfigurieren können .
Im Folgenden sehen Sie, wie das Authentifizierungsverfahren mit Hilfe von Token implementiert werden kann – insbesondere die Bedeutung von Name und Passwort eines bestimmten Benutzers in Ihrem redux Store:
# file: api/urls.py
from django.conf.urls import url
from rest_framework.authtoken import views as drf_views
urlpatterns = [
url(r'^auth$',
drf_views.obtain_auth_token, name='auth'),
]
Der nächste Schritt wäre die Definition von urlpatterns:
# Datei: backend/urls.py
from django.conf.urls import url, include
urlpatterns = [
url(r'^', include('api.urls', namespace='api', app_name='api')),
]
Wenn Sie diesen Code zum Projekt hinzufügen, bringen Sie Ihrer Software bei, Indikatoren für den Ressourcenstandort zu verfolgen.
Die folgenden Zeilen dienen zum Testen der App-Leistung – sie starten die Leistung des Server-Ends, der Test selbst kann jedoch erst gestartet werden, wenn das Frontend bearbeitet wurde.
$ python3 manage.py migrate
$ python3 manage.py erstellt Superuser
$ python3 manage.py runserver 0.0.0.0:8000
Wenn Sie den Code für die Serverseite geschrieben haben, können Sie mit dem folgenden Befehl überprüfen, wo sich Ihre Ressource befindet:
$ curl -X POST -d "username=username&password=password" http://localhost:8000/auth
2. Frontend schreiben
Beginnen wir mit der Definition, wie das allgemein bekannte Feature create-react-app in unserem Code verwendet werden soll.
Beachten Sie auch, dass Sie die Standardinhalte in den Konfigurationsdateien löschen müssen (wir glauben, dass dies Ihnen viel mehr Flexibilität bei der weiteren Entwicklung der Frontend-Performance gibt).
$ npm install -g create-react-app
$ create-react-app frontend
$ cd frontend
$ npm run eject
Einrichten von Abhängigkeiten, die Sie im weiteren Verlauf nützlich finden werden:
$ npm install --save-dev babel-preset-es2015 babel-preset-stage-3
$ npm install --save redux redux-logger redux-persist response-redux
$ npm install --save axios response-router-dom lodash
Betrachten Sie den Teil des Codes, der für die Verbindung von Backend und Frontend verantwortlich ist. Das erste, was zu tun wäre, wäre einen redux Store zu erstellen, in dem Sie die Prozedur des Speicherns von Token mit Benutzerdaten (die eine App bei der Authentifizierung erhält) durchführen werden:
// Datei: src/store.js
import { compose, createStore, applyMiddleware } from 'redux';
importiere { createLogger } von 'redux-logger';
importiere { persistStore, autoRehydrate } von 'redux-persist';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
compose(
applyMiddleware(
createLogger(),
),
autoRehydrate()
)
);
persistStore(store);
Standard-Speicher exportieren;
// Datei: src/reducers/index.js
import { combineReducers } from 'redux';
import * as actionType from '../actions/types';
const tokenInitialState = null;
const token = (state = tokenInitialState, action) => {
switch(action.type) {
case actionType.SET_TOKEN:
return action.data;
Standard:
Status zurückgeben;
}
}
const appReducer = combineReducers({
Token,
})
const rootReducer = (state, action) => {
return appReducer(state, action);
}
export default rootReducer;
Als nächstes definieren Sie Aktionen, die in Form von Code in die Dateien index.js und types.js eingegeben werden müssen:
// Datei: src/actions/index.js
importiere * as actionType aus './types';
export const setToken = (Daten) => {
return {
Typ: actionType.SET_TOKEN,
Daten
}
}
// Datei: src/actions/types.js
export const SET_TOKEN = "SET_TOKEN";
Die obige Definition zeigt, wie die Lösung vorgehen würde, um die Verarbeitung von Token mit Benutzerdaten während der Authentifizierung zu definieren. Sie können insbesondere die Art und Weise sehen, wie sie auf der Serverseite gespeichert werden.
Nun zu den Zeilen, die Sie benötigen, um die Benutzerautorisierungsprozesse zu beschreiben (dazu gehört auch der Ausnahmen-Prozessor, in dem das Verhalten der App bei der Eingabe ungültiger Daten definiert wird).
// Datei: src/util/Auth.js
import axios from 'axios';
import _ from 'lodash';
import store from '../store';
import { setToken } from '../actions'
importiere { URL, LOGIN } von '../config/Api';
export function InvalidCredentialsException(message) {
this.message = message;
this.name = 'InvalidCredentialsException';
}
export function login(username, password) {
return axios
.post(URL + LOGIN, {
Nutzername,
Passwort
})
.then(function (response) {
store.dispatch(setToken(response.data.token));
})
.catch(function (error) {
// eine andere Ausnahme auslösen, wenn die Anmeldeinformationen ungültig sind
if (_.get(error, 'response.status') === 400) {
throw new InvalidCredentialsException(error);
}
throw error;
});
}
export function loggedIn() {
return store.getState().token == null;
}
Diese beiden Code-Blöcke verwenden die Datei, einschließlich der Definitionen von Konstanten. Diese Datei vereinfacht das Lesen des Codes und verringert die Gefahr von Fehlern aufgrund einer unsachgemäßen Neudefinition von Variablen (im Falle von Konstanten werden diese einmal in der Datei ../config/Api neu definiert).
// Datei: src/util/ApiClient.js
import axios from 'axios';
import store from '../store';
importiere { URL } von '../config/Api';
export const apiClient = function() {
const token = store.getState().token;
const params = {
baseURL: URL,
headers: {'Authorization': 'Token ' + token}
};
return axios.create(params);
}
Diese beiden Code-Blöcke verwenden die Datei mit den Definitionen der Konstanten. Diese Datei vereinfacht das Lesen des Codes und verringert die Gefahr von Fehlern aufgrund einer unsachgemäßen Neudefinition von Variablen (im Falle von Konstanten werden diese einmal in der Datei ../config/Api neu definiert).
export const URL = process.env.API_URL;
export const LOGIN = "/ auth";
Das war’s. Sie haben erfolgreich die Verbindung zwischen Backend und Frontend mit React und Djangohergestellt . Nun können Sie die erstellte Lösung testen. Rufen Sie einfach das System auf und geben Sie Ihre Authentifizierungsdaten in die entsprechenden Zeilen ein .
Wenn alles korrekt funktioniert, können Sie beim erneuten Start der App im Entwicklermodus einen Browser öffnen und sehen, dass ein Token an die redux Store Server übertragen wurde.
Fazit
Wie Sie sehen können, werdenLeute , die mehr oder weniger mit Redux, DRF, React und Djangovertraut sind , keine großen Schwierigkeiten haben, das oben beschriebene Beispiel zu implementieren.
Wenn Sie hingegen ein unerfahrener Webentwickler sind und eine kommerzielle Lösung erstellen möchten, sollten Sie sich an die Profis wenden . Unser Team bei Sloboda Studio bietet eine fast 100%ige Garantie für die Erstellung einer fertigen, wettbewerbsfähigen und skalierbaren Lösung.
Brauchen Sie Hilfe mit React oder Django?
