Praktisches Tutorial: Vue3+Django4 neue technische Praxis-View.js-php.cn

Inhaltsverzeichnis

Heim

Web-Frontend

View.js

Praktisches Tutorial: Vue3+Django4 neue technische Praxis

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 09, 2023 am 08:52 AM

vue 实践 django

Praktisches Tutorial: Vue3+Django4 neue technische Praxis

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
```
Nach dem Login kopieren
Erstellen Sie ein Vue-Projekt:
```
vue create vue-django-project
```
Nach dem Login kopieren
Dadurch wird ein Vue-Projekt namens vue-django-project erstellt.
Django installieren:
```
pip install Django
```
Nach dem Login kopieren

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
```
Nach dem Login kopieren
Dadurch wird ein Django-Projekt namens django_project erstellt.
Django-App erstellen:
```
cd django_project
python manage.py startapp vueapp
```
Nach dem Login kopieren
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',
]
```
Nach dem Login kopieren

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

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

Nach dem Login kopieren

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')
```
Nach dem Login kopieren
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'),
]
```
Nach dem Login kopieren

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')),
]

Nach dem Login kopieren

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 id="title">{{ title }}</h1>
 <p>{{ content }}</p>
  </div>
</template>

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

Nach dem Login kopieren

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
```
Nach dem Login kopieren
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/'
```
Nach dem Login kopieren

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>

Nach dem Login kopieren

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')
```
Nach dem Login kopieren

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
```
Nach dem Login kopieren
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!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7469

CakePHP-Tutorial

1376

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

So verweisen Sie auf die JS -Datei mit Vue.js Apr 07, 2025 pm 11:27 PM

Es gibt drei Möglichkeiten, sich auf JS -Dateien in Vue.js zu beziehen: Geben Sie den Pfad direkt mit dem & lt; Skript & gt an. Etikett;; Dynamischer Import mit dem montierten () Lebenszyklushaken; und importieren über die Vuex State Management Library.

So verwenden Sie Watch in Vue Apr 07, 2025 pm 11:36 PM

Mit der Watch -Option in Vue.js können Entwickler auf Änderungen in bestimmten Daten anhören. Wenn sich die Daten ändert, löst sich eine Rückruffunktion aus, um Aktualisierungsansichten oder andere Aufgaben auszuführen. Zu den Konfigurationsoptionen gehören unmittelbar, die festlegen, ob ein Rückruf sofort ausgeführt werden soll, und Deep, das feststellt, ob Änderungen an Objekten oder Arrays rekursiv anhören sollen.

So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

Was bedeutet es für faule Ladungsvue? Apr 07, 2025 pm 11:54 PM

In Vue.js können Komponenten oder Ressourcen bei Bedarf dynamisch geladen werden, wodurch die Ladezeit der Anfangsseite dynamisch geladen und die Leistung verbessert wird. Die spezifische Implementierungsmethode umfasst die Verwendung & lt; Keep-Alive & GT; und & lt; Komponente ist & gt; Komponenten. Es ist zu beachten, dass fauler Laden FOUC -Probleme (Splace Screen) verursachen kann und nur für Komponenten verwendet werden sollte, die eine faule Belastung erfordern, um unnötige Leistungsaufwand zu vermeiden.

So fügen Sie Funktionen zu Schaltflächen für Vue hinzu Apr 08, 2025 am 08:51 AM

Sie können der VUE -Taste eine Funktion hinzufügen, indem Sie die Taste in der HTML -Vorlage an eine Methode binden. Definieren Sie die Methode und schreiben Sie die Funktionslogik in der VUE -Instanz.

Vue realisiert Festzelt-/Text -Scrolling -Effekt Apr 07, 2025 pm 10:51 PM

Implementieren Sie Marquee/Text-Scrolling-Effekte in VUE unter Verwendung von CSS-Animationen oder Bibliotheken von Drittanbietern. In diesem Artikel wird die Verwendung von CSS -Animation vorgestellt: Bildlauftext erstellen und Text mit & lt; div & gt;. Definieren Sie CSS -Animationen und setzen Sie Überlauf: Versteckt, Breite und Animation. Definieren Sie Keyframes, setzen Sie Transformation: Translatex () am Anfang und am Ende der Animation. Passen Sie die Animationseigenschaften wie Dauer, Bildlaufgeschwindigkeit und Richtung an.

So fragen Sie die Version von Vue Apr 07, 2025 pm 11:24 PM

Sie können die Vue -Version mit Vue Devtools abfragen, um die Registerkarte VUE in der Konsole des Browsers anzuzeigen. Verwenden Sie NPM, um den Befehl "npm list -g vue" auszuführen. Suchen Sie das Vue -Element im Objekt "Abhängigkeiten" der Datei package.json. Führen Sie für Vue -CLI -Projekte den Befehl "Vue --version" aus. Überprüfen Sie die Versionsinformationen im & lt; Skript & gt; Tag in der HTML -Datei, die sich auf die VUE -Datei bezieht.

So kehren Sie von Vue zur vorherigen Seite zurück Apr 07, 2025 pm 11:30 PM

VUE.JS hat vier Methoden, um zur vorherigen Seite zurückzukehren: $ router.go (-1) $ router.back () verwendet & lt; Router-Link to = & quot;/& quot; Komponentenfenster.history.back () und die Methodenauswahl hängt von der Szene ab.

See all articles