Heim > Artikel > Web-Frontend > Praktisches Tutorial: Vue3+Django4 neue technische Praxis

Praktisches Tutorial: Vue3+Django4 neue technische Praxis

WBOYOriginal: 2023-09-09 08:52:42892Durchsuche

Praktisches Tutorial: Vue3 + Django4 neue technische Praxis

Einführung:
Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie hat sich Vue.js zu einem der beliebtesten Front-End-Frameworks entwickelt. Als leistungsstarkes und flexibles Python-Webframework wird Django auch von Entwicklern bevorzugt. In diesem Artikel erfahren Sie, wie Sie Vue3 und Django4 kombinieren können, um eine neue technische Praxis zu erreichen.

1. Umgebungseinrichtung:
Zuerst müssen wir eine Entwicklungsumgebung einrichten. Stellen Sie sicher, dass auf Ihrem Computer die neuesten Versionen von Node.js und Python installiert sind. Installieren Sie dann Vue CLI und Django über den folgenden Befehl:

Installieren Sie Vue CLI:
```
npm install -g @vue/cli
```
Erstellen Sie ein Vue-Projekt:
```
vue create vue-django-project
```
Dadurch wird ein Vue-Projekt namens vue-django-project erstellt.
Django installieren:
```
pip install Django
```

2. Erstellen Sie ein Django-Projekt:
Als nächstes erstellen wir ein Django-Projekt und integrieren das Vue-Projekt darin.

Django-Projekt erstellen:
```
django-admin startproject django_project
```
Dadurch wird ein Django-Projekt namens django_project erstellt.
Django-App erstellen:
```
cd django_project
python manage.py startapp vueapp
```
Dadurch wird eine Django-App namens vueapp erstellt.
Set Up Das Django -Projekt:
Open die Datei django_project/Settings.py und fügen Sie VueApp zu installed_apps hinzu:
```
INSTALLED_APPS = [
 ...
 'vueapp',
]
```

then, fügen Sie die folgende Anweisung in den Datenbankeinstellungen hinzu:

DATABASES = {
    'default': {
        ...
        'CONN_MAX_AGE': 600,
    }
}

create die Django -Ansicht :
Fügen Sie in vueapp/views.py den folgenden Code hinzu:
```
from django.shortcuts import render

def index(request):
 return render(request, 'vueapp/index.html')
```
Dadurch wird eine Ansicht mit dem Namen index erstellt.
Erstellen Sie eine Django-URL-Route:
Erstellen Sie im vueapp-Verzeichnis die Datei urls.py und fügen Sie den folgenden Code hinzu:
```
from django.urls import path
from . import views

urlpatterns = [
 path('', views.index, name='index'),
]
```

Dann importieren Sie in django_project/urls.py vueapp.urls und fügen Sie es in urlpatterns ein :

from django.urls import include, path

urlpatterns = [
    ...
    path('', include('vueapp.urls')),
]

3. Vue-Komponente erstellen:
Jetzt erstellen wir die Vue-Komponente und integrieren sie in die Django-Ansicht.

Erstellen Sie eine Vue-Komponente:
Erstellen Sie im Verzeichnis vue-django-project/src/components eine Vue-Komponente mit dem Namen Beispiel.vue. Der Code lautet wie folgt:

<template>
  <div>
 <h1>{{ title }}</h1>
 <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
 return {
   title: 'Vue3+Django4全新技术实践',
   content: '这是一个示例文本。',
 };
  },
};
</script>

Kompilieren Sie das Vue-Projekt:
In vue -django -project Verzeichnis, führen Sie den folgenden Befehl aus, um das Vue-Projekt zu kompilieren:
```
npm run build
```
Dadurch wird ein dist-Verzeichnis generiert, das den kompilierten Vue-Code enthält.
Konfigurieren Sie statische Django-Dateien:
Fügen Sie am Ende von django_project/settings.py den folgenden Code hinzu:
```
STATICFILES_DIRS = [
 os.path.join(BASE_DIR, 'vue-django-project/dist'),
]

STATIC_URL = '/static/'
```

4. Integrieren Sie Vue in die Django-Ansicht:
Jetzt integrieren wir die Vue-Komponente in die Django-Ansicht und Zugriff über URL.

Django-Vorlage erstellen:
Erstellen Sie im Vueapp-Verzeichnis eine Django-Vorlage mit dem Namen index.html. Der Code lautet wie folgt:

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3+Django4全新技术实践</title>
  <link href="{% static 'css/app.css' %}" rel="stylesheet">
</head>
<body>
  <div id="app">
 <example></example>
  </div>
  <script src="{% static 'js/app.js' %}"></script>
</body>
</html>

Django-Ansicht aktualisieren:
In der Indexansicht von vueapp/views.py, modifizieren Der erste Parameter der Render-Methode ist vueapp/index.html:
```
def index(request):
 return render(request, 'vueapp/index.html')
```

5. Führen Sie das Projekt aus:
Abschließend starten wir den Django-Entwicklungsserver und greifen über die URL auf das Projekt zu.

Starten Sie den Django-Entwicklungsserver:
Führen Sie im Verzeichnis django_project den folgenden Befehl aus, um den Django-Entwicklungsserver zu starten:
```
python manage.py runserver
```
Greifen Sie auf das Projekt zu:
Geben Sie http://localhost:8000/ in den Browser ein, um darauf zuzugreifen das Projekt.

Fazit:
Durch die Praxis dieses Artikels haben wir Vue3 und Django4 erfolgreich kombiniert und eine neue technische Praxis implementiert. Durch die Leistungsfähigkeit von Vue3 und die Flexibilität von Django4 können wir effizientere und elegantere Webanwendungen entwickeln. Ich hoffe, dieser Artikel ist für alle hilfreich und hilft Ihnen dabei, die Bereiche Vue und Django weiter zu erforschen und Innovationen voranzutreiben!

Das obige ist der detaillierte Inhalt vonPraktisches Tutorial: Vue3+Django4 neue technische Praxis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Python django node.js vue.js html 前端框架 JS 数据库 http

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Lernen Sie die kombinierte API in Vue 3 kennen, um Komponentencode besser zu organisieren und zu verwaltenNächster Artikel：Lernen Sie die kombinierte API in Vue 3 kennen, um Komponentencode besser zu organisieren und zu verwalten

In Verbindung stehende Artikel

Mehr sehen