Exemple SPA construit avec Django et Vue.js

Ces dernières années, SPA (Single Page Application) est devenue un modèle populaire de développement Web. Comparé aux applications multipages traditionnelles, SPA est plus rapide et plus fluide, et il est également plus convivial et plus pratique pour les développeurs. Cet article partagera un exemple SPA construit sur la base de Django et Vue.js, dans l'espoir de vous fournir des références et de l'inspiration.

Django est un framework Web Python bien connu doté de puissantes capacités de développement back-end. Vue.js est un framework frontal JavaScript léger qui peut aider les développeurs à créer rapidement des interactions avec l'interface utilisateur tout en évitant les problèmes de performances causés par les opérations DOM. En combinant ces deux frameworks, nous pouvons créer une application SPA puissante et conviviale.

Jetons un coup d’œil au processus de mise en œuvre spécifique.

Étape 1 : Créer le backend de Django

Tout d'abord, nous devons créer un projet backend à l'aide de Django. Vous pouvez utiliser le propre outil de ligne de commande de Django pour créer un nouveau projet, tel que :

$ django-admin startproject myproject

Ensuite, nous pouvons utiliser la fonction de définition de modèle de Django pour définir la structure de données dont nous avons besoin. Par exemple, si nous voulons développer une application de blog, nous pouvons créer une application appelée « Blog » et définir un modèle appelé « Post » :

# blog/models.py
from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    pub_date = models.DateTimeField(auto_now_add=True)

Ce modèle représente un article de blog, comprenant le titre, le contenu et la date de publication trois champs.

Nous devons également créer une interface API RESTful pour ce modèle afin de faciliter les appels front-end. Vous pouvez utiliser le plug-in DRF (Django Rest Framework) de Django pour créer une vue RESTful standard :

# blog/views.py
from rest_framework import generics
from .models import Post
from .serializers import PostSerializer

class PostList(generics.ListCreateAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

class PostDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

Ici, nous avons créé deux vues, l'une est une vue PostList pour afficher une liste de tous les articles, et l'autre est pour afficher les détails d’un seul article, vue PostDetail. Notez que nous avons introduit ici un fichier nommé "serializers.py", qui contient le sérialiseur du modèle Post que nous avons défini, qui est utilisé pour convertir les instances de modèle au format JSON.

Étape 2 : Construire le front-end de Vue.js

Une fois le backend en place, nous pouvons commencer à construire le front-end. Nous créons un nouveau projet Vue.js et ajoutons quelques dépendances nécessaires :

$ vue init webpack myapp
$ cd myapp
$ npm install --save axios vue-router vuex

Ici, nous utilisons Vue Router et Vuex, Vue Router est utilisé pour la gestion du routage et Vuex est utilisé pour la gestion de l'état.

Ensuite, nous créons un nouveau composant "Post" pour afficher la liste des articles. Vous pouvez créer un fichier nommé "PostList.vue" dans le répertoire "components" :

<!-- PostList.vue -->
<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      <h3>{{ post.title }}</h3>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
    };
  },
  created() {
    axios
      .get('/api/posts/')
      .then(response => {
        this.posts = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
};
</script>

Ce code représente l'affichage de la liste d'articles et obtient les données de l'API back-end via Axios.

Ensuite, nous devons définir des règles de routage afin que les utilisateurs puissent accéder au composant. Des règles de routage peuvent être ajoutées dans le fichier "index.js" sous le répertoire "router" :

import Vue from 'vue';
import Router from 'vue-router';
import PostList from '@/components/PostList';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'PostList',
      component: PostList,
    },
  ],
});

Ici, nous mappons le chemin "/" vers notre composant "PostList".

Étape 3 : Utiliser Vuex pour la gestion de l'état

La dernière fonction à implémenter est la gestion de l'état. Nous devons stocker les données obtenues à partir de l'API backend dans Vuex et les afficher si nécessaire. Pour ce faire, nous devons d'abord créer un magasin Vuex :

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    posts: [],
  },
  mutations: {
    SET_POSTS(state, posts) {
      state.posts = posts;
    },
  },
  actions: {
    fetchPosts({ commit }) {
      return axios.get('/api/posts/').then(({ data }) => {
        commit('SET_POSTS', data);
      });
    },
  },
});

Ici, nous créons une propriété d'état appelée "posts" et définissons une opération "SET_POSTS" pour mettre à jour la propriété.

Ensuite, nous devons connecter le composant PostList au magasin Vuex pour l'acquisition de données et les mises à jour de statut :

<!-- PostList.vue -->
<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      <h3>{{ post.title }}</h3>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: mapState(['posts']),
  created() {
    this.fetchPosts();
  },
  methods: mapActions(['fetchPosts']),
};
</script>

Ici, nous utilisons les fonctions auxiliaires "mapState" et "mapActions" fournies par Vuex pour mapper le statut et les opérations de Vuex au composant. milieu. Lorsque le composant est créé, nous obtenons les données de l'API et mettons à jour l'état via la méthode "fetchPosts".

À ce stade, nous avons terminé l'intégration de Django et Vue.js et construit une application SPA complète. Exécutez l'application et accédez au chemin "/" pour voir l'effet d'affichage de la liste d'articles.

Résumé

Cet article présente le processus de création d'une application SPA à l'aide de Django et Vue.js. Par rapport aux applications multipages traditionnelles, SPA peut offrir une meilleure expérience utilisateur et est plus facile à maintenir et à développer. J'espère que cet exemple pourra vous fournir quelques références et inspirations, et je vous souhaite d'aller de plus en plus loin sur la voie du développement web !

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!