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>{{ 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

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

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!