Partage de compétences pratiques : développement de projets de nouvelles technologies Vue3+Django4

Ces dernières années, la technologie front-end s'est développée rapidement et Vue.js a attiré beaucoup d'attention en tant qu'excellent framework front-end. Avec la sortie officielle de Vue.js3 et l'arrivée prochaine de Django4, combiner les deux pour développer de nouveaux projets technologiques est sans aucun doute une bonne solution qui peut briser les goulots d'étranglement techniques et améliorer l'efficacité du développement de projets. Cet article partagera quelques conseils pratiques pour aider les développeurs à se sentir plus à l'aise dans le processus de développement de projets technologiques Vue3+Django4.

Tout d'abord, pour démarrer un nouveau projet Vue3+Django4, vous devez d'abord mettre en place un environnement de développement. L'installation de Vue3 présente quelques modifications par rapport à Vue2. Vous pouvez désormais utiliser la commande boot pour créer un nouveau projet. Installez Vue CLI et créez un nouveau projet à l'aide de la commande suivante :

npm install -g @vue/cli
vue create my-project

Cela créera automatiquement un nouveau projet Vue3 et installera les dépendances localement.

Ensuite, nous devons installer Django4, qui peut être installé à l'aide de la commande suivante :

pip install Django==4.0.*

Une fois l'installation terminée, vous pouvez créer un nouveau projet Django :

django-admin startproject myproject

Ensuite, vous devez configurer la communication entre Vue3 et Django4. Étant donné que Vue3 et Django4 sont deux projets complètement indépendants, CORS (Cross-Origin Resource Sharing) doit être utilisé pour gérer les problèmes inter-domaines. Dans le fichier settings.py de Django, recherchez et modifiez le contenu suivant :

INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ORIGIN_ALLOW_ALL = True

De cette façon, le traitement inter-domaines de Django4 est configuré.

Ensuite, nous implémenterons l'interaction de données entre Vue3 et Django4. Pour l'interaction front-end et back-end, nous pouvons utiliser l'API RESTful. Dans le projet Vue3, nous pouvons utiliser la bibliothèque axios pour effectuer des requêtes HTTP. Tout d'abord, nous devons installer axios :

npm install axios

Ensuite, ajoutez le code suivant au fichier main.js dans le projet Vue3 :

import axios from 'axios'
Vue.prototype.$http = axios

De cette façon, vous pouvez utiliser axios dans le projet Vue3 pour envoyer des requêtes.

Dans les projets Django4, nous pouvons utiliser les vues de classe et les sérialiseurs de Django pour gérer les requêtes et les réponses. Tout d'abord, créez une nouvelle application Django :

python manage.py startapp myapp

Ensuite, écrivez une vue de classe dans le fichier myapp/views.py pour gérer la logique de demande et de réponse. Par exemple, nous pouvons créer une vue de classe nommée "HelloView" :

from rest_framework.views import APIView
from rest_framework.response import Response

class HelloView(APIView):
    def get(self, request):
        return Response({"message": "Hello, Vue3+Django4!"})

Ensuite, ajoutez le code suivant dans le fichier myproject/urls.py :

from myapp.views import HelloView

urlpatterns = [
    ...
    path('hello/', HelloView.as_view()),
    ...
]

De cette façon, nous avons implémenté une interface API simple dans Django4.

Enfin, implémentons l’interaction des données entre le front-end et le back-end. Dans le projet Vue3, vous pouvez créer un nouveau composant pour envoyer des requêtes et obtenir des données. Par exemple, dans le fichier Hello.vue du projet Vue3 :

<template>
  <div>
    <button @click="getData">获取数据</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getData() {
      this.$http.get('http://localhost:8000/hello/')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

De cette façon, lorsque l'on clique sur le bouton, le front-end enverra une requête au back-end et récupèrera les données.

À ce stade, nous avons terminé la construction du nouveau projet technologique Vue3+Django4 et l'interaction de base des données front-end et back-end. Pendant le développement du projet, les fonctionnalités peuvent continuer à être étendues en fonction de besoins spécifiques. Dans le même temps, Vue3 et Django4 ont apporté de nombreuses nouvelles fonctionnalités et améliorations. Les développeurs peuvent mieux les maîtriser et les appliquer dans le développement de projets en étudiant des documents officiels et des exemples de référence.

Pour résumer, Vue3+Django4 est une combinaison technologique puissante qui peut aider les développeurs à développer des projets techniques plus efficacement. Dans cet article, nous partageons des conseils pratiques sur la mise en place d'un environnement de développement, la configuration du traitement inter-domaines et la réalisation d'interactions de données front-end et back-end. Nous espérons que cela sera utile aux développeurs. À l'avenir, il y aura davantage d'améliorations et de nouvelles fonctionnalités dans Vue3 et Django4, et nous pourrons continuer à les explorer et à les appliquer pour réaliser des projets plus puissants.

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!