Wäre es nicht cool, wenn Sie eine benutzerdefinierte Webanwendung als Prototyp erstellen könnten? ansprechbar (mobil bereit), reaktiv (Lichtgeschwindigkeit schnell), mit vollem Funktionsumfang Admin-Oberfläche um den Inhalt zu verwalten - alles in kürzester Zeit? Mit Django und Vue.js können Sie das tatsächlich! 😁
0. Einführung: Full Stack Development 101
Ich werde erläutern, wie eine benutzerdefinierte Web-App als Prototyp erstellt wird. Um sie so kurz und bündig wie möglich zu halten, werden die Kontextinformationen hier eher kurz sein. Ich werde jedoch - hoffentlich - genügend Ressourcen bereitstellen, damit Sie wissen, wohin Sie gehen müssen, wenn Sie weitere Informationen benötigen.
Zu diesem Zweck werde ich die Datenverwaltung, Präsentation und das Routing zwischen Django und Vue.js vollständig mischen - also machen Sie sich bereit!
Über Django
Sie können von wissen Django, die Python-basierte Web-Framework für Perfektionisten mit Fristen das ist lächerlich schnell, beruhigend sicher und außerordentlich skalierbar. Wenn Sie jedoch nicht viel darüber wissen, dient dieser Artikel als extrem schnelle praktische Einführung.
Über Vue.js
Gleicher Deal mit Vue.js, das progressive JavaScript-Framework das ist zugänglich, vielseitig und performant. Wenn Sie damit nicht vertraut sind, erhalten Sie hier eine kurze und schmutzige Einführung.
Ich werde auch zwei offizielle Vue.js-Bibliotheken behandeln:
Python + JavaScript = GEWINNEN!
Für diesen Artikel legen wir ein Veröffentlichungsprojekt mit einer Basis fest Datenbankschema , um zu speichern authors und articlesund ein Minimum Benutzerschnittstelle (UI), um mit ihnen zu interagieren.
Hoffentlich wird dies als Spielzeugprogramm verstehen So integrieren Sie Django mithilfe von Python-Code im Backend in ein JavaScript-Framework im Frontend, die Sie später an Ihre eigenen Bedürfnisse anpassen können.
1. Einrichten eines Django-Projekts
Sehr schnell werden wir ein Projekt von Grund auf neu einrichten. Wenn Sie bereits wissen, wie man mit Django-Projekten umgeht, können Sie diesen Abschnitt überspringen. Wir gehen davon aus, dass Sie bereits haben Python installiert.
Eine ausführlichere Anleitung finden Sie unter So installieren Sie Django auf der Django-Dokumentationsseite.
Virtuelle Python-Umgebung
Öffnen Sie eine Konsole und erstellen Sie eine virtuelle Umgebung (siehe Virtuelle Umgebungen und Pakete Für mehr Information):
$ virtualenv myenvironment
Using base prefix 'c:\users\luzdealba\appdata\local\programs\python\python37'
New python executable in C:UsersluzdealbaDevelopmentmyenvironmentScriptspython.exe
Installing setuptools, pip, wheel …
done
Beachten Sie die Pfade nicht, da sich diese von System zu System ändern.
Lassen Sie uns auf die virtuelle Umgebung zugreifen und sie aktivieren.
Unter Windows:
$ cd myenvironment
$ Scriptsactivate
Unter MacOS und Linux:
$ cd myenvironment
$ source bin/activate
Django-Paket
Lassen Sie uns Django installieren:
(myenvironment) $ pip install django
Collecting django Downloading Django-3.0.3-py3-none-any.whl (7.5 MB)
Collecting sqlparse>=0.2.2 Downloading sqlparse-0.3.1-py2.py3-none-any.whl (40 kB)
Collecting pytz Using cached pytz-2019.3-py2.py3-none-any.whl (509 kB)
Collecting asgiref~=3.2 Downloading asgiref-3.2.3-py2.py3-none-any.whl (18 kB)
Installing collected packages: sqlparse, pytz, asgiref, django
Successfully installed asgiref-3.2.3 django-3.0.3 pytz-2019.3 sqlparse-0.3.1
Machen Sie sich noch einmal keine Gedanken über Programmversionen und Dateigrößen, da diese variieren.
Das Projekt
Beginnen wir ein Projekt namens myproject:
(myenvironment) $ django-admin startproject myproject
Lassen Sie uns auf das Projekt zugreifen:
(myenvironment) $ cd myproject
Die App
Starten Sie eine App namens myapp:
(myenvironment) $ django-admin startapp myapp
Und hinzufügen myapp.apps.MyappConfig zu den INSTALLED_APPS konstante Liste in myproject/settings.py um die App zu aktivieren.
2. Einrichten der Datenbank mit Django
Hier definieren wir die Back-End-Datenbank mit Django, die wir später in einen Front-End-Speicher mit Vuex integrieren werden.
Django Modelle
Modelle sind Djangos Weg, eine zu implementieren objektrelationales Datenbankverwaltungssystem (ORDBMS). Mit anderen Worten: Nur-Text-Dateien, in denen Sie Datenbanktabellen und -felder definieren können und von denen diese an die Anwendungsschicht und die DB-Engine weitergegeben werden.
Lassen Sie uns die folgenden Modelle für unsere App in codieren myapp/models.py:
from django.db import models class Article(models.Model): """Table schema to store articles.""" name = models.CharField(max_length=64) author = models.ForeignKey('myapp.Author', on_delete=models.CASCADE) content = models.TextField() slug = models.CharField(default='', max_length=64) def __str__(self): return '%s' % self.name class Author(models.Model): """Table schema to store auhtors.""" name = models.CharField(max_length=64) slug = models.CharField(default='', max_length=64) def __str__(self): return '%s' % self.name
Beachten Sie, dass wir a implementiert haben URL-Slug für Artikel und Autoren.
Für weitere Informationen, siehe Modell-API-Referenz auf der Django-Dokumentationsseite.
Django-Admin
Bevor wir diese Modelle über die Admin-Site verwalten können, müssen wir dies zuerst tun register sie, damit Django sie uns zur Verfügung stellt.
Lassen Sie uns einfach bearbeiten myapp/admin.py so dass es so aussieht:
from django.contrib import admin from .models import Article
from .models import Author # register models to use in admin site
admin.site.register(Article)
admin.site.register(Author)
Lesen Sie mehr über die Django Admin Seite auf der Django-Dokumentationsseite.
Django-Migrationen
Von den Djangos Migrationsdokumentation:
Migrationen sind Djangos Methode, Änderungen, die Sie an Ihren Modellen vornehmen (Hinzufügen eines Felds, Löschen eines Modells usw.), in Ihr Datenbankschema zu übertragen.
Kurzum: Migrationen tun es alles;; Keine SQL-Befehle erforderlich.
Zuerst erstellen wir die Migrationsdateien:
(myenvironment) $ python manage.py makemigrations
Migrations for 'myapp': myappmigrations001_initial.py - Create model Author - Create model Article
Verwenden wir nun diese Informationen, um die Datenbank zu aktualisieren:
(myenvironment) $ python manage.py migrate
Operations to perform: Apply all migrations: admin, auth, contenttypes, myapp, sessions
Running migrations: Applying contenttypes.0001_initial... OK Applying auth.0001_initial... OK Applying admin.0001_initial... OK Applying admin.0002_logentry_remove_auto_add... OK Applying admin.0003_logentry_add_action_flag_choices... OK Applying contenttypes.0002_remove_content_type_name... OK Applying auth.0002_alter_permission_name_max_length... OK Applying auth.0003_alter_user_email_max_length... OK Applying auth.0004_alter_user_username_opts... OK Applying auth.0005_alter_user_last_login_null... OK Applying auth.0006_require_contenttypes_0002... OK Applying auth.0007_alter_validators_add_error_messages... OK Applying auth.0008_alter_user_username_max_length... OK Applying auth.0009_alter_user_last_name_max_length... OK Applying auth.0010_alter_group_name_max_length... OK Applying auth.0011_update_proxy_permissions... OK Applying myapp.0001_initial... OK Applying sessions.0001_initial... OK
Kümmere dich nicht um die lange Liste. Das liegt daran, dass dies unsere erste Migration war, also nicht nur unsere Author und Article Es wurden Tabellen erstellt, aber auch alle Standardschemata von Django.
Weitere Informationen finden Sie unter Migrationsvorgänge in der Django-Dokumentationsseite.
3. Eine grundlegende Schnittstelle mit Vue-Komponenten in einer Django-Vorlage
Hier ist einer der interessantesten Teile des Mashups, da wir eng verwandte Tools aus verschiedenen Technologien mischen werden.
Django Ansicht
Django geht an der vorbei Model View Controller (MVC) Software-Entwurfsmuster, das die zugehörige Programmlogik in drei miteinander verbundene Elemente unterteilt.
Wir werden die folgende Ansicht in codieren myapp/views.py:
from django.shortcuts import render from .models import Article
from .models import Author def frontend(request): """Vue.js will take care of everything else.""" articles = Article.objects.all() authors = Author.objects.all() data = { 'articles': articles, 'authors': authors, } return render(request, 'myapp/template.html', data)
Beachten Sie, dass wir alle Artikel und Autoren aus der Datenbank abgefragt haben. Das wird später nützlich sein.
Erfahren Sie mehr über Ansichten schreiben und klassenbasierte Ansichten (API) auf der Django-Dokumentationsseite.
Django-Vorlage
Django hat einen reichen Vorlagensprache mit integrierte Vorlagen-Tags und Filter und eine API für Python-Programmierer; aber ja, Sie haben es erraten – wir werden hier nicht viel davon behandeln. 😅
Was wir jedoch tun werden, ist die Verwendung Bootstraps Starter-Vorlage a sehr Grundlegendes Navigationslayout für die App:
- hellgrauer Hintergrund
- weißer Vordergrund
- zentrierter Inhalt
Also werden wir die folgende Vorlage in codieren myapp/templates/myapp/template.html (Sie müssen die Unterverzeichnisse erstellen templates/myapp/ . myapp/):
<!doctype html>
<html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Django and Vue.js</title> </head> <body class="bg-light"> <div class="bg-white container"> <h1>Prototyping a Web App with Django and Vue.js</h1> <!-- Content --> </div> <!-- Vue.js --> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue-router"></script> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body>
</html>
Erfahren Sie mehr über Django-Vorlagen.
Vue.js Vorlagen
Vue.js ebenfalls hat eine Vorlagensyntax verfügbar, und es ermöglicht uns außerdem, unsere eigenen HTML-Tags zu erstellen.
Wir erstellen vier Vorlagen: article-list, author-list, article-item und author-item:
<template id="article-list-template"> <div class="article-list"> <h2>Articles</h2> <article-item v-for="article in articles" v-bind:key="article.slug" v-bind:name="article.name" v-bind:slug="article.slug" v-bind:content="article.content" ></article-item> </div>
</template> <template id="author-list-template"> <div class="author-list"> <h2>Authors</h2> <author-item v-for="author in authors" v-bind:key="author.slug" v-bind:name="author.name" v-bind:slug="author.slug" ></author-item> </div>
</template> <template id="article-item-template"> <div class="article-item"> <span v-if="$route.params.slug"> <h3> <router-link v-bind:to="'/article/' + $route.params.slug + '/'" v-html="$store.getters.getArticleBySlug($route.params.slug)['name']" ></router-link> </h3> <div v-html="$store.getters.getArticleBySlug($route.params.slug)['content']"></div> </span> <span v-else> <h3> <router-link v-bind:to="'/article/' + slug + '/'" v-html="name" ></router-link> </h3> <div v-html="content"></div> <hr /> </span> </div>
</template> <template id="author-item-template"> <div class="author-item"> <span v-if="$route.params.slug"> <b> <router-link v-bind:to="'/author/' + $route.params.slug + '/'"> [[ $store.getters.getAuthorBySlug($route.params.slug)['name'] ]] </router-link> </b> ([[ $route.params.slug ]]) </span> <span v-else> <b> <router-link v-bind:to="'/author/' + slug + '/'"> [[ name ]] </router-link> </b> ([[ slug ]]) </span> </div>
</template>
Breakdown
Was wir hier auf den Punkt gebracht haben:
- Listen-Rendering mit
v-for. - Datenbindung in HTML-Attributen mit
v-bind. - Bedingtes Rendern mit
v-ifundv-else. - Rohes HTML-Rendering mit
v-html.
$store und $route wird in einem Moment sinnvoller sein, wenn wir Speicher und Routing einführen.
Textinterpolation zwischen Django- und Vue.js-Vorlagen
Genau wie bei Django, der grundlegendsten Form von Textinterpolation in Vue.js ist mit der "Moustache" -Syntax (doppelte geschweifte Klammern).
Liken:
<span>Message: {{ msg }}</span>
Um Konflikte zwischen beiden zu vermeiden, setzen wir beim Instanziieren von Vue.js stattdessen doppelte eckige Klammern:
delimiters: ['[[', ']]']
Vue.js Themen
Wussten Sie, dass Sie Vue.js „thematisieren“ können?
Vue.js Komponenten
Komponenten sind wiederverwendbare Vue-Instanzen. Das bedeutet, dass wir eine Komponente definieren, eine HTML-Vorlage dafür codieren und sie dann so oft verwenden können, wie wir es mit Vue.js benötigen DOM für uns.
Wir werden das ganze zeigen einseitige Anwendung (SPA) Code am Ende. Lassen Sie uns zunächst einige Ausschnitte vorstellen.
Genau wie bei Vorlagen definieren wir vier Komponenten: ArticleList, AuthorList,, ArticleItem und AuthorItem:
ArticleList = Vue.component('article-list', { data: function () { return { articles: store.state.articles } }, template: '#article-list-template',
}); AuthorList = Vue.component('author-list', { data: function () { return { authors: store.state.authors } }, template: '#author-list-template',
}); ArticleItem = Vue.component('article-item', { delimiters: ['[[', ']]'], props: ['name', 'slug', 'content'], template: '#article-item-template',
}); AuthorItem = Vue.component('author-item', { delimiters: ['[[', ']]'], props: ['name', 'slug'], template: '#author-item-template',
});
Breakdown
- Wenn in einer Komponente,
datamuss eine Funktion sein ($storewird gleich erklärt). - Wir nutzen die Vorlagen zuvor definiert.
- Stellen Sie sicher, dass Sie die Textinterpolation eindeutig festlegen
delimitersdas sind anders als bei Django ({{/}}). - Wir verwenden
propswird als Array aufgeführt, um Daten an unsere Komponenten zu übergeben.
4. Verbinden des Vue.js-Speichers mit dem Sammeln der Django-Datenbank mithilfe von Vuex
Ein reichhaltiges Frontend könnte viele haben locker verbunden Komponenten mit jeweils eigenen Parametern, die das Teilen von Daten oder das Verwalten des Status von Variablen erschweren können.
Hier ist wo vuex ist praktisch:
Es dient als zentraler Speicher für alle Komponenten in einer Anwendung, wobei Regeln sicherstellen, dass der Status nur auf vorhersehbare Weise mutiert werden kann.
Erstellen eines Vuex-Stores
Erstellen und definieren wir einen Speicher in unserer Django-Vorlage und verwenden die in der Django-Ansicht freigegebenen Daten:
const store = new Vuex.Store({ state: { authors: [ {% for author in authors %} { name: '{{ author.name }}', slug: '{{ author.slug }}', }, {% endfor %} ], articles: [ {% for article in articles %} { content: '{{ article.content | linebreaksbr }}', name: '{{ article.name }}', slug: '{{ article.slug }}', }, {% endfor %} ], }, getters: { getArticleBySlug: (state) => (slug) => { return state.articles.find(articles => articles.slug === slug) }, getAuthorBySlug: (state) => (slug) => { return state.authors.find(authors => authors.slug === slug) }, }
})
Breakdown
Lassen Sie uns überprüfen, was gerade passiert ist:
- Wir haben ein Geschäft mit erstellt
Vuex.Store(). - Wir haben a definiert Vuex-Zustand wo alle die
articlesundauthorssind gesammelt. - Wir nutzten die
forSchleife Das ist in die Django-Vorlagen integriert, um alle zu durchlaufenarticlesundauthors. - Wir haben zwei erstellt Vuex Getter einen Artikel oder einen Autor durch ihre Schnecke zu bekommen,
getArticleBySlugundgetAuthorBySlug, Bzw.
Vuex bietet noch viel mehr. Überprüfen Sie also unbedingt die Erste Schritte Führer und die API-Referenz.
5. Routing-URLs zwischen Django und Vue Router
Django hat eine mächtige URL-Dispatcher, die wir in Kombination mit verwenden werden Vue.js Routing.
Wir erstellen eine Anwendung, die:
- verwendet dynamischer Routenabgleich nahtloses Wechseln zwischen Seiten ohne Aktualisierungen (siehe Beispiel)
- arbeitet mit verschachtelte Routen (sehen Beispiel)
Mit Django
Reaktiv URLs benötigen normalerweise eine spezielle Konfiguration auf dem Server Django ermöglicht es uns, URLs so zu gestalten, wie wir möchten, sodass keine Umschreiberegeln für Apache oder NGINX festgelegt werden müssen.
Wir werden bearbeiten myproject/urls.py so dass es das Basisverzeichnis verwendet / als Route für unsere App:
from django.contrib import admin
from django.urls import path # don't forget to import the app's view!
from myapp import views as myapp_views urlpatterns = [ path('admin/', admin.site.urls), # paths for our app path('', myapp_views.frontend), path('article/<slug:slug>/', myapp_views.frontend), path('author/<slug:slug>/', myapp_views.frontend),
]
Mit Vue Router
Standardmäßig verwendet Vue Router den "Hash-Modus" (dh: http: // site / # / path) als JavaScript-Trick, um Teile der Seite mit zu laden Anker. Wir werden jedoch die Vue Router nutzen HTML5-VerlaufsmodusDies bedeutet, dass sich alle unsere URLs nahtlos ändern, ohne die Seite neu zu laden und ohne Hashes zu verwenden.
Wir stellen den Router so ein, dass jeder Pfad mit der jeweiligen zuvor definierten Komponente übereinstimmt:
const routes = [ { component: ArticleList, path: '/article/', }, { component: AuthorList, path: '/author/', }, { component: ArticleItem, path: '/article/:slug/', }, { component: AuthorItem, path: '/author/:slug/', },
] const router = new VueRouter({ mode: 'history', routes: routes,
})
Wie wir sehen können, lautet die Syntax zum Definieren von Pfaden leicht anders als bei Django, aber es ist im Wesentlichen dasselbe.
Lesen Sie mehr über die Vue-Router.
6. Alles testen
Jetzt, da wir alle Teile zusammen haben, ist es Zeit, einige zu machen Gray-Box-Test und sehen, wie die Dinge funktionieren!
Erstellen Sie einen Django Superuser
Bevor wir uns beim Administrator anmelden können, müssen wir einen Superuser erstellen.
Erstellen wir einen Administrator:
(myenvironment) $ python manage.py createsuperuser
Als Nächstes geben Sie den Benutzernamen, die E-Mail-Adresse und das Passwort ein (zweimal).
Führen Sie einen lokalen Server aus
Wir werden den integrierten Server von Django mit ausführen runserver um die Website auf unserem lokalen System zu starten.
Auf einer Konsole:
(myenvironment) $ python manage.py runserver
Watching for file changes with StatReloader
Performing system checks... System check identified no issues (0 silenced).
March 09, 2020 - 19:41:22
Django version 3.0.3, using settings 'myproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
Datenbankeinträge erstellen
Wir werden jetzt die Datenbank füllen, damit wir etwas im Frontend durchsuchen können.
Gehen wir zu http://127.0.0.1:8000/admin/ und geben Sie die soeben erstellten Administratoranmeldeinformationen ein, damit wir zwei Autoren und vier Artikel erstellen können:
- Klicken Sie im MYAPP-Bereich neben Autoren auf Speichern verknüpfen und erstellen Sie mindestens zwei Autoren.
- Klicken Sie im MYAPP-Bereich neben Artikel auf Speichern Verknüpfen und erstellen Sie mindestens zwei verschiedene Artikel für jeden Autor.
Beachten Sie, dass Sie Artikel hinzufügen müssen nachdem nachdem Sie einige Autoren erstellt haben, damit Sie sie verknüpfen können.
Durchsuchen Sie die Website!
Jetzt ist die Zeit zu sehen, wie alles zusammen spielt!
Voller SPA-Code
Sie können im gesamten Projektcode in meinem GitHub-Repository navigieren. luzdealba / djangovuejs.
Das ist wahrscheinlich das, woran Sie am meisten interessiert sind:
<!doctype html>
<html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Django and Vue.js</title> <style> .router-link-active { color: black; text-decoration: none; } </style> </head> <body class="bg-light"> <div class="bg-white container"> <div class="jumbotron"> <h1 class="display-4">Django and Vue.js</h1> <p class="lead"> Wouldn’t it be cool if you could prototype a custom web application that’s responsive (mobile ready), reactive (light-speed fast), with a full–featured back office site to manage the content; all of that in no time? Actually, with a mashup between Django’s and Vue.js, you can! 😁 </p> </div> <!-- Content --> <div id="myapp"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <router-link class="nav-link text-primary" to="/author/" > Go to Authors </router-link> </li> <li class="nav-item"> <router-link class="nav-link text-primary" to="/article/" > Go to Articles </router-link> </li> </ul> </nav> <br /> <router-view></router-view> </div> </div> <!-- Vue.js --> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue-router"></script> <script src="https://unpkg.com/vuex"></script> <!-- Vue templates --> <template id="article-list-template"> <div class="article-list"> <h2>Articles</h2> <article-item v-for="article in articles" v-bind:key="article.slug" v-bind:name="article.name" v-bind:slug="article.slug" v-bind:content="article.content" ></article-item> </div> </template> <template id="author-list-template"> <div class="author-list"> <h2>Authors</h2> <author-item v-for="author in authors" v-bind:key="author.slug" v-bind:name="author.name" v-bind:slug="author.slug" ></author-item> </div> </template> <template id="article-item-template"> <div class="article-item"> <span v-if="$route.params.slug"> <h3> <router-link v-bind:to="'/article/' + $route.params.slug + '/'" v-html="$store.getters.getArticleBySlug($route.params.slug)['name']" ></router-link> </h3> <div v-html="$store.getters.getArticleBySlug($route.params.slug)['content']"></div> </span> <span v-else> <h3> <router-link v-bind:to="'/article/' + slug + '/'" v-html="name" ></router-link> </h3> <div v-html="content"></div> <hr /> </span> </div> </template> <template id="author-item-template"> <div class="author-item"> <span v-if="$route.params.slug"> <b> <router-link v-bind:to="'/author/' + $route.params.slug + '/'"> [[ $store.getters.getAuthorBySlug($route.params.slug)['name'] ]] </router-link> </b> ([[ $route.params.slug ]]) </span> <span v-else> <b> <router-link v-bind:to="'/author/' + slug + '/'"> [[ name ]] </router-link> </b> ([[ slug ]]) </span> </div> </template> <!-- Vue app --> <script> // store const store = new Vuex.Store({ state: { authors: [ {% for author in authors %} { name: '{{ author.name }}', slug: '{{ author.slug }}', }, {% endfor %} ], articles: [ {% for article in articles %} { content: '{{ article.content | linebreaksbr }}', name: '{{ article.name }}', slug: '{{ article.slug }}', }, {% endfor %} ], }, getters: { getArticleBySlug: (state) => (slug) => { return state.articles.find(articles => articles.slug === slug) }, getAuthorBySlug: (state) => (slug) => { return state.authors.find(authors => authors.slug === slug) }, } }) // components ArticleList = Vue.component('article-list', { data: function () { return { articles: store.state.articles } }, template: '#article-list-template', }); AuthorList = Vue.component('author-list', { data: function () { return { authors: store.state.authors } }, template: '#author-list-template', }); ArticleItem = Vue.component('article-item', { delimiters: ['[[', ']]'], props: ['name', 'slug', 'content'], template: '#article-item-template', }); AuthorItem = Vue.component('author-item', { delimiters: ['[[', ']]'], props: ['name', 'slug'], template: '#author-item-template', }); // router const routes = [ { component: ArticleList, path: '/article/', }, { component: AuthorList, path: '/author/', }, { component: ArticleItem, path: '/article/:slug/', }, { component: AuthorItem, path: '/author/:slug/', }, ] const router = new VueRouter({ mode: 'history', routes: routes, }) // app const myapp = new Vue({ router, store, }).$mount('#myapp'); </script> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body>
</html>
Vorausschauend: Microservices!
Zu diesem Zeitpunkt haben Sie bereits einen soliden Prototyp, der als Proof of Concept um Ihren potenziellen Kunden oder Kollegen eine Idee zu präsentieren oder als Grundlage für Ihr eigenes Projekt.
Während die von uns erstellte Schnittstelle Datenbankregistrierungen darstellen kann, können Sie über das Front-End nicht wirklich auf andere Weise mit ihnen interagieren, z. B. neue Ergänzungen, Editionen vornehmen oder solche Einträge löschen. Dafür benötigen Sie eine API.
Ob Sie es glauben oder nicht, Die Implementierung eines Microservices über eine REST-API ist mit Django recht einfach. Alles was Sie brauchen ist das Django REST Framework Add-On, das sehr gut dokumentiert und wie alles in Django leistungsstark, flexibel und sicher ist.
Mit einer exponierten API können Sie als Nächstes Daten direkt auf Ihrem Frontend mit Vue.js verwalten. Ich kann die Details hier nicht behandeln, aber Sie können die “Verwenden von Axios zum Konsumieren von APIsArtikel in der Vue.js Kochbuch.
Fazit
Wie ist das für eine Einführung in die Full-Stack-Entwicklung? Wir haben ein Projekt als Prototyp erstellt, das die Grundlage für eine Webanwendung bilden kann.
Und ich habe nichts verwässert! Da wir Vuex-Speicher für die Statusverwaltung und Vue Router für den dynamischen Routenabgleich von Anfang an verwenden, müssen wir keine wesentlichen Änderungen vornehmen, wenn die Anwendung skaliert. Sie können es also im Wesentlichen von dort aus übernehmen und in die gewünschte Richtung erweitern - die Datenbank anpassen, die Benutzeroberfläche verbessern und sogar einen Microservice erstellen!
Seien Sie nicht schüchtern, wenn Ihre Python- oder JavaScript-Kenntnisse etwas eingeschränkt sind. Wir müssen alle irgendwo anfangen. Lesen Sie weiter, codieren Sie weiter und Bleib neugierig!
Quelle: https://www.sitepoint.com/web-app-prototype-django-vue/?utm_source=rss
