How to use Vue with Django (including Auth) 🔒
Watch on YouTube
We'll set up a Vue.js frontend + a Django backend. Strong foundations for your production app. We'll also add auth 🔒 Simple and robust. No tokens, no DRF, no JWT. I'll also show you 5 things that you'll always want to add, including: 1. Page routing (using Vue Router) 2. Simple centralised state management (using Pinia) 3. Persistent state (e.g., refreshing the page and still being logged in) using simple local storage 4. How to register new users, with Vue and Django 5. Secure and simple auth. No tokens, no DRF. ✍️ Wriitten guide here: https://www.photondesigner.com/articles/vue-auth 📮 Get all my free weekly content here: https://www.photondesigner.com/#signup-form
Video summary
Cette vidéo présente la création d'une application full-stack en utilisant Django comme backend et Vue.js comme frontend. L'objectif est de créer les fondations d'une application complète prête pour la production.
Tout d'abord, le processus d'installation et de configuration de Django est détaillé. Cela inclut l'installation de Django et de Django CORS Headers, la création d'un projet Django appelé "core" et d'une application "Sim", ainsi que la configuration des URL, des middlewares et des paramètres CORS.
Ensuite, la création des vues Django est expliquée. Il y a des vues pour obtenir le jeton CSRF, se connecter, se déconnecter et enregistrer un utilisateur. Un formulaire Django est également créé pour l'enregistrement d'utilisateur.
La configuration du frontend Vue.js est ensuite abordée. Cela inclut l'installation de Vue Router et de Pinia (la bibliothèque de gestion d'état de Vue). Les composants de pages (Home, Login, Register) sont créés et le store Pinia est mis en place pour gérer l'état d'authentification de l'utilisateur.
Enfin, la vidéo montre comment faire fonctionner l'application en local, en démarrant le serveur Django et le serveur de développement Vue.js. Elle explique également comment les sessions et les cookies sont gérés entre le frontend et le backend.
Le résumé couvre les principales étapes de la mise en place de cette application full-stack, en mettant l'accent sur l'intégration entre le frontend Vue.js et le backend Django.