Résumé de l'expérience pratique : points clés du développement de projets full-stack Vue3+Django4

Résumé de l'expérience pratique : Points clés du développement de projets full-stack Vue3+Django4

Introduction :
Avec le développement rapide d'Internet, le développement full-stack est devenu un modèle de développement populaire. Vue3 et Django4 sont actuellement l'un des frameworks front-end et back-end les plus populaires. En tant que framework JavaScript moderne, Vue3 peut fournir une excellente conception et réactivité de l'interface utilisateur ; Django4 est un framework Python rapide, sûr et extensible, adapté à la création d'applications Web de haute qualité.

Cet article résumera les points clés du développement de projets full-stack Vue3+Django4 sur la base de l'expérience pratique, et joindra quelques exemples de code.

1. Initialisation du projet

1. Initialisation du projet Vue3
   Tout d'abord, nous devons installer la dernière version de Vue CLI, installez-la via la commande suivante :

   npm install -g @vue/cli

   Copier après la connexion

   Ensuite, utilisez Vue CLI pour créer un nouveau projet Vue :

   vue create my-project

   Copier après la connexion

   In Pendant le processus de création d'un projet, vous pouvez choisir la configuration appropriée, comme la sélection de la version Vue3, l'ajout de plug-ins, etc.

2. Initialisation du projet Django4
   Utilisez la commande suivante pour installer Django4 :

   pip install Django==4.0.0

   Copier après la connexion

   Ensuite, créez un nouveau projet Django via la commande suivante :

   django-admin startproject my_project

   Copier après la connexion

Deuxième séparation front-end et back-end

Dans Vue3 +Développement de projets full-stack Django4, la séparation du front-end et du back-end est un modèle de développement courant. Le front-end est responsable de la conception de l’interface utilisateur et de la logique d’interaction utilisateur, tandis que le back-end est responsable du traitement des données et des opérations logiques.

1. Développement front-end
   Vue3 fournit une syntaxe simple et élégante et de nombreuses fonctions pratiques, telles que la composantisation, la liaison de données réactive, le routage et la gestion de l'état, etc. Voici un exemple simple de composant Vue3 :

   <template>
     <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
     </div>
   </template>
   
   <script>
   import { ref } from 'vue';
   
   export default {
     setup() {
    const message = ref('Hello, Vue3!');
    
    const updateMessage = () => {
      message.value = 'Updated Message';
    };
   
    return {
      message,
      updateMessage,
    };
     },
   };
   </script>

   Copier après la connexion

2. Développement backend
   Django4 fournit des modèles, des vues, un routage et d'autres fonctions puissants pour créer facilement des interfaces API backend. Voici un exemple simple de fonction de vue Django4 :

   from django.http import JsonResponse
   
   def hello(request):
    return JsonResponse({'message': 'Hello, Django4!'})

   Copier après la connexion

   Ici, nous utilisons JsonResponse pour renvoyer une réponse au format JSON.

3. Interaction des données

Dans le développement du projet full-stack Vue3+Django4, l'interaction des données front-end et back-end est très importante. Nous utilisons généralement le protocole HTTP pour la transmission des données.

1. Demande de données frontales
   Dans Vue3, nous pouvons utiliser la bibliothèque axios pour envoyer des requêtes HTTP. Voici un exemple d'utilisation de axios pour envoyer une requête GET : axios库来发送HTTP请求。以下是一个使用axios发送GET请求的示例：

   import axios from 'axios';
   
   axios.get('/api/data')
     .then(response => {
    console.log(response.data);
     })
     .catch(error => {
    console.error(error);
     });

   Copier après la connexion

2. 后端数据处理
   在Django4中，我们可以使用django.views模块来处理HTTP请求。以下是一个处理GET请求的Django4视图函数示例：

   from django.http import JsonResponse
   
   def get_data(request):
    data = {
        'name': 'John',
        'age': 25,
    }
    return JsonResponse(data)

   Copier après la connexion

   这里我们返回一个包含姓名和年龄的JSON响应。

四、项目部署

当开发完成后，我们需要将Vue3前端和Django4后端部署到服务器上以供访问。

1. 前端部署
   在Vue3中，我们可以使用npm run build命令来构建生产环境的前端代码。构建完成后，生成的静态文件将存放在dist目录下。将dist目录下的文件部署到Web服务器上即可。

2. 后端部署
   对于Django4，我们可以使用gunicorn等WSGI服务器将Django应用部署在服务器上。以下是使用gunicorn

   gunicorn my_project.wsgi:application

   Copier après la connexion
   Traitement des données backend
Dans Django4, nous pouvons utiliser le module django.views pour gérer HTTP demandes . Voici un exemple de fonction de vue Django4 qui gère une requête GET :

rrreee

Ici, nous renvoyons une réponse JSON contenant le nom et l'âge.

🎜🎜4. Déploiement du projet🎜🎜Une fois le développement terminé, nous devons déployer le front-end Vue3 et le back-end Django4 sur le serveur pour y accéder. 🎜🎜🎜Déploiement front-end🎜Dans Vue3, nous pouvons utiliser la commande npm run build pour créer le code front-end pour l'environnement de production. Une fois la construction terminée, les fichiers statiques générés seront stockés dans le répertoire dist. Déployez simplement les fichiers du répertoire dist sur le serveur Web. 🎜🎜🎜Déploiement backend🎜Pour Django4, nous pouvons utiliser des serveurs WSGI tels que gunicorn pour déployer des applications Django sur le serveur. Voici un exemple de commande pour déployer Django4 à l'aide de gunicorn : 🎜rrreee🎜 peut être configuré en fonction des besoins réels, tels que la liaison des adresses IP et des ports, etc. 🎜🎜🎜🎜Résumé : 🎜Cet article résume les points clés du développement de projets full-stack Vue3+Django4, y compris l'initialisation du projet, la séparation front-end et back-end, l'interaction des données et le déploiement du projet. Grâce à ces points clés et exemples de code, je pense que les lecteurs peuvent rapidement commencer à développer des projets full-stack Vue3+Django4 et obtenir de bons résultats de développement. J'espère que cet article sera utile aux lecteurs ! 🎜

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!