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
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.
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 routerLogin.vue、TaskList.vue和TaskDetail.vue三个页面组件，并编写相关的HTML和逻辑。这里不再展示具体代码，读者可以根据需要自行创建相关组件。api.js文件，用于发送API请求。这里我们使用Axios库来发送HTTP请求。具体的API请求代码可以根据后端API的设计来编写。store.js文件，并配置Vuex。我们将在store中存储用户信息和任务列表数据，并通过mutations和actions来修改和获取这些数据。至此，我们的前端开发工作就完成了。可以通过执行npm run serve命令来启动开发服务器，并在浏览器中访问http://localhost:8080来查看页面。
三、后端开发
创建Django4项目
在终端中执行以下命令来创建一个新的Django4项目：
django-admin startproject backend
创建应用
进入项目目录，并执行以下命令来创建一个新的应用：
cd backend python manage.py startapp tasks
设置数据库和模型
在项目的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)
四、前后端集成
运行后端服务器
在终端中执行以下命令来启动Django的开发服务器：
python manage.py runserver
api.js文件中配置API请求的base URL，使其指向后端服务器的地址和端口。router.jsrrreeeErstellen 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 Dateiapi.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!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
