Comment prototyper une application Web avec Django et Vue.js

Cet article montre comment prototyper rapidement une application Web réactive réactive à l'aide de Django et Vue.js, avec une interface d'administration complète. Nous couvrirons la configuration du projet, l'intégration de la base de données, la mise en œuvre de composants Vue.js, la gestion de l'état d'application avec Vuex et l'utilisation du routeur Vue pour une navigation transparente.

Caractéristiques de clé:

• Prototypage rapide des applications Web réactives et réactives.
• Développement complet de la pile complète avec Django et Vue.js.
• Interfaces utilisateur dynamiques à l'aide de composants Vue.js dans les modèles django.
• Gestion efficace de l'état à l'aide de Vuex.
• transitions de page lisse avec le routeur Vue et le répartiteur URL de Django.
• Test approfondi pour l'interaction des composants harmonieux.

1. Configuration du projet:

Cette section suppose que Python a installé Python. Pour des instructions détaillées, reportez-vous à la documentation officielle de Django sur l'installation.

• Créez un environnement virtuel: Utiliser virtualenv myenvironment (ou python3 -m venv myenvironment pour Python 3.3). Activez-le à l'aide de la commande appropriée pour votre système d'exploitation (voir l'article pour plus de détails).
• Installez django: Exécuter pip install django dans l'environnement activé.
• Créer un projet Django: Utiliser django-admin startproject myproject.
• Créez une application Django: Utiliser django-admin startapp myapp. N'oubliez pas d'ajouter myapp.apps.MyappConfig à INSTALLED_APPS dans myproject/settings.py.

2. Configuration de la base de données avec django:

Nous définirons la base de données backend à l'aide de modèles Django, qui s'intègrera plus tard à Vuex pour la gestion de l'État de frontend.

• Définir les modèles (MyApp / Models.py): Créer Article et Author Modèles avec des champs appropriés (voir l'article pour le code).
• Enregistrer les modèles dans l'administrateur (myapp / admin.py): enregistrer les modèles Article et Author (voir l'article pour le code).
• Créer des migrations: Run python manage.py makemigrations et python manage.py migrate.

3. Interface de base avec les composants Vue:

Cette section détaille l'intégration des composants Vue.js dans les modèles Django.

• Django View (myApp / Views.py): Créer une vue qui oblige les articles et les auteurs de la base de données et rend un modèle (voir l'article pour le code).
• Modèle Django (MyApp / Templates / MyApp / Template.html): Créez un modèle de base à l'aide de bootstrap (voir l'article pour le code). Ce modèle comprendra l'application Vue.js.
• Vue.js Composants: Créer des composants Vue pour les listes d'articles et les éléments et les éléments individuels (voir l'article pour le code). Remarquez l'utilisation des délimiteurs [[ et ]] pour éviter les conflits avec la langue du modèle de Django.

4. Connexion du magasin Vuex à la base de données Django:

Vuex gérera l'état d'application, connectant le frontend aux données backend Django.

• Vuex Store: Créez un magasin Vuex dans le modèle Django, en le remplissant avec des données obtenues à partir de la vue Django à l'aide du langage du modèle de Django (voir l'article pour le code). Cela inclut les Getters pour récupérer les données par Slug.

5. Routage avec Django et Vue Router:

Nous utiliserons le répartiteur URL de Django et le routeur Vue pour la navigation côté client transparente.

• URL Django (myproject / urls.py): Configurer les URL pour gérer différentes itinéraires (voir l'article pour le code).
• Vue Router: Définir les routes à l'aide du mode d'historique HTML5 du routeur Vue pour activer les transitions en douceur sans rechargement de page (voir l'article pour le code).

6. Test:

• Créer un superutiliser Django: Run python manage.py createsuperuser.
• Exécutez le serveur local: Exécuter python manage.py runserver.
• Répondez à la base de données: Accédez à l'interface d'administration ( https://www.php.cn/link/e86c39706a2a5033ed14f935353f015e ) pour ajouter des auteurs et des articles.
• Testez l'application: parcourez le site pour vérifier les fonctionnalités.

Code spa complet et développement ultérieur:

Le code complet de l'application à une seule page est disponible sur GitHub (lien fourni dans l'article d'origine). L'article discute également de l'élargissement de l'application en ajoutant une API REST en utilisant le cadre Django REST et en le consommant avec Axios dans Vue.js pour une fonctionnalité CRUD complète. Cela permettra de créer, de mettre à jour et de supprimer les entrées directement du frontend.

FAQS:

L'article se termine par une section FAQ complète portant sur divers aspects de l'intégration de Django et Vue.js, y compris le déploiement, les tests, la gestion des erreurs et les points d'intégration spécifiques entre les fonctionnalités de Django (Forms, ORM) et Vue.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!