Get best of the week

Verwenden von VueJS mit Django

Vor Beginn des Python Web Developer- Kurses wurde eine Übersetzung des Artikels erstellt .



Einführung


Jetzt arbeite ich an einem sehr interessanten Projekt. Und alles ist kompliziert, weil das Projekt selbst sehr umfangreich ist und ich mich in meiner Freizeit alleine damit beschäftige, während ich Vollzeit arbeite. Deshalb muss ich effektiv sein. Glücklicherweise verwende ich Django mit dem Ansatz „Batterie eingeschlossen“ .

Ich nutze alle Funktionen von Django, was die Entwicklung beschleunigt, und ich möchte die Template-Engine nicht aus den Augen verlieren. Daher sind das Backend für Django und das Frontend für JavaScript SPA für mich keine Option. Selbst der eifrigste Backend-Entwickler muss jedoch zugeben, dass einige Dinge auf der Client-Seite implementiert werden müssen. Kleinere Benutzeraktionen sollten kein erneutes Laden der Seite erfordern. Darüber hinaus erfordern einige Teile der von mir erstellten Webanwendung eine ziemlich komplizierte Benutzerinteraktion.

Traditionell könnte man Django und jQuery mischen, um das gewünschte Verhalten zu erzielen. Aber jetzt gibt es neuere JavaScript-Technologien wie React und Vue. Da unser Ziel darin besteht, ein Framework zu finden, das wir mit Django verwenden können, ohne alles von Grund auf neu zu schreiben, werden wir Vue als einfachere Alternative verwenden. In diesem Artikel werde ich Ihnen zeigen, wie Sie Vue mit Django mit minimalem Aufwand verwenden können.

Installation und Einrichtung


Einer der Gründe für die Verwendung von Vue ist die hervorragende Dokumentation . Es hat viele Beispiele, eine anständige Suche und ein klares Inhaltsverzeichnis. Der Zweck dieses Artikels ist es zu zeigen, dass Sie Vue sofort in Ihren Django-Projekten verwenden können, ohne das komplizierte stundenlange Setup. Daher verwenden wir die einfachste Verbindungsmethode Vue.jsund fügen sie über das Tag hinzu <script>.

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Jetzt können wir unsere erste Instanz erstellen Vue.js:

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Ich habe dieses Beispiel dem offiziellen Leitfaden für die ersten Schritte entnommen. Es gibt jedoch noch etwas anderes. Standardmäßig verwenden Django und Vue dieselben Vorlagen-Tags. Daher müssen wir Vue explizit von Django trennen, um Konflikte mit der Django-Vorlagen-Engine zu vermeiden.

Greifen Sie von Vue aus auf Django-Daten zu


Der einfachste Weg, Daten abzurufen, ist die Verwendung des integrierten Filters jscon_scriptvon Django . Auf diese Weise können Sie Ihre Django-Modelle sofort als Daten für Vue-Instanzen verwenden.

In HTML:

{{ django_template_variable|json_script:"djangoData" }}

Und dann laden wir in JavaScript die Daten in eine Variable:

let jsVariable = JSON.parse(document.getElementById('djangoData').textContent);


Und sie ist bereit für Vue:

new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: jsVariable
})

Ausführen asynchroner Anforderungen im Backend


Eine der häufigsten Aufgaben am Frontend von Vue ist das Abfragen der Serveranwendung im Backend. Mit einer vollständigen Django-App müssen wir dies nicht bei jeder Benutzeraktion tun. In einigen Fällen ist ein erneutes Laden der gesamten Seite großartig, und das Django-Vorlagensystem bietet alle Vorteile. Um die Benutzererfahrung zu verbessern und Vue voll auszunutzen, müssen wir in einigen Fällen möglicherweise noch Backend-Anfragen stellen.

Vue selbst weiß nicht, wie man mit Anfragen umgeht. In diesem Artikel werde ich Axios verwendenwie es auch von der offiziellen Vue-Dokumentation empfohlen wird. Sie können andere Alternativen wählen. Um den CSRF-Schutzmechanismus von Django zu bestehen, muss axios das entsprechende Cookie in seine Anforderungen aufnehmen. Am einfachsten ist es, standardmäßig globale Axios-Werte festzulegen:

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";

Darüber hinaus können wir eine Axios-Instanz mit den erforderlichen Einstellungen erstellen:

var instance = axios.create({
    xsrfCookieName: 'csrftoken',
    xsrfHeaderName: "X-CSRFTOKEN",
});

Ihre Django-Vorlage sollte ein Tag enthalten, {% csrf_token %}oder alternativ sollte die entsprechende Ansicht einen Dekorator verwenden ensure_csrf_cookie(). Der Rest des Standard-Backends für eine Django-Sitzung zur Authentifizierung funktioniert sofort. loginRequiredDies bedeutet, dass Sie Ihre Dienste im Backend mit solchen Dingen versehen können und es einfach funktioniert. Um eine Anfrage zu stellen, können Sie axios verwenden:

axios.post('/django/backend/endpoint', {
    data: jsVariable 
})
    .then(function (response) {
        // handle response
    })
    .catch(function (error) {
        // handle error
    });

Dieser Aufruf kann über den mountedHook der Vue-Instanz oder von jedem anderen Ort aus erfolgen, an dem Sie JavaScript-Code einfügen können.

Wenn Sie CSRF_USE_SESSIONS CSRF_COOKIE_HTTPONLYDjango in den Einstellungen aktiviert haben , müssen Sie das CSRF-Token aus dem DOM lesen. Weitere Informationen hierzu finden Sie in der offiziellen Django- Dokumentation .

Fazit


Wenn Sie über Django + Vue googeln, beziehen sich die meisten Suchergebnisse auf die Verwendung von Django im Backend und Vue für ein separates Projekt im Frontend. Zwei unabhängige Projekte erschweren die Arbeit und Sie verlieren den Zugriff auf das Django-Vorlagensystem, was wiederum eine sehr effektive Möglichkeit ist, Zeit zu sparen. Andererseits kann der Zugriff auf ein Framework wie Vue in der Welt der Webanwendungen Wunder bewirken, die über die CRUD-Funktionalität hinausgehen.

Zum Glück müssen wir uns nicht zwischen ihnen entscheiden. Diese Anleitung zeigt, dass Sie mit zwei Kaninchen gut mithalten können!


Erweiterung der Funktionen von Django (kostenloses Webinar).

More articles:


All Articles