Praktischer Erfahrungsaustausch: Vue3+Django4 Full-Stack-Projektentwicklungsleitfaden

Praktischer Erfahrungsaustausch: Vue3+Django4 Full-Stack-Projektentwicklungsleitfaden

Einführung:
Im heutigen Zeitalter des hochentwickelten Internets ist die Full-Stack-Entwicklung zu einer Richtung geworden, auf die immer mehr Entwickler achten und von der sie lernen . Das Vue-Framework ist derzeit eines der beliebtesten Front-End-Frameworks und Django ist ein leistungsstarkes Python-Back-End-Framework. Ihre Kombination kann uns ein umfassendes Full-Stack-Entwicklungserlebnis bieten. In diesem Artikel wird vorgestellt, wie Sie mit Vue3 und Django4 ein vollständiges Full-Stack-Projekt erstellen, und einige Entwicklungserfahrungen und Codebeispiele teilen.

1. Umgebungsvorbereitung
Bevor Sie mit dem Projekt beginnen, müssen Sie Umgebungsvorbereitungen treffen. Stellen Sie sicher, dass die folgende Software installiert ist:

1. Node.js und npm: werden zum Installieren und Verwalten von Front-End-Abhängigkeiten verwendet.
2. Python und Pip: werden zum Installieren und Verwalten von Backend-Abhängigkeiten verwendet.
3. Vue CLI: Befehlszeilentool zum Erstellen von Vue-Projekten.
4. Django: zum Erstellen und Verwalten von Backend-Projekten.

2. Erstellen Sie ein Vue3-Projekt
Zuerst verwenden wir Vue CLI, um ein Vue3-Projekt zu erstellen. Öffnen Sie die Befehlszeilenschnittstelle und führen Sie den folgenden Befehl aus:

$ vue create vue_project

Folgen Sie den Befehlszeilenanweisungen, wählen Sie die benötigte Konfiguration aus und warten Sie, bis das Projekt erstellt wird.

3. Erstellen Sie ein Django-Projekt
Als nächstes erstellen wir mit Django ein Back-End-Projekt. Führen Sie den folgenden Befehl auf der Befehlszeilenschnittstelle aus:

$ django-admin startproject django_project

Dadurch wird ein Ordner mit dem Namen django_project im aktuellen Verzeichnis erstellt und das Grundgerüst eines Projekts generiert.

4. Konfigurieren Sie die Front-End- und Back-End-Verbindungen
In diesem Schritt müssen wir die Front-End- und Back-End-Verbindungen konfigurieren, damit Front- und Back-End miteinander kommunizieren können. Erstellen Sie zunächst eine Datei .env.development im Verzeichnis vue_project/src und fügen Sie den folgenden Inhalt hinzu: .env.development，并添加以下内容：

VUE_APP_BACKEND_URL=http://localhost:8000

这里的http://localhost:8000是Django后端运行的地址。

接下来，打开vue_project/src/main.js文件，添加以下代码到createApp之前：

import axios from 'axios'
axios.defaults.baseURL = process.env.VUE_APP_BACKEND_URL

这个代码段设置了axios的默认基础URL为我们刚才配置的后端地址。

五、开发前端页面
现在，我们可以开始开发前端页面了。Vue3的语法与Vue2略有不同，但大体上相似。Vue3提供了更加强大的组合式API，可以更好地管理代码逻辑。下面是一个简单的例子。

首先，在vue_project/src/components目录下创建一个名为HelloWorld.vue的组件文件，并添加以下内容：

<template>
  <div class="hello">
    <h1 id="message">{{ message }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    return {
      message
    }
  }
}
</script>

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

这个组件显示了一个红色的标题，标题内容通过ref定义的响应式变量设置。

为了在页面中使用这个组件，我们需要在vue_project/src/App.vue中引入它。首先，删除原有的内容，然后添加以下代码：

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Arial', sans-serif;
}
</style>

这里我们导入了刚才创建的HelloWorld.vue组件，并在页面中引用它。

六、开发后端API
在Django项目中，我们需要创建API来提供后端服务。以创建一个简单的用户API为例。

首先，在django_project目录下执行以下命令，创建一个名为users的应用：

$ python manage.py startapp users

在users目录下创建一个名为views.py的文件，并添加以下代码：

from django.http import JsonResponse

def get_users(request):
    users = [
        {"id": 1, "name": "Alice"},
        {"id": 2, "name": "Bob"},
        {"id": 3, "name": "Charlie"}
    ]
    return JsonResponse(users, safe=False)

这个简单的视图函数返回一个带有用户信息的JSON响应。

接下来，打开django_project/django_project/urls.py文件，并添加以下代码：

from django.urls import path
from users.views import get_users

urlpatterns = [
    path('api/users', get_users),
]

这个代码段将get_users视图函数映射到路径/api/users上。

七、前后端通信
为了让前端可以访问后端API，我们需要使用axios发送HTTP请求。回到vue_project/src/components/HelloWorld.vue文件，在setup函数中添加以下代码：

import axios from 'axios'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    axios.get('/api/users').then((response) => {
      console.log(response.data)
    })
    return {
      message
    }
  }
}

这个代码段使用axios发送一个GET请求到/api/users，并打印返回的数据。

八、运行项目
最后，我们只需要将前后端项目分别运行起来就可以了。

在vue_project目录下执行以下命令：

$ npm install
$ npm run serve

在django_project目录下执行以下命令：

$ python manage.py runserver

现在，打开浏览器并访问http://localhost:8080rrreee

Der http://localhost:8000 hier ist Django The Adresse, an der das Terminal läuft.

Als nächstes öffnen Sie die Datei vue_project/src/main.js und fügen vor createApp den folgenden Code hinzu:

rrreee🎜Dieses Code-Snippet setzt die Standard-Basis-URL von axios auf die Backend-Adresse, die wir gerade konfiguriert haben. 🎜🎜5. Entwickeln Sie die Frontend-Seite. Jetzt können wir mit der Entwicklung der Frontend-Seite beginnen. Die Syntax von Vue3 unterscheidet sich geringfügig von der von Vue2, ist aber im Allgemeinen ähnlich. Vue3 bietet eine leistungsfähigere kombinierte API, die die Codelogik besser verwalten kann. Unten finden Sie ein einfaches Beispiel. 🎜🎜Erstellen Sie zunächst eine Komponentendatei mit dem Namen HelloWorld.vue im Verzeichnis vue_project/src/components und fügen Sie den folgenden Inhalt hinzu: 🎜rrreee🎜Diese Komponente zeigt einen roten Titel an und der Titelinhalt ist responsiv Variableneinstellungen, definiert durch Ref. 🎜🎜Um diese Komponente auf der Seite verwenden zu können, müssen wir sie in vue_project/src/App.vue einführen. Löschen Sie zunächst den ursprünglichen Inhalt und fügen Sie dann den folgenden Code hinzu: 🎜rrreee🎜Hier importieren wir die gerade erstellte Komponente HelloWorld.vue und verweisen auf der Seite darauf. 🎜🎜6. Back-End-API entwickeln🎜Im Django-Projekt müssen wir eine API erstellen, um Back-End-Dienste bereitzustellen. Nehmen Sie als Beispiel die Erstellung einer einfachen Benutzer-API. 🎜🎜Führen Sie zunächst den folgenden Befehl im Verzeichnis django_project aus, um eine Anwendung mit dem Namen users zu erstellen: 🎜rrreee🎜Erstellen Sie eine Datei mit dem Namen views.py im Benutzerverzeichnis und fügen Sie sie hinzu den folgenden Code: 🎜rrreee🎜 Diese einfache Ansichtsfunktion gibt eine JSON-Antwort mit Benutzerinformationen zurück. 🎜🎜Öffnen Sie als Nächstes die Datei django_project/django_project/urls.py und fügen Sie den folgenden Code hinzu: 🎜rrreee🎜Dieses Code-Snippet ordnet die Ansichtsfunktion get_users dem Pfad /api/users zu. Code >Nach oben. 🎜🎜7. Front-End- und Back-End-Kommunikation🎜Damit das Front-End auf die Back-End-API zugreifen kann, müssen wir Axios zum Senden von HTTP-Anfragen verwenden. Gehen Sie zurück zur Datei vue_project/src/components/HelloWorld.vue und fügen Sie den folgenden Code in der Funktion <code>setup hinzu: 🎜rrreee🎜Dieses Code-Snippet verwendet Axios, um eine GET-Anfrage an /api zu senden /users code> und drucken Sie die zurückgegebenen Daten aus. 🎜🎜8. Führen Sie das Projekt aus🎜Schließlich müssen wir nur noch die Front-End- und Back-End-Projekte separat ausführen. 🎜🎜Führen Sie den folgenden Befehl im Verzeichnis vue_project aus: 🎜rrreee🎜Führen Sie den folgenden Befehl im Verzeichnis django_project aus: 🎜rrreee🎜Öffnen Sie nun den Browser und besuchen Sie <code>http://localhost:8080, wenn alles Wenn alles gut läuft, sollten Sie die von der Backend-API zurückgegebenen Daten in der Konsole sehen können. 🎜🎜Zusammenfassung: 🎜Dieser Artikel stellt vor, wie man mit Vue3 und Django4 ein komplettes Full-Stack-Projekt erstellt, und gibt einige praktische Erfahrungen und Codebeispiele weiter. Durch diesen Full-Stack-Entwicklungsansatz können wir Webanwendungen mit Front-End- und Back-End-Trennung effizienter erstellen. Ich hoffe, dass dieser Artikel Entwicklern helfen kann, die Full-Stack-Entwicklung erlernen. 🎜

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