Praktische Übung: Vue3+Django4 Full-Stack-Entwicklungspraxis

Praktische Übung: Vue3 + Django4 Full-Stack-Entwicklungspraxis

Mit der rasanten Entwicklung des Internets ist das Entwicklungsmodell der Trennung von Front- und Back-End zum Mainstream der modernen Webentwicklung geworden. Als zwei beliebte Entwicklungsframeworks spielen Vue und Django eine wichtige Rolle in der Front-End- und Back-End-Entwicklung. In diesem Artikel wird die Verwendung von Vue3 und Django4 für die Full-Stack-Entwicklung vorgestellt und der praktische Prozess anhand eines praktischen Beispiels demonstriert.

1. Projektplanung

Bevor wir mit der Entwicklung beginnen, müssen wir zunächst eine Projektplanung durchführen. Wir werden ein einfaches Aufgabenverwaltungssystem erstellen, in dem sich Benutzer anmelden, Aufgaben erstellen, Aufgabenlisten anzeigen und den Status von Aufgaben aktualisieren können. Das System verwendet Vue3 als Front-End-Framework, Django4 als Back-End-Framework und verwendet APIs für die Front-End- und Back-End-Kommunikation.

2. Front-End-Entwicklung

1. Vue3-Projekt erstellen
   Zuerst verwenden wir Vue CLI, um ein neues Vue3-Projekt zu erstellen. Führen Sie den folgenden Befehl im Terminal aus:

   vue create frontend

   Wählen Sie die erforderlichen Konfigurationselemente gemäß den Eingabeaufforderungen aus und warten Sie, bis das Projekt erstellt wird.

2. Routing und Seitenkomponenten festlegen
   Erstellen Sie die Datei router.js im src-Verzeichnis und legen Sie das Routing fest. Wir werden drei Seiten haben: die Anmeldeseite, die Aufgabenlistenseite und die Aufgabendetailseite. Fügen Sie den folgenden Code in router.js hinzu: 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

Seitenkomponenten erstellen

Erstellen Sie Login.vue, TaskList.vueim src/views Verzeichniscode> und TaskDetail.vue drei Seitenkomponenten und schreiben zugehöriges HTML und Logik. Der spezifische Code wird hier nicht mehr angezeigt, Leser können bei Bedarf selbst relevante Komponenten erstellen.

API-Anfrage senden

Erstellen Sie die Datei api.js im src-Verzeichnis zum Senden von API-Anfragen. Hier verwenden wir die Axios-Bibliothek zum Senden von HTTP-Anfragen. Der spezifische API-Anforderungscode kann entsprechend dem Design der Back-End-API geschrieben werden.

Vuex integrieren🎜Erstellen Sie die Datei store.js im src-Verzeichnis und konfigurieren Sie Vuex. Wir speichern Benutzerinformationen und Aufgabenlistendaten im Speicher und ändern und erhalten diese Daten durch Mutationen und Aktionen. 🎜🎜🎜Zu diesem Zeitpunkt ist unsere Front-End-Entwicklungsarbeit abgeschlossen. Sie können den Entwicklungsserver starten, indem Sie den Befehl npm run servo ausführen und im Browser auf http://localhost:8080 zugreifen, um die Seite anzuzeigen. 🎜🎜3. Backend-Entwicklung🎜🎜🎜🎜Django4-Projekt erstellen🎜Führen Sie den folgenden Befehl im Terminal aus, um ein neues Django4-Projekt zu erstellen:🎜rrreee🎜🎜🎜Anwendung erstellen🎜Geben Sie den folgenden Befehl ein, um ein zu erstellen Neue Anwendung: 🎜rrreee🎜🎜🎜Datenbank und Modell einrichten🎜 Konfigurieren Sie die Datenbankinformationen in der Datei „settings.py“ des Projekts und erstellen Sie die erforderlichen Modelle in der Datei „models.py“ der Aufgabenanwendung. Das Aufgabenmodell kann beispielsweise wie folgt definiert werden: 🎜rrreee🎜🎜API-Ansicht erstellen🎜Erstellen Sie die API-Ansicht in „views.py“ der Aufgabenanwendung und definieren Sie die relevanten Routen. Die Verwendung des Rest Frameworks von Django erleichtert die Erstellung von API-Ansichten und -Routen. 🎜🎜CORS konfigurieren🎜Da Front-End und Back-End auf unterschiedlichen Domänennamen oder Ports laufen, müssen wir die domänenübergreifende Ressourcenfreigabe (CORS) konfigurieren. Durch die Konfiguration von Settings.py können domänenübergreifende Anfragen umgesetzt werden. 🎜🎜🎜4. Front-End- und Back-End-Integration🎜🎜🎜🎜Führen Sie den Back-End-Server aus🎜Führen Sie den folgenden Befehl im Terminal aus, um den Django-Entwicklungsserver zu starten:🎜rrreee🎜🎜Konfigurieren Sie die Front-End-API-Anfrage🎜 Konfigurieren Sie im api.js des Frontends die Basis-URL der API-Anfrage in der Codedatei so, dass sie auf die Adresse und den Port des Backend-Servers verweist. 🎜🎜Front-End-Routing konfigurieren🎜Konfigurieren Sie das Routing in der Front-End-Datei <code>router.js entsprechend den tatsächlichen Anforderungen. 🎜🎜🎜Jetzt sind unsere Front-End- und Back-End-Integrationsarbeiten abgeschlossen. Sie können die Funktionalität Ihrer Anwendung testen und mit dem Backend kommunizieren, indem Sie auf die URL des Frontends zugreifen. 🎜🎜5. Zusammenfassung🎜🎜Dieser Artikel stellt die Verwendung von Vue3 und Django4 für die Full-Stack-Entwicklung vor und demonstriert den praktischen Prozess anhand eines praktischen Beispiels. Durch das Front-End- und Back-End-Trennungsentwicklungsmodell können wir leistungsstarke Webanwendungen effizienter entwickeln und warten. Ich hoffe, dieser Artikel kann Anfängern Inspiration bieten und bei der tatsächlichen Entwicklung helfen. Sollten Mängel vorliegen, korrigieren Sie mich bitte. 🎜

Das obige ist der detaillierte Inhalt vonPraktische Übung: Vue3+Django4 Full-Stack-Entwicklungspraxis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!