Une traduction de l'article a été préparée avant le début du cours Python Web Developer .
introduction
Maintenant, je travaille sur un projet très intéressant. Et tout y est compliqué, car le projet lui-même est à très grande échelle, et je m'y occupe seul pendant mon temps libre, tout en travaillant à plein temps. Par conséquent, je dois être efficace. Heureusement, j'utilise Django avec son approche «batterie incluse» .J'utilise toutes les fonctionnalités de Django, ce qui accélère le développement, et je ne voudrais pas perdre de vue son moteur de template. Par conséquent, le backend pour Django et le frontend pour JavaScript SPA ne sont pas une option pour moi. Cependant, même le développeur backend le plus passionné doit admettre que certaines choses doivent être implémentées côté client. Les actions utilisateur mineures ne devraient pas nécessiter de rechargement de page. De plus, certaines parties de l'application Web que je crée nécessitent une interaction utilisateur assez compliquée.Par tradition, on pourrait mélanger Django et jQuery pour obtenir le comportement souhaité. Mais maintenant, il existe de nouvelles technologies JavaScript comme React et Vue. Puisque notre objectif est de trouver un framework que nous pouvons utiliser avec Django sans tout réécrire, nous utiliserons Vue comme une alternative plus facile. Dans cet article, je vais vous montrer comment commencer à utiliser Vue avec Django avec un minimum d'effort.Installation et configuration
L'une des raisons d'utiliser Vue est son excellente documentation . Il contient de nombreux exemples, une recherche décente et une table des matières claire. Le but de cet article est de montrer que vous pouvez commencer à utiliser Vue dans vos projets Django immédiatement sans la configuration compliquée qui dure des heures. Par conséquent, nous utiliserons la méthode de connexion la plus simple Vue.js, en l'ajoutant avec via la balise <script>.<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Nous sommes maintenant prêts à créer notre première instance Vue.js:<div id="app">
{{ message }}
</div>
var app = new Vue({
delimiters: ["[[", "]]"],
el: '#app',
data: {
message: 'Hello Vue!'
}
})
J'ai pris cet exemple du guide de démarrage officiel. Mais il y a autre chose. Par défaut, Django et Vue utilisent les mêmes balises de modèle. Par conséquent, nous devons séparer explicitement Vue de Django pour éviter les conflits avec le moteur de modèle Django.Accéder aux données Django depuis Vue
La manière la plus simple d'obtenir des données est d'utiliser le filtre intégré jscon_scriptde Django . De cette façon, vous pouvez immédiatement commencer à utiliser vos modèles Django comme données pour les instances de Vue.En HTML:{{ django_template_variable|json_script:"djangoData" }}
Et puis en JavaScript, nous chargeons les données dans une variable:let jsVariable = JSON.parse(document.getElementById('djangoData').textContent);
Et elle est prête à l'emploi avec Vue:new Vue({
delimiters: ["[[", "]]"],
el: '#app',
data: jsVariable
})
Exécution de demandes asynchrones sur le backend
L'une des tâches les plus courantes à la partie frontale de Vue consiste à interroger l'application serveur sur le backend. Avec une application Django complète, nous n'avons pas besoin de le faire à chaque action de l'utilisateur. Dans certains cas, un rechargement de page complète est excellent, et le système de modèles Django fournira tous les avantages. Mais pour améliorer l'expérience utilisateur et tirer pleinement parti de Vue, il se peut que nous devions toujours faire des demandes backend dans certains cas.Vue elle-même ne sait pas comment gérer les requêtes. Dans cet article, je vais utiliser axioscar il est également recommandé par la documentation officielle de Vue. Vous pouvez choisir d'autres alternatives. Pour passer le mécanisme de protection CSRF de Django, axios doit inclure le cookie approprié dans ses requêtes. Le moyen le plus simple consiste à définir les valeurs axios globales par défaut:axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
De plus, nous pouvons créer une instance axios avec les paramètres nécessaires:var instance = axios.create({
xsrfCookieName: 'csrftoken',
xsrfHeaderName: "X-CSRFTOKEN",
});
Votre modèle Django doit contenir une balise {% csrf_token %}ou, alternativement, la vue correspondante doit utiliser un décorateur ensure_csrf_cookie(). Le reste du backend par défaut pour une session Django pour l'authentification fonctionnera prêt à l'emploi, ce qui signifie que vous pouvez annoter vos services sur le backend avec des choses comme loginRequiredça et cela fonctionnera simplement. Pour faire une demande, vous pouvez utiliser axios:axios.post('/django/backend/endpoint', {
data: jsVariable
})
.then(function (response) {
// handle response
})
.catch(function (error) {
// handle error
});
Cet appel peut être effectué à partir du mountedhook de l'instance Vue ou de tout autre endroit où vous pouvez mettre du code JavaScript.Si vous avez activé CSRF_USE_SESSIONS CSRF_COOKIE_HTTPONLYDjango dans les paramètres, vous devrez lire le jeton CSRF dans le DOM. Pour en savoir plus à ce sujet, consultez la documentation officielle de Django .Conclusion
Lorsque vous recherchez Google sur Django + Vue, la plupart des résultats de recherche concernent la façon d'utiliser Django sur le backend et Vue pour un projet distinct sur le frontend. Avoir deux projets indépendants complique le travail et vous perdez l'accès au système de modèles Django, qui à son tour est un moyen très efficace de gagner du temps. D'un autre côté, l'accès à un framework comme Vue peut faire des merveilles dans le monde des applications web qui vont au-delà de la fonctionnalité CRUD.Heureusement, nous n'avons pas besoin de choisir entre eux. Ce guide montre que vous pouvez bien suivre deux lapins!
Extension des fonctionnalités de Django (webinaire gratuit).