Exercice pratique : pratique de développement full-stack Vue3+Django4

Exercice pratique : pratique de développement full-stack Vue3+Django4

Avec le développement rapide d'Internet, le modèle de développement de séparation du front-end et du back-end est devenu le courant dominant du développement Web moderne. En tant que frameworks de développement populaires, Vue et Django jouent un rôle important dans le développement front-end et back-end. Cet article présentera comment utiliser Vue3 et Django4 pour le développement full-stack et démontrera son processus pratique à travers un exemple pratique.

1. Planification du projet

Avant de commencer le développement, nous devons d'abord effectuer la planification du projet. Nous créerons un système de gestion de tâches simple dans lequel les utilisateurs pourront se connecter, créer des tâches, afficher des listes de tâches et mettre à jour le statut des tâches. Le système utilisera Vue3 comme framework front-end, Django4 comme framework back-end et utilisera des API pour la communication front-end et back-end.

2. Développement front-end

1. Créer un projet Vue3
   Tout d'abord, nous utilisons Vue CLI pour créer un nouveau projet Vue3. Exécutez la commande suivante dans le terminal :

   vue create frontend

   Sélectionnez les éléments de configuration requis en fonction des invites et attendez que le projet soit créé.

2. Définir le routage et les composants de la page
   Créez le fichier router.js dans le répertoire src et définissez le routage. Nous aurons trois pages : la page de connexion, la page de liste des tâches et la page de détails de la tâche. Ajoutez le code suivant dans router.js : router.js文件，并设置路由。我们将有三个页面：登录页面、任务列表页面和任务详情页面。在router.js中添加以下代码：

   import { createRouter, createWebHistory } from 'vue-router'
   import Login from './views/Login.vue'
   import TaskList from './views/TaskList.vue'
   import TaskDetail from './views/TaskDetail.vue'
   
   const routes = [
     {
    path: '/login',
    name: 'Login',
    component: Login
     },
     {
    path: '/taskList',
    name: 'TaskList',
    component: TaskList
     },
     {
    path: '/taskDetail/:id',
    name: 'TaskDetail',
    component: TaskDetail
     }
   ]
   
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes
   })
   
   export default router

3. 创建页面组件
   在src/views目录下创建Login.vue、TaskList.vue和TaskDetail.vue三个页面组件，并编写相关的HTML和逻辑。这里不再展示具体代码，读者可以根据需要自行创建相关组件。
4. 发送API请求
   在src目录下创建api.js文件，用于发送API请求。这里我们使用Axios库来发送HTTP请求。具体的API请求代码可以根据后端API的设计来编写。
5. 集成Vuex
   在src目录下创建store.js文件，并配置Vuex。我们将在store中存储用户信息和任务列表数据，并通过mutations和actions来修改和获取这些数据。

至此，我们的前端开发工作就完成了。可以通过执行npm run serve命令来启动开发服务器，并在浏览器中访问http://localhost:8080来查看页面。

三、后端开发

1. 创建Django4项目
   在终端中执行以下命令来创建一个新的Django4项目：

   django-admin startproject backend

2. 创建应用
   进入项目目录，并执行以下命令来创建一个新的应用：

   cd backend
   python manage.py startapp tasks

3. 设置数据库和模型
   在项目的settings.py中配置数据库信息，并在tasks应用的models.py中创建所需的模型。例如，任务模型可以定义如下：

   from django.db import models
   
   class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    status = models.CharField(max_length=20)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

4. 创建API视图
   在tasks应用的views.py中创建API视图，并定义相关的路由。使用Django的Rest Framework可以更便捷地创建API视图和路由。
5. 配置CORS
   由于前端和后端分别运行在不同的域名或端口上，我们需要进行跨域资源共享（CORS）的配置。通过在settings.py中进行配置即可实现跨域请求。

四、前后端集成

1. 运行后端服务器
   在终端中执行以下命令来启动Django的开发服务器：

   python manage.py runserver

2. 配置前端API请求
   在前端的api.js文件中配置API请求的base URL，使其指向后端服务器的地址和端口。
3. 配置前端路由
   在前端的router.jsrrreee

Créer des composants de page

Créez Login.vue, TaskList.vuedans le fichier src/views directory code> et TaskDetail.vue trois composants de page, et écrivez le code HTML et la logique associés. Le code spécifique n'est plus affiché ici, les lecteurs peuvent créer eux-mêmes les composants pertinents selon leurs besoins.

Envoyer une requête API

Créez le fichier api.js dans le répertoire src pour envoyer des requêtes API. Ici, nous utilisons la bibliothèque Axios pour envoyer des requêtes HTTP. Le code de requête API spécifique peut être écrit selon la conception de l'API back-end.

Intégrez Vuex🎜Créez le fichier store.js dans le répertoire src et configurez Vuex. Nous stockerons les informations utilisateur et les données de la liste de tâches dans le magasin, puis modifierons et obtiendrons ces données par le biais de mutations et d'actions. 🎜🎜🎜À ce stade, notre travail de développement front-end est terminé. Vous pouvez démarrer le serveur de développement en exécutant la commande npm run serve et accéder à http://localhost:8080 dans le navigateur pour afficher la page. 🎜🎜3. Développement back-end🎜🎜🎜🎜Créer un projet Django4🎜Exécutez la commande suivante dans le terminal pour créer un nouveau projet Django4 :🎜rrreee🎜🎜🎜Créer une application🎜Entrez le répertoire du projet et exécutez la commande suivante pour créer un nouveau Application : 🎜rrreee🎜🎜🎜Configurer la base de données et le modèle🎜 Configurez les informations de la base de données dans le settings.py du projet et créez les modèles requis dans le models.py de l'application de tâches. Par exemple, le modèle de tâche peut être défini comme suit : 🎜rrreee🎜🎜Créer une vue API🎜Créez la vue API dans vues.py de l'application de tâches et définissez les routes pertinentes. L'utilisation du Rest Framework de Django facilite la création de vues et de routes API. 🎜🎜Configurer CORS🎜Étant donné que le front-end et le back-end fonctionnent sur différents noms de domaine ou ports, nous devons configurer le partage de ressources entre domaines (CORS). Les requêtes inter-domaines peuvent être implémentées en configurant settings.py. 🎜🎜🎜4. Intégration front-end et back-end🎜🎜🎜🎜Exécutez le serveur back-end🎜Exécutez la commande suivante dans le terminal pour démarrer le serveur de développement Django :🎜rrreee🎜🎜Configurez la requête API front-end🎜 Dans le api.js du front-end, configurez l'URL de base de la requête API dans le fichier code> afin qu'elle pointe vers l'adresse et le port du serveur backend. 🎜🎜Configurer le routage front-end🎜Configurez le routage dans le fichier front-end <code>router.js en fonction des besoins réels. 🎜🎜🎜Maintenant, notre travail d'intégration front-end et back-end est terminé. Vous pouvez tester les fonctionnalités de votre application et communiquer avec le backend en accédant à l'URL du frontend. 🎜🎜5. Résumé🎜🎜Cet article présente comment utiliser Vue3 et Django4 pour le développement full-stack et démontre son processus pratique à travers un exemple pratique. Grâce au modèle de développement de séparation front-end et back-end, nous pouvons développer et maintenir plus efficacement des applications Web puissantes. J'espère que cet article pourra inspirer les débutants et les aider dans leur développement réel. S'il y a des lacunes, veuillez me corriger. 🎜

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!