
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
- Umgebungsvorbereitung
Zuerst müssen Sie Node.js und den NPM-Paketmanager installieren. Verwenden Sie nach Abschluss der Installation den folgenden Befehl, um die Version zu überprüfen:
- Vue-Projekt erstellen
Geben Sie den folgenden Befehl in die Befehlszeile ein, um ein neues Vue-Projekt zu erstellen:
Wählen Sie einige Grundeinstellungen entsprechend aus Eingabeaufforderungen wie Projektname, Projektkonfiguration usw.
- Installieren Sie Vue Router und Vuex.
Installieren Sie Vue Router und Vuex in Ihrem Vue-Projekt mit dem folgenden Befehl:
1 2 | cd my-vue-app
npm install vue-router vuex
|
Nach dem Login kopieren
- Erstellen Sie Komponenten HelloWorld.vue und fügen Sie den folgenden Code hinzu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: "Hello, World!"
};
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
|
Nach dem Login kopieren
Routing konfigurieren- Erstellen Sie einen Ordner mit dem Namen router unter dem Ordner src, erstellen Sie darin eine Datei mit dem Namen index.js und fügen Sie den folgenden Code hinzu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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;
|
Nach dem Login kopieren
Status konfigurieren Verwaltung- Erstellen Sie einen Ordner mit dem Namen „store“ unter dem Ordner „src“, erstellen Sie darin eine Datei mit dem Namen „index.js“ und fügen Sie den folgenden Code hinzu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import { createStore } from "vuex" ;
export default createStore({
state() {
return {
count : 0
};
},
mutations: {
increment(state) {
state. count ++;
}
}
});
|
Nach dem Login kopieren
Im Hauptteil Komponenten, Routing und Statusverwaltung in die Anwendung einführen- Fügen Sie Folgendes hinzu Code in die Datei main.js im Ordner src einfügen:
1 2 3 4 5 6 7 8 9 | 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" );
|
Nach dem Login kopieren
Vier. Erstellen Sie das Backend
Umgebungsvorbereitung- Zunächst müssen Sie Python und den Pip-Paketmanager installieren. Verwenden Sie nach Abschluss der Installation den folgenden Befehl, um die Version zu überprüfen:
Django-Projekt erstellen- Geben Sie die folgenden Anweisungen in die Befehlszeile ein, um ein neues Django-Projekt zu erstellen:
1 | django-admin startproject mydjangoapp
|
Nach dem Login kopieren
Django-Anwendung erstellen- Geben Sie ein Geben Sie in der Befehlszeile die folgenden Anweisungen ein, um eine Anwendung mit dem Namen mydjangoapp zu erstellen:
1 2 | cd mydjangoapp
./manage.py startapp myapp
|
Nach dem Login kopieren
Konfigurieren Sie die Datenbank - Konfigurieren Sie die Datenbankverbindungsparameter in der Datei „settings.py“:
1 2 3 4 5 6 | DATABASES = {
"default" : {
"ENGINE" : "django.db.backends.sqlite3" ,
"NAME" : BASE_DIR / "db.sqlite3" ,
}
}
|
Nach dem Login kopieren
Schreiben Sie API-Ansichten - Ansichten im Ordner myapp.py:
1 2 3 4 | from django.http import JsonResponse
def hello_world(request):
return JsonResponse({ "message" : "Hello, World!" })
|
Nach dem Login kopieren
Routing konfigurieren- Fügen Sie den folgenden Code in der Datei urls.py im Ordner mydjangoapp hinzu:
1 2 3 4 5 6 | from django.urls import path
from myapp.views import hello_world
urlpatterns = [
path( "api/hello" , hello_world),
]
|
Nach dem Login kopieren
Starten Sie den Django-Entwicklungsserver- Führen Sie den folgenden Befehl im Projekt aus Stammverzeichnis zum Starten des Django-Entwicklungsservers:
5. Gemeinsames Front-End- und Back-End-Debugging
Proxy-Konfiguration erstellen - Erstellen Sie eine Datei mit dem Namen vue.config.js im Stammverzeichnis des Vue-Projekts und fügen Sie die hinzu Folgender Code:
1 2 3 4 5 6 7 8 9 10 11 | module.exports = {
devServer: {
proxy: {
"/api" : {
target: "http://localhost:8000" ,
ws: true,
changeOrigin: true
}
}
}
};
|
Nach dem Login kopieren
Rufen Sie die API auf- Fügen Sie den folgenden Code in der HelloWorld.vue-Komponente hinzu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <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>
|
Nach dem Login kopieren
6. Führen Sie das Projekt aus
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:
Geben 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:
Ö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!