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

1. 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:

node -v
npm -v

2. Vue-Projekt erstellen
   Geben Sie den folgenden Befehl in die Befehlszeile ein, um ein neues Vue-Projekt zu erstellen:

vue create my-vue-app

Wählen Sie einige Grundeinstellungen entsprechend aus Eingabeaufforderungen wie Projektname, Projektkonfiguration usw.

3. Installieren Sie Vue Router und Vuex.
   Installieren Sie Vue Router und Vuex in Ihrem Vue-Projekt mit dem folgenden Befehl:

cd my-vue-app
npm install vue-router vuex

4. Erstellen Sie Komponenten HelloWorld.vue und fügen Sie den folgenden Code hinzu:
   

<template>
  <div>
    <h1 id="msg">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello, World!"
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

Routing konfigurieren
5. 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:
   

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;

Status konfigurieren Verwaltung
6. 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:
   

import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

Im Hauptteil Komponenten, Routing und Statusverwaltung in die Anwendung einführen
7. Fügen Sie Folgendes hinzu Code in die Datei main.js im Ordner src einfügen:
   

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");

Vier. Erstellen Sie das Backend

Umgebungsvorbereitung
1. 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:
   

python -V
pip -V

Django-Projekt erstellen
2. Geben Sie die folgenden Anweisungen in die Befehlszeile ein, um ein neues Django-Projekt zu erstellen:
   

django-admin startproject mydjangoapp

Django-Anwendung erstellen
3. Geben Sie ein Geben Sie in der Befehlszeile die folgenden Anweisungen ein, um eine Anwendung mit dem Namen mydjangoapp zu erstellen:
   

cd mydjangoapp
./manage.py startapp myapp

Konfigurieren Sie die Datenbank
4. Konfigurieren Sie die Datenbankverbindungsparameter in der Datei „settings.py“:
   

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": BASE_DIR / "db.sqlite3",
    }
}

Schreiben Sie API-Ansichten
5. Ansichten im Ordner myapp.py:
   

from django.http import JsonResponse

def hello_world(request):
    return JsonResponse({"message": "Hello, World!"})

Routing konfigurieren
6. Fügen Sie den folgenden Code in der Datei urls.py im Ordner mydjangoapp hinzu:
   

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path("api/hello", hello_world),
]

Starten Sie den Django-Entwicklungsserver
7. Führen Sie den folgenden Befehl im Projekt aus Stammverzeichnis zum Starten des Django-Entwicklungsservers:
   

./manage.py runserver

5. Gemeinsames Front-End- und Back-End-Debugging

Proxy-Konfiguration erstellen
1. Erstellen Sie eine Datei mit dem Namen vue.config.js im Stammverzeichnis des Vue-Projekts und fügen Sie die hinzu Folgender Code:
   

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        ws: true,
        changeOrigin: true
      }
    }
  }
};

Rufen Sie die API auf
2. Fügen Sie den folgenden Code in der HelloWorld.vue-Komponente hinzu:
   

<template>
  <div>
    <h1 id="msg">{{ msg }}</h1>
    <h2 id="Count-count">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>

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:

npm run serve

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:

./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!