Master-Kerntechnologien: Vue3+Django4-Full-Stack-Entwicklung

Master-Kerntechnologien: Vue3+Django4 Full-Stack-Entwicklung

In der modernen Softwareentwicklung erregt die Full-Stack-Entwicklung immer mehr Aufmerksamkeit. Full-Stack-Entwicklungsingenieure können Aufgaben wie Front-End- und Back-End-Entwicklung sowie Datenbankoperationen gleichzeitig erledigen. In diesem Artikel untersuchen wir, wie man Vue3 und Django4, zwei beliebte Entwicklungsframeworks, für die Full-Stack-Entwicklung verwendet, und stellen einige Codebeispiele bereit.

1. Vorwort

Vue3 ist die neueste Vue.js-Version, die Entwicklern eine bessere Leistung und Wartbarkeit bietet. Django4 ist ein beliebtes Back-End-Framework in der Python-Sprache, das leistungsstarke Datenbankoperationen und Webentwicklungsfunktionen bietet. Durch die Kombination von Vue3 und Django4 können wir eine effiziente, flexible und skalierbare Full-Stack-Anwendung implementieren.

2. Front-End-Entwicklung: Vue3

Zuerst müssen wir ein Vue3-Projekt einrichten. Erstellen Sie ein neues Vue3-Projekt mit dem folgenden Befehl:

vue create vue3-django4-full-stack

Als nächstes können wir eine Vue-Komponente erstellen und mit der Front-End-Entwicklung beginnen. In Vue3 hat sich die Art und Weise, wie Komponenten geschrieben werden, geringfügig geändert. Hier ist ein einfaches Beispiel:

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  }
}
</script>

In diesem Beispiel definieren wir eine Vue-Komponente und verwenden die Option data, um eine Variable message zu definieren. Verweisen Sie dann auf diese Variable in der Vorlage, um eine Nachricht anzuzeigen. data选项来定义一个message变量。然后，在模板中引用这个变量来展示一条消息。

3. 后端开发：Django4

现在，我们需要设置一个Django4的项目。使用以下命令创建一个新的Django4项目：

django-admin startproject django4_full_stack

然后，我们需要创建一个Django应用程序并开始后端开发。使用以下命令创建一个新的Django应用程序：

cd django4_full_stack
python manage.py startapp backend

接下来，在backend目录下创建一个views.py文件，并添加以下代码示例：

from django.http import JsonResponse

def hello_vue(request):
    message = "Hello, Django4!"
    return JsonResponse({'message': message})

在这个示例中，我们定义了一个处理API请求的视图函数hello_vue，它返回一个包含一条消息的JSON响应。

4. 前后端交互：API调用

现在，我们需要在前端组件中调用后端的API。在Vue3中，我们可以使用axios库来发送HTTP请求。在Vue组件中，我们可以使用以下代码来调用后端API：

import axios from 'axios';

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    axios.get('http://localhost:8000/api/hello_vue')
      .then(response => {
        this.message = response.data.message;
      })
      .catch(error => {
        console.log(error);
      });
  }
}

在这个示例中，我们使用axios.get方法发送一个GET请求到http://localhost:8000/api/hello_vue地址，并在成功响应时将返回的消息赋值给message变量。

5. 启动应用程序

现在，我们已经完成了前端和后端的开发，并且在前后端之间建立了一个简单的API交互。接下来，我们需要启动前端和后端的开发服务器。在一个终端窗口中，使用以下命令运行Vue3开发服务器：

cd vue3-django4-full-stack
npm run serve

在另一个终端窗口中，使用以下命令运行Django4开发服务器：

cd django4_full_stack
python manage.py runserver

现在，我们可以在浏览器中访问http://localhost:8080

Backend-Entwicklung: Django4

Jetzt müssen wir ein Django4-Projekt einrichten. Erstellen Sie ein neues Django4-Projekt mit dem folgenden Befehl:

rrreee🎜 Dann müssen wir eine Django-Anwendung erstellen und mit der Backend-Entwicklung beginnen. Erstellen Sie eine neue Django-Anwendung mit dem folgenden Befehl: 🎜rrreee🎜Als nächstes erstellen Sie eine views.py-Datei im Verzeichnis backend und fügen Sie das folgende Codebeispiel hinzu: 🎜rrreee 🎜In In diesem Beispiel definieren wir eine Ansichtsfunktion hello_vue, die API-Anfragen verarbeitet und eine JSON-Antwort mit einer Nachricht zurückgibt. 🎜
🎜Back-End-Interaktion: API-Aufruf🎜🎜🎜Jetzt müssen wir die Back-End-API in der Front-End-Komponente aufrufen. In Vue3 können wir die Bibliothek axios verwenden, um HTTP-Anfragen zu senden. In der Vue-Komponente können wir den folgenden Code verwenden, um die Backend-API aufzurufen: 🎜rrreee🎜 In diesem Beispiel verwenden wir die Methode axios.get, um eine GET-Anfrage an http:/ zu senden. /localhost :8000/api/hello_vue-Adresse und weisen Sie die zurückgegebene Nachricht der Variablen message zu, wenn Sie erfolgreich antworten. 🎜
🎜Starten Sie die Anwendung🎜🎜🎜Jetzt haben wir die Entwicklung des Front-Ends und des Back-Ends abgeschlossen und eine einfache API-Interaktion zwischen dem Front-End und dem Back-End eingerichtet. Als nächstes müssen wir die Front-End- und Back-End-Entwicklungsserver starten. Führen Sie in einem Terminalfenster den Vue3-Entwicklungsserver mit dem folgenden Befehl aus: 🎜rrreee🎜 Führen Sie in einem anderen Terminalfenster den Django4-Entwicklungsserver mit dem folgenden Befehl aus: 🎜rrreee🎜 Jetzt können wir im Browser auf http:// zugreifen /localhost:8080 und sehen Sie sich die in der Front-End-Komponente angezeigte Meldung an. 🎜🎜Zusammenfassung🎜🎜Dieser Artikel stellt die Verwendung von Vue3 und Django4 für die Full-Stack-Entwicklung vor und enthält einige Codebeispiele. Durch das Erlernen von Vue3 und Django4, zwei beliebten Entwicklungsframeworks, können wir effiziente, flexible und skalierbare Full-Stack-Anwendungen erstellen. Ich hoffe, dieser Artikel kann Ihnen helfen, diese beiden Schlüsseltechnologien zu beherrschen und eine Rolle bei der Full-Stack-Entwicklung zu spielen. 🎜

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