Hur man prototyper en webbapp med Django och Vue.js

Skulle det inte vara coolt om du skulle kunna prototypa en anpassad webbapplikation som är det mottaglig (Mobil-ready), reaktiva (lätt hastighet), med en full funktion admin gränssnitt att hantera innehållet - allt på nolltid? Egentligen kan du använda Django och Vue.js! ????

0. Inledning: Full Stack Development 101

Jag kommer att täcka hur man prototyper en anpassad webbapp, och för att hålla den så kort och söt som möjligt är sammanhangsinformationen här ganska kort. Men jag kommer - förhoppningsvis - att tillhandahålla tillräckligt med resurser så att du vet vart du ska gå om du behöver mer information.

För detta ändamål kommer jag helt att kartlägga datahantering, presentation och routing mellan Django och Vue.js - så gör dig redo!

Om Django

Du kanske känner till Django, den Python-baserade webbram för perfektionister med tidsfrister Det är löjligt snabbt, lugnande säkert och extremt skalbar. Men om du inte vet så mycket om det kommer den här artikeln att fungera som en extremt snabb praktisk introduktion.

Om Vue.js

Samma sak med Vue.js, det progressiva JavaScript-ramverket Det är lättillgänglig, mångsidig och performant. Om du inte känner till det här får du en snabb och smutsig introduktion.

Jag kommer också att täcka två officiella Vue.js-bibliotek:

Python + JavaScript = VINNA!

För den här artikeln sätter vi ett publiceringsprojekt med ett grundläggande databas schema att spara authors och articlesoch en minimal användargränssnitt (UI) för att interagera med dem.

Förhoppningsvis kommer detta att fungera som en leksaksprogram att förstå hur man integrerar Django med Python-kod på baksidan med ett JavaScript-ramverk i frontend, att du senare kan anpassa dig efter dina egna behov.

1. Ställa in ett Django-projekt

Mycket snabbt kommer vi att skapa ett projekt från grunden. Om du redan vet hur du ska hantera Django-projekt kan du hoppa över det här avsnittet. Vi antar att du redan har det Python installerat.

För en mer djupgående guide, se Hur man installerar Django på Django-dokumentationssidan.

Python virtuella miljö

Låt oss öppna en konsol och skapa en virtuell miljö (se Virtuella miljöer och paket för mer 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

Kom inte ihåg vägarna, eftersom dessa kommer att ändras från system till system.

Låt oss komma åt och aktivera den virtuella miljön.

På Windows:

$ cd myenvironment
$ Scriptsactivate

På macOS och Linux:

$ cd myenvironment
$ source bin/activate

Django-paketet

Låt oss installera Django:

(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

En gång till, tänker inte på programversioner och filstorlekar eftersom dessa kommer att variera.

Projektet

Låt oss starta ett projekt som heter myproject:

(myenvironment) $ django-admin startproject myproject

Låt oss komma åt projektet:

(myenvironment) $ cd myproject

Appen

Starta en app som heter myapp:

(myenvironment) $ django-admin startapp myapp

Och lägg till myapp.apps.MyappConfig till INSTALLED_APPS konstant lista i myproject/settings.py för att aktivera appen.

2. Ställa in databasen med Django

Här definierar vi backend-databasen med Django, som vi senare kommer att integrera med en front-end-lagring med Vuex.

Django-modeller

Modeller är Djangos sätt att implementera en objektrelationellt databashanteringssystem (ORDBMS). Med andra ord, vanliga textfiler där du kan definiera databastabeller och fält, och varifrån dessa kommer att spridas till applikationslagret och DB-motorn.

Låt oss koda följande modeller för vår app i 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

Lägg märke till att vi implementerade en URL-snigel för både artiklar och författare.

För mer information, se Model API-referens på Django-dokumentationssidan.

Django Admin

Innan vi kan hantera dessa modeller via admin-webbplatsen måste vi först göra det register dem så att Django ställer dem tillgängliga för oss.

Låt oss enkelt redigera myapp/admin.py så att det ser ut så här:

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)

Läs mer om Django admin webbplats på Django-dokumentationssidan.

Django Migrations

Från Djangos Migrationsdokumentation:

Migreringar är Djangos sätt att sprida ändringar du gör i dina modeller (lägga till ett fält, ta bort en modell etc.) i ditt databasschema.

Kort sagt: migrationer gör det allt; inga SQL-kommandon krävs.

Låt oss först skapa migreringsfilerna:

(myenvironment) $ python manage.py makemigrations

Migrations for 'myapp': myappmigrations001_initial.py - Create model Author - Create model Article

Låt oss nu använda den informationen för att uppdatera databasen:

(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

Kom inte ihåg den långa listan. Det beror på att det var vår första migration, så inte bara vår Author och Article tabeller skapades, men också alla Djangos standardscheman.

För mer information, se Migrationsverksamhet på Django-dokumentationssidan.

3. Ett grundläggande gränssnitt med Vue-komponenter i en Django-mall

Här är en av de mest intressanta delarna av mashupen, eftersom vi blandar nära besläktade verktyg från olika tekniker.

Django View

Django går förbi model-view-controller (MVC) mjukvarudesignmönster, som delar upp den relaterade programlogiken i tre sammankopplade element.

Vi kodar följande vy i 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)

Lägg märke till att vi frågade alla artiklar och författare från databasen. Det kommer att vara praktiskt senare.

Se mer om skriva åsikter och klassbaserade vyer (API) på Django-dokumentationssidan.

Django mall

Django har en rik mallspråk med inbyggda malltaggar och filteroch ett API för Python-programmerare; men ja, du gissade det - vi täcker inte mycket av det här. 😅

Men vad vi kommer att göra är att använda Bootstraps startmall att ställa in mycket grundläggande navigationslayout för appen:

ljusgrå bakgrund
vit förgrund
centrerat innehåll

Så vi kodar följande mall i myapp/templates/myapp/template.html (du måste skapa underkataloger templates/myapp/ inom 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>

Läs mer om Django mallar.

Vue.js-mallar

Vue.js också har en mallsyntax tillgängliga, och det tillåter oss dessutom att skapa våra egna HTML-taggar.

Vi skapar fyra mallar: article-list, author-list, article-item och 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>

Fördelning

Vad vi gjorde här, i ett nötskal:

Listvy med v-for.
Datainbindning i HTML-attribut med v-bind.
Villkorlig återgivning med v-if och v-else.
Rå HTML-rendering med v-html.

$store och $route kommer att vara mer vettiga i ett ögonblick när vi introducerar lagring och routing.

Textinterpolering mellan Django och Vue.js mallar

Precis som med Django, den mest grundläggande formen av textinterpolering i Vue.js är med "Mustache" -syntaxen (dubbla lockiga parenteser).

Så här:

<span>Message: {{ msg }}</span>

För att undvika konflikter mellan de två, kommer vi att inställa den till att använda dubbla fyrkantiga parenteser istället:

delimiters: ['[[', ']]']

Vue.js-teman

Visste du att du kan "tema" Vue.js?

Vue.js-komponenter

Komponenter är återanvändbara Vue-instanser. Vad det betyder är att vi kan definiera en komponent, koda en HTML-mall för den och sedan använda den så många gånger som vi behöver den med Vue.js som hanterar DOM för oss.

Vi ska visa hela applikation på en sida (SPA) -kod till slut. Låt oss nu presentera några utdrag.

Precis som med mallar definierar vi fyra komponenter - ArticleList, AuthorList,, ArticleItemoch 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',
});

Fördelning

När du är i en komponent, data måste vara en funktion ($store kommer att förklaras på ett ögonblick).
Vi använder mallar tidigare definierad.
För att otvetydiga textinterpolering, se till att du ställer in delimiters som skiljer sig från Django ({{/}}).
Vi använder props listas som en matris för att skicka data till våra komponenter.

4. Ansluta Vue.js Store för att samla Djangos databas med Vuex

En rik frontend kan ha många löst kopplade komponenter, alla med sin egen uppsättning parametrar, som kan göra det komplicerat att dela data eller att hantera tillståndet för variabler.

Här är var vuex kommer till hands:

Det fungerar som en centraliserad butik för alla komponenter i en applikation, med regler som säkerställer att staten endast kan muteras på ett förutsägbart sätt.

Skapa en Vuex-butik

Låt oss skapa och definiera en butik i vår Django-mall, och låt oss använda data som delas i Django View:

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) }, }
})

Fördelning

Låt oss granska vad som just hände:

Vi har skapat en butik med Vuex.Store().
Vi definierade en Vuex-tillstånd där alla articles och authors samlas in.
Vi använde for slinga som är inbyggd i Django-mallarna för att iterera igenom alla articles och authors.
Vi har skapat två Vuex getters att få en artikel eller en författare av deras snigel, getArticleBySlug och getAuthorBySlug, Respektive.

Det finns mycket mer till Vuex, så se till att kontrollera Komma igång guide och API-referens.

5. Routing-URL: er mellan Django och Vue Router

Django har en kraftfull URL-avsändare, som vi kommer att använda i kombination med Vue.js-routing.

Vi skapar en applikation som:

användningar dynamisk ruttmatchning för att enkelt växla mellan sidor utan uppdateringar (se exempel)
fungerar med kapslade rutter (Se exempel)

Med Django

Reaktiv URL: er behöver vanligtvis en speciell konfiguration på servern för att fungera ordentligt, men Django låter oss designa webbadresser som vi vill, så vi behöver inte ställa omskrivningsregler för Apache eller NGINX.

Vi kommer att redigera myproject/urls.py så att den använder baskatalogen / som väg för vår 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),
]

Med Vue Router

Som standard använder Vue Router “hash-läge” (dvs: http: // site / # / path) som ett JavaScript-trick för att ladda delar av sidan med ankare. Men vi kommer att utnyttja Vue Router HTML5-historikläge, vilket innebär att alla våra webbadresser kommer att ändras sömlöst utan att ladda om sidan och utan att använda hashes.

Vi ställer in routern så att den matchar varje sökväg till deras respektive komponent som tidigare har definierats:

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,
})

Som vi ser är syntaxen för att definiera vägar något skiljer sig från Django, men det är i princip samma sak.

Läs mer om Vue router.

6. Testa allt

Nu när vi har alla bitarna tillsammans är det dags att göra några grå ruta testning och se hur saker fungerar!

Skapa en Django Superuser

Innan vi kan logga in på administratören måste vi skapa en superanvändare.

Låt oss skapa en administratör:

(myenvironment) $ python manage.py createsuperuser

Därefter anger du användarnamn, e-postadress och lösenord (två gånger).

Kör en lokal server

Vi kommer att köra Djangos inbyggda server med runserver att lansera webbplatsen på vårt lokala system.

På en konsol:

(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.

Skapa databasposter

Vi kommer nu att fylla i databasen så att vi kan bläddra i något i frontend.

Låt oss gå till http://127.0.0.1:8000/admin/ och ange administratörsinformation som du just har skapat så att vi kan skapa två författare och fyra artiklar:

Klicka på MYAPP-fönstret bredvid författare Lägg till länka och skapa minst två författare.
Klicka på. På MYAPP-fönstret bredvid artiklar Lägg till länka och skapa minst två olika artiklar för varje författare.

Lägg märke till att du måste lägga till artiklar efter efter att ha skapat några författare så att du kan länka dem.

Bläddra igenom webbplatsen!

Nu är det dags att se hur det spelar tillsammans!

Fullständig SPA-kod

Du kan navigera i hela projektkoden i mitt GitHub-arkiv, luzdealba / djangovuejs.

Hur som helst, det är förmodligen det du är mest intresserad av:

<!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>

Ser framåt: Microservices!

För närvarande har du redan en solid prototyp som kan fungera som en bevis på koncept att presentera en idé för dina kunder eller kollegor eller som en grund för ditt eget projekt.

Medan gränssnittet vi skapade kan presentera databasregister kan du inte verkligen interagera med dem på något annat sätt genom frontend, till exempel att göra nya tillägg, utgåvor eller ta bort sådana poster. För det behöver du ett API.

Tro det eller ej, att implementera en mikroservice via ett REST-API är ganska enkelt med Django. Allt du behöver är Django REST ramverk tillägg, som är extremt väl dokumenterat och som alla ting Django, kraftfullt, flexibelt och säkert.

Med ett exponerat API är nästa sak du kan göra att hantera data där på din frontend med Vue.js. Jag kan inte täcka detaljerna här, men du kan kontrollera "Använda Axios för att konsumera API: er”Artikel i Vue.js kokbok.

Inslag Up

Hur är det för en grundare på utveckling i full stack? Vi har prototypat ett projekt som kan vara grunden för en webbapplikation.

Och jag tappade inte ner någonting! Eftersom vi använder Vuex-lagring för tillståndshantering och Vue Router för dynamisk ruttmatchning från start, finns det inga väsentliga förändringar som vi behöver göra när applikationen skalas. Så du kan i princip ta det därifrån och expandera i vilken riktning du behöver - anpassa databasen, förbättra gränssnittet och till och med skapa en mikroservice!

Var inte blyg om din kunskap om Python eller JavaScript är något begränsad. Vi måste alla börja någonstans. Läs vidare, kod vidare och förbli nyfiken!

Källa: https://www.sitepoint.com/web-app-prototype-django-vue/?utm_source=rss

Hur man prototypar en webbapp med Django och Vue.js

0. Inledning: Full Stack Development 101

Om Django

Om Vue.js

Python + JavaScript = VINNA!

1. Ställa in ett Django-projekt

Python virtuella miljö

Django-paketet

Projektet

Appen

2. Ställa in databasen med Django

Django-modeller

Django Admin

Django Migrations

3. Ett grundläggande gränssnitt med Vue-komponenter i en Django-mall

Django View

Django mall

Vue.js-mallar

Fördelning

Textinterpolering mellan Django och Vue.js mallar

Vue.js-teman

Vue.js-komponenter

Fördelning

4. Ansluta Vue.js Store för att samla Djangos databas med Vuex

Skapa en Vuex-butik

Fördelning

5. Routing-URL: er mellan Django och Vue Router

Med Django

Med Vue Router

6. Testa allt

Skapa en Django Superuser

Kör en lokal server

Skapa databasposter

Bläddra igenom webbplatsen!

Fullständig SPA-kod

Ser framåt: Microservices!

Inslag Up

Senaste intelligens