Heim > Artikel > Web-Frontend > Erstellen einer Full-Stack-Anwendung: Detaillierte Erläuterung der Vue3+Django4-Projektentwicklung
Erstellen einer Full-Stack-Anwendung: Detaillierte Erläuterung der Vue3+Django4-Projektentwicklung
1 Einführung
Mit der rasanten Entwicklung des Internets hat die Full-Stack-Entwicklung immer mehr Aufmerksamkeit erhalten. Full-Stack-Entwickler können sowohl für die Front-End- als auch für die Back-End-Entwicklungsarbeit verantwortlich sein und so die Entwicklungseffizienz und die Gesamtqualität des Projekts verbessern. In diesem Artikel wird detailliert beschrieben, wie eine Full-Stack-Anwendung erstellt wird, und es wird erläutert, wie Vue3 und Django4 als Entwicklungsframework verwendet werden.
2. Technischer Überblick
Bevor wir eine Full-Stack-Anwendung erstellen, müssen wir einige wichtige technische Konzepte verstehen. Vue3 ist ein einfaches, flexibles und effizientes JavaScript-Framework, mit dem moderne Webanwendungen erstellt werden können. Django4 ist ein leistungsstarkes und benutzerfreundliches Python-Webframework für die schnelle Entwicklung sicherer und zuverlässiger Webanwendungen.
3. Erstellen Sie das Frontend
node -v npm -v
vue create my-vue-app
Wählen Sie einige Grundeinstellungen entsprechend aus Eingabeaufforderungen wie Projektname, Projektkonfiguration usw.
cd my-vue-app npm install vue-router vuex
<template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default { data() { return { msg: "Hello, World!" }; } }; </script> <style scoped> h1 { color: blue; } </style>
import { createRouter, createWebHistory } from "vue-router"; import HelloWorld from "../components/HelloWorld.vue"; const routes = [ { path: "/", name: "HelloWorld", component: HelloWorld } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router;
import { createStore } from "vuex"; export default createStore({ state() { return { count: 0 }; }, mutations: { increment(state) { state.count++; } } });
import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; createApp(App) .use(router) .use(store) .mount("#app");
python -V pip -V
django-admin startproject mydjangoapp
cd mydjangoapp ./manage.py startapp myapp
DATABASES = { "default": { "ENGINE": "django.db.backends.sqlite3", "NAME": BASE_DIR / "db.sqlite3", } }
from django.http import JsonResponse def hello_world(request): return JsonResponse({"message": "Hello, World!"})
from django.urls import path from myapp.views import hello_world urlpatterns = [ path("api/hello", hello_world), ]
./manage.py runserver
module.exports = { devServer: { proxy: { "/api": { target: "http://localhost:8000", ws: true, changeOrigin: true } } } };
<template> <div> <h1>{{ msg }}</h1> <h2>Count: {{ count }}</h2> <button @click="increment">Increment</button> </div> </template> <script> export default { data() { return { msg: "", count: 0 }; }, created() { fetch("/api/hello") .then(response => response.json()) .then(data => { this.msg = data.message; }); }, methods: { increment() { this.$store.commit("increment"); } }, computed: { count() { return this.$store.state.count; } } }; </script>
Geben Sie das Stammverzeichnis des Vue-Projekts in der Befehlszeile ein und führen Sie zum Starten den folgenden Befehl aus der Front-End-Entwicklungsserver:
npm run serveGeben Sie in einem anderen Befehlszeilenfenster das Stammverzeichnis des Django-Projekts ein und führen Sie den folgenden Befehl aus, um den Back-End-Entwicklungsserver zu starten:
./manage.py runserverÖffnen Sie nun den Browser und besuchen Sie http:/ /localhost:8080, Sie werden eine Meldung mit den Seiten „Hello, World!“ und „Count: 0“ sehen. Klicken Sie auf die Schaltfläche „Inkrementieren“ und „Anzahl“ wird automatisch um 1 erhöht. 7. Zusammenfassung
Durch die ausführliche Einführung dieses Artikels haben wir gelernt, wie man eine Full-Stack-Anwendung mit Vue3 als Front-End-Framework und Django4 als Back-End-Framework erstellt, und den gemeinsamen Debugging-Prozess demonstriert das Front- und Back-End anhand von Codebeispielen. Die Full-Stack-Entwicklung ist von großer Bedeutung für die Verbesserung der Entwicklungseffizienz und der Projektqualität. Ich hoffe, dass dieser Artikel für Sie hilfreich ist. Ich wünsche Ihnen viel Erfolg auf dem Weg zur Full-Stack-Entwicklung!
Das obige ist der detaillierte Inhalt vonErstellen einer Full-Stack-Anwendung: Detaillierte Erläuterung der Vue3+Django4-Projektentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!