Schritt für Schritt: Vue3+Django4-Full-Stack-Projektimplementierungsschritte

Schritt für Schritt: Vue3 + Django4 Full-Stack-Projektimplementierungsschritte

Mit der kontinuierlichen Weiterentwicklung der Webentwicklung ist die Full-Stack-Entwicklung allmählich zu einem Trend geworden. Vue und Django sind einer der beliebtesten Technologie-Stacks in der Front-End- und Back-End-Entwicklung, und auch ihre Kombination ist sehr leistungsstark. In diesem Artikel stellen wir Ihnen Schritt für Schritt vor, wie Sie ein Full-Stack-Projekt mit Vue3 und Django4 implementieren.

1. Vorbereitung
   Zuerst müssen wir Node.js und Python lokal installieren, sowie die entsprechenden Paketmanager npm und pip. Gleichzeitig benötigen wir auch eine integrierte Entwicklungsumgebung (IDE) wie VS Code.

2. Erstellen Sie ein Django-Projekt
   Öffnen Sie das Terminal, geben Sie das Verzeichnis ein, in dem Sie das Projekt erstellen möchten, und führen Sie den folgenden Befehl aus, um ein Django-Projekt zu erstellen:

   django-admin startproject myproject

3. Erstellen Sie eine Django-Anwendung
   Geben Sie das Projektverzeichnis ein und führen Sie das aus Folgender Befehl zum Erstellen einer Django-Anwendung:

   cd myproject
   python3 manage.py startapp myapp

4. Konfigurieren Sie die Django-Datenbank
   Öffnen Sie die Datei „settings.py“ und konfigurieren Sie die Datenbankinformationen, z. B. mit SQLite:

   DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
   }

5. Erstellen Sie ein Datenbankmodell
   Definieren Sie Ihr Datenbankmodell im models.py-Datei. Zum Beispiel erstellen wir ein Benutzermodell:

   from django.db import models
   
   class User(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
    password = models.CharField(max_length=100)

6. Datenbankmigration durchführen
   Führen Sie den folgenden Befehl aus, um die Datenbankmigration durchzuführen:

   python3 manage.py makemigrations
   python3 manage.py migrate

7. Django-Ansicht erstellen
   Schreiben Sie Ihre Django-Ansichtsfunktion in die Datei „views.py“. Beispielsweise erstellen wir eine Ansichtsfunktion, um alle Benutzer abzurufen:

   from django.shortcuts import render
   from django.http import JsonResponse
   from .models import User
   
   def get_users(request):
    users = User.objects.all()
    data = [{'name': user.name, 'email': user.email} for user in users]
    return JsonResponse({'users': data})

8. Vue-Projekt erstellen
   Geben Sie im Terminal das Verzeichnis ein, in dem Sie ein Vue-Projekt erstellen möchten, und führen Sie den folgenden Befehl aus, um ein Vue-Projekt zu erstellen:

   vue create myproject

9. Konfigurieren Sie den Vue-Proxy.
   Konfigurieren Sie den Vue-Proxy in der Datei myproject/vue.config.js, um die Anfrage an das Django-Backend weiterzuleiten:

   module.exports = {
     devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
     }
   }

10. Erstellen Sie eine Vue-Komponente.
    Erstellen Sie eine Users.vue-Komponente in src/views Verzeichnis zum Anzeigen der Benutzerliste:

    <template>
      <div>
     <ul>
       <li v-for="user in users" :key="user.name">
         {{ user.name }} - {{ user.email }}
       </li>
     </ul>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       users: []
     }
      },
      created() {
     this.getUsers()
      },
      methods: {
     getUsers() {
       axios.get('/api/users')
         .then(response => {
           this.users = response.data.users
         })
     }
      }
    }
    </script>

11. Konfigurieren Sie das Vue-Routing
    Konfigurieren Sie das Vue-Routing in der Datei src/router/index.js und verwenden Sie die Users.vue-Komponente als Route:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Users from '../views/Users.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
     path: '/',
     name: 'Users',
     component: Users
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

12. Führen Sie das Projekt
    am aus Stammverzeichnis von Django bzw. Vue Führen Sie den folgenden Befehl im Verzeichnis aus, um das Projekt auszuführen:

    python3 manage.py runserver
    npm run serve

Jetzt können Sie http://localhost:8080 im Browser besuchen, um Ihr Full-Stack-Projekt anzuzeigen. Die Benutzerkomponente ruft die Daten vom Django-Backend ab und zeigt sie auf der Seite an.

Zusammenfassung:
Durch die oben genannten Schritte haben wir erfolgreich ein Full-Stack-Projekt mit Vue3 und Django4 implementiert. Durch die Integration der Front-End- und Back-End-Entwicklung können wir leistungsstarke Webanwendungen effizienter entwickeln. Ich hoffe, dass dieser Artikel für Sie hilfreich ist und Sie mit dem Full-Stack-Entwicklungsprozess von Vue und Django besser vertraut macht.

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