Ce ne serait pas cool si vous pouviez créer un prototype d'application Web personnalisée qui est réactive (prête pour les mobiles), réactive (rapide à la vitesse de la lumière), avec une fonctionnalité complète interface d'administration pour gérer le contenu – le tout en un rien de temps? En fait, en utilisant Django et Vue.js, vous pouvez! ?

0. Introduction: Full Stack Development 101

Je vais vous expliquer comment créer un prototype d’application Web personnalisée et pour la garder aussi courte et douce que possible, les informations de contexte ici seront plutôt brèves. Cependant, je fournirai – espérons-le – suffisamment de ressources pour que vous sachiez où aller si vous avez besoin de plus d'informations.

À cette fin, je vais complètement mash up la gestion des données, la présentation et le routage entre Django et Vue.js – donc préparez-vous!

À propos de Django

Vous connaissez peut-être Django le cadre Web basé sur Python pour les perfectionnistes avec des délais c'est ridiculement rapide, sécurisant et extrêmement évolutif . Mais si vous n'en savez pas grand-chose, cet article servira d'introduction pratique extrêmement rapide.

À propos de Vue.js

Même chose avec Vue.js le framework JavaScript progressif qui est accessible, polyvalent et performant . Si vous ne le connaissez pas, vous obtiendrez ici une introduction rapide et sale.

Je couvrirai également deux bibliothèques officielles de Vue.js:

Python + JavaScript = WIN!

Pour cet article, nous allons définir un projet de publication avec un schéma de base de données pour enregistrer auteurs et articles , et une interface utilisateur minimale (UI) pour interagir avec eux.

Espérons que cela servira de programme de jouet pour comprendre comment intégrer Django en utilisant du code Python à l'arrière avec un framework JavaScript à l'avant que vous pourrez adapter plus tard à vos propres besoins.

1. Configuration d'un projet Django

Très rapidement, nous allons configurer un projet à partir de zéro. Si vous savez déjà comment gérer les projets Django, vous pouvez ignorer cette section. Nous supposerons que vous avez déjà Python installé .

Pour un guide plus détaillé, voir Comment installer Django sur le site de documentation de Django.

Environnement virtuel Python

Ouvrons une console et créons un environnement virtuel (voir Environnements virtuels et packages pour plus d'informations):

 $ virtualenv myenvironment

 Utilisation du préfixe de base 'c: \ users \ luzdealba \ appdata \ local \ program \ python \ python37'
Nouvel exécutable python dans C:  Users  luzdealba  Development  myenvironment  Scripts  python.exe
Installation de setuptools, pip, roue…
terminé

Ne vous occupez pas des chemins, car ceux-ci changeront de système en système.

Accédons et activons l'environnement virtuel.

Sous Windows:

 $ cd myenvironment
$ Scripts  activate

Sur macOS et Linux:

 $ cd myenvironment
$ source bin / activate

Package Django

Installons Django:

 (myenvironment) $ pip install django

 Collection de django
  Téléchargement de Django-3.0.3-py3-none-any.whl (7,5 Mo)
Collecte sqlparse> = 0.2.2
  Téléchargement de sqlparse-0.3.1-py2.py3-none-any.whl (40 kB)
Collectionner pytz
  Utilisation de pytz-2019.3-py2.py3-none-any.whl en cache (509 Ko)
Collecte asgiref ~ = 3,2
  En train de télécharger asgiref-3.2.3-py2.py3-none-any.whl (18 kB)
Installation des packages collectés: sqlparse, pytz, asgiref, django
Asgiref-3.2.3 django-3.0.3 pytz-2019.3 sqlparse-0.3.1 installé avec succès

Encore une fois, ne vous occupez pas des versions de programme et des tailles de fichiers car elles varieront.

Le projet

Commençons un projet appelé myproject :

 (myenvironment) $ django-admin startproject myproject

Accédons au projet:

 (myenvironment) $ cd myproject

L'application

Démarrez une application appelée myapp :

 (monenvironnement) $ django-admin startapp myapp

Et ajoutez myapp.apps.MyappConfig à la liste de constantes INSTALLED_APPS dans myproject / settings.py pour activer l'application.

2. Configuration de la base de données avec Django

Ici, nous allons définir la base de données principale avec Django, que nous intégrerons plus tard avec un stockage frontal avec Vuex.

Modèles Django

Modèles est la façon dont Django implémente un système de gestion de base de données relationnelle objet (ORDBMS). En d'autres termes, des fichiers en texte brut dans lesquels vous pouvez définir des tables et des champs de base de données, et d'où ils se propageront vers la couche d'application et le moteur de base de données.

Codons les modèles suivants pour notre application dans myapp / models. py :

 à partir des modèles d'importation django.db

Article de classe (models.Model):
    "" "Schéma de table pour stocker les 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 __ (auto):
        retourne '% s'% self.name

Auteur de la classe (models.Model):
    "" "Schéma de table pour stocker les auteurs." ""
    name = models.CharField (max_length = 64)
    slug = models.CharField (default = '', max_length = 64)

    def __str __ (auto):
        retourne '% s'% self.name

Notez que nous avons implémenté un slug d'URL pour les articles et les auteurs.

Pour plus d'informations, consultez Référence de l'API modèle sur le site de documentation de Django.

Django Admin

Avant de pouvoir gérer ces modèles via le site d'administration, nous devons d'abord les enregistrer afin que Django les mette à notre disposition.

Modifions simplement myapp / admin. py pour qu'il ressemble à ceci:

 de django.contrib import admin

from .models import Article
de .models import Author

# enregistrer des modèles à utiliser dans le site d'administration
admin.site.register (article)
admin.site.register (Auteur)

En savoir plus sur le site d'administration Django sur le site de documentation de Django.

Migrations Django

Extrait de la documentation de Django Migrations :

Les migrations sont le mode de fonctionnement de Django propager les modifications que vous apportez à vos modèles (ajouter un champ, supprimer un modèle, etc.) dans votre schéma de base de données.

En bref: les migrations font tout ; aucune commande SQL requise.

Commençons par créer les fichiers de migration:

 (myenvironment) $ python manage.py makemigrations

 Migrations pour 'myapp':
  myapp  migrations  0001_initial.py
    - Créer un modèle d'auteur
    - Créer un article modèle

Utilisons maintenant ces informations pour mettre à jour la base de données:

 (myenvironment) $ python manage.py migrate

 Opérations à effectuer:
  Appliquer toutes les migrations: admin, auth, contenttypes, myapp, sessions
Exécution de migrations:
  Application de contenttypes.0001_initial ... OK
  Appliquer auth.0001_initial ... OK
  Application de admin.0001_initial ... OK
  Application de admin.0002_logentry_remove_auto_add ... OK
  Application de admin.0003_logentry_add_action_flag_choices ... OK
  Application de contenttypes.0002_remove_content_type_name ... OK
  Appliquer auth.0002_alter_permission_name_max_length ... OK
  Appliquer auth.0003_alter_user_email_max_length ... OK
  Appliquer auth.0004_alter_user_username_opts ... OK
  Appliquer auth.0005_alter_user_last_login_null ... OK
  Appliquer auth.0006_require_contenttypes_0002 ... OK
  Appliquer auth.0007_alter_validators_add_error_messages ... OK
  Appliquer auth.0008_alter_user_username_max_length ... OK
  Appliquer auth.0009_alter_user_last_name_max_length ... OK
  Appliquer auth.0010_alter_group_name_max_length ... OK
  Application d'auth.0011_update_proxy_permissions ... OK
  Application de myapp.0001_initial ... OK
  Application de sessions.0001_initial ... OK

Ne vous occupez pas de la longue liste. C'est parce que c'était notre première migration, donc non seulement nos tableaux Auteur et Article ont été créés, mais aussi tous les schémas par défaut de Django.

Pour plus d'informations, voir Opérations de migration sur le site de documentation de Django

3. Une interface de base avec des composants Vue dans un modèle Django

Voici l'une des parties les plus intéressantes du mashup, car nous mélangerons des outils étroitement liés de différentes technologies.

Vue Django

Django utilise le modèle de conception logicielle modèle-vue-contrôleur (MVC), qui divise la logique du programme en trois éléments interconnectés.

Nous coderons la vue suivante dans myapp / views.py :

 depuis django.shortcuts import render

from .models import Article
de .models import Author

def frontend (demande):
    "" "Vue.js s'occupe de tout le reste." ""
    articles = Article.objects.all ()
    auteurs = Author.objects.all ()

    data = {
        «articles»: articles,
        «auteurs»: auteurs,
    }

    return render (request, 'myapp / template.html', data)

Notez que nous avons interrogé tous les articles et les auteurs de la base de données. Cela sera utile plus tard.

En savoir plus sur écriture des vues et vues basées sur les classes ( API ) sur le site de documentation de Django.

Gabarit Django

Django possède un langage de gabarit riche avec balises et filtres de gabarit intégrés et une API pour les programmeurs Python ; mais oui, vous l'avez deviné – nous ne couvrirons pas beaucoup de cela ici. 1965

Ce que nous allons faire, cependant, est d'utiliser le modèle Starter de Bootstrap pour définir une très disposition de navigation de base pour l'application:

• fond gris clair
• premier plan blanc
• contenu centré

Nous allons donc coder le modèle suivant dans myapp / templates / myapp / template.html (vous devrez créer les sous-répertoires templates / myapp / dans myapp / ):

  
    
    
    

    
    

    
  
  
    

      
 Prototypage d'une application Web avec Django et Vue.js 

      
    

    
              
                 

En savoir plus sur Modèles Django .

Modèles Vue.js

Vue.js également a une syntaxe de modèle disponible, et elle en plus nous permet de créer nos propres balises HTML.

Nous allons créer quatre modèles: article-list author-list article-item et auteur-élément :

Répartition

Ce que nous avons fait ici, en bref:

1. Rendu de liste avec v-for .
2. Liaison de données dans les attributs HTML avec v-bind .
3. Rendu conditionnel avec v-if et v-else .
4. Rendu HTML brut avec v-html .

$ store

. et $ route auront plus de sens dans un moment où nous introduirons le stockage et le routage.

Interpolation de texte entre Django et les modèles Vue.js

Tout comme avec Django, la forme la plus basique de interpolation de texte dans Vue.js utilise la syntaxe «Moustache» (crochets doubles).

Comme ceci:

 Message: {{msg}} 

Afin d'éviter les conflits entre les deux, lors de l'instanciation de Vue.js, nous le configurons pour utiliser des crochets doubles à la place:

 délimiteurs: ['[[', ']] ']

Thèmes Vue.js

Saviez-vous que vous pouvez «thème» Vue.js?

Composants Vue.js

Les composants sont des instances Vue réutilisables. Cela signifie que nous pouvons définir un composant, coder un modèle HTML pour celui-ci, puis l'utiliser autant de fois que nous en avons besoin avec Vue.js gérant le DOM pour nous.

Nous ' ll montrera à la fin le code d'application (SPA) pour une seule page . Pour l'instant, introduisons quelques extraits.

Comme pour les modèles, nous allons définir quatre composants - ArticleList AuthorList, ArticleItem et 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 {author: store.state.authors}},
  modèle: '# author-list-template',
});

ArticleItem = Vue.component ('article-item', {
  délimiteurs: ['[[', ']] »],
  accessoires: ['name', 'slug', 'content'],
  modèle: '# article-item-template',
});

AuthorItem = Vue.component ('author-item', {
  délimiteurs: ['[[', ']] »],
  accessoires: ['name', 'slug'],
  modèle: '# author-item-template',
});

Répartition

1. Lorsque dans un composant, les données doivent être une fonction ( $ store sera expliqué dans un instant).
2. Nous utilisons le modèles définis précédemment.
3. Pour lever l'ambiguïté de l'interpolation de texte, assurez-vous de définir des délimiteurs différents de ceux de Django ( {{ / }} [19459026
4. Nous utilisons les accessoires répertoriés comme un tableau pour transmettre des données à nos composants.

4. Connexion du magasin Vue.js pour collecter la base de données de Django à l'aide de Vuex

Un frontal riche peut avoir de nombreux composants à couplage lâche chacun avec son propre ensemble de paramètres , ce qui peut compliquer le partage de données ou la gestion de l'état des variables.

Voici où Vuex est utile:

Il sert de magasin centralisé pour tous les composants d'une application, avec des règles garantissant que l'état ne peut être muté que de manière prévisible.

Création d'un magasin Vuex

Créons et définissons un magasin dans notre modèle Django, et utilisons les données partagées dans la vue Django:

 const store = new Vuex.Store ({
  Etat: {
      auteurs: [
      {% 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: (état) => (slug) => {
      return state.articles.find (articles => articles.slug === slug)
    },
    getAuthorBySlug: (état) => (slug) => {
      return state.authors.find (auteurs => auteurs.slug === slug)
    },
  }
})

Répartition

Passons en revue ce qui vient de se passer:

1. Nous avons créé un magasin en utilisant Vuex.Store () .
2. Nous avons défini un état Vuex où tous les articles et auteurs sont collectés.
3. Nous avons utilisé la boucle pour intégrée aux modèles Django pour parcourir tous les éléments articles et auteurs .
4. Nous avons créé deux Vuex getters pour obtenir un article ou un auteur par leur limace, getArticleBySlug et getAuthorBySlug respectivement.

Il y a beaucoup plus dans Vuex, alors assurez-vous de vérifier le Mise en route et le référence API .

5. Routage d'URL entre Django et Vue Router

Django dispose d'un puissant répartiteur d'URL que nous utiliserons en combinaison avec Routage Vue.js .

Nous créerons un application qui:

1. utilise la correspondance dynamique des itinéraires pour basculer de manière transparente entre les pages sans actualisation (voir exemple )
2. fonctionne avec itinéraires imbriqués (voir ] exemple )

Avec Django

Les URL réactives ont généralement besoin d'une configuration spéciale sur le serveur pour fonctionner correctement, mais Django nous permet de concevoir des URL comme bon nous semble, donc pas besoin de définir des règles de réécriture pour Apache ou NGINX.

Nous éditerons myproject / urls.py afin qu'il utilise le répertoire de base / comme route pour notre application :

 depuis django.contrib import admin
depuis le chemin d'importation de django.urls

# n'oubliez pas d'importer la vue de l'application!
depuis les vues d'importation myapp en tant que vues_app

urlpatterns = [
    chemin ('admin /', admin.site.urls),

    # chemins pour notre application
    chemin ('', myapp_views.frontend),
    chemin ('article /  /', myapp_views.frontend),
    chemin ('author /  /', myapp_views.frontend),
]

Avec Vue Router

Par défaut, Vue Router utilise le «mode de hachage» (c'est-à-dire: http: // site / # / path) comme une astuce JavaScript pour charger des parties de la page à l'aide des ancres . Cependant, nous exploiterons le mode historique HTML5 de Vue Router ce qui signifie que toutes nos URL changeront de manière transparente sans recharger la page et sans utiliser de hachage.

Nous allons définir le routeur pour faire correspondre chaque chemin à leur composant respectif précédemment défini:

 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: 'histoire',
  itinéraires: itinéraires,
})

Comme nous pouvons le voir, la syntaxe pour définir les chemins est légèrement différente de celle de Django, mais c'est essentiellement la même chose.

En savoir plus sur le Vue Router . [19659166] 6. Tout tester

Maintenant que nous avons tous les éléments réunis, il est temps de faire des tests de boîte grise et de voir comment les choses fonctionnent!

Créer un superutilisateur Django

Avant de pouvoir connectez-vous à l'administrateur, nous devrons créer un superutilisateur.

Créons un administrateur:

 (monenvironnement) $ python manage.py createuperuser

Ensuite, vous entrerez le nom d'utilisateur, l'adresse e-mail et le mot de passe (deux fois).

Exécutez un serveur local

Nous exécuterons le serveur intégré de Django avec runserver pour lancer le site Web sur notre système local.

Sur une console:

 (myenvironment) $ python manage.py runserver

 Surveillance des modifications de fichiers avec StatReloader
Exécution de vérifications du système ...

La vérification du système n'a identifié aucun problème (0 désactivé).
09 mars 2020-19: 41: 22
Django version 3.0.3, utilisant les paramètres 'myproject.settings'
Démarrage du serveur de développement à http://127.0.0.1:8000/
Quittez le serveur avec CTRL-BREAK.

Créer des entrées de base de données

Nous allons maintenant remplir la base de données afin que nous puissions parcourir quelque chose sur le front-end.

Dirigeons-nous vers http://127.0.0.1:8000/admin/ et entrez les informations d'identification d'administrateur vous venez de créer pour que nous puissions créer deux auteurs et quatre articles:

1. Dans le volet MYAPP, à côté d'Auteurs, cliquez sur le lien Ajouter et créez au moins deux auteurs.
2. Dans le volet MYAPP, à côté des articles, cliquez sur le lien Ajouter et créez au moins deux articles différents pour chaque auteur.

Notez que vous devez ajouter des articles après avoir créé quelques auteurs afin de pouvoir les associer.

Parcourir le site!

Il est maintenant temps de voir comment tout cela se joue ensemble! [19659004]

Code SPA complet

Vous pouvez parcourir tout le code du projet dans mon référentiel GitHub, luzdealba / djangovuejs .

Quoi qu'il en soit, c'est probablement ce qui vous intéresse le plus: [19659082] Django et Vue.js