Rumah  >  Artikel  >  hujung hadapan web  >  Langkah demi langkah: Langkah pelaksanaan projek tindanan penuh Vue3+Django4

Langkah demi langkah: Langkah pelaksanaan projek tindanan penuh Vue3+Django4

WBOY
WBOYasal
2023-09-10 15:12:111297semak imbas

Langkah demi langkah: Langkah pelaksanaan projek tindanan penuh Vue3+Django4

Langkah demi langkah: Langkah pelaksanaan projek tindanan penuh Vue3+Django4

Dengan pembangunan berterusan pembangunan web, pembangunan tindanan penuh secara beransur-ansur menjadi trend. Vue dan Django ialah salah satu susunan teknologi paling popular dalam pembangunan bahagian hadapan dan belakang, dan gabungan mereka juga sangat berkuasa. Dalam artikel ini, kami akan memperkenalkan langkah demi langkah bagaimana untuk melaksanakan projek tindanan penuh menggunakan Vue3 dan Django4.

  1. Persediaan
    Pertama, kita perlu memasang Node.js dan Python secara setempat, serta pengurus pakej yang sepadan npm dan pip. Pada masa yang sama, kami juga memerlukan persekitaran pembangunan bersepadu (IDE), seperti Kod VS.
  2. Buat projek Django
    Buka terminal, masukkan direktori tempat anda ingin mencipta projek, laksanakan arahan berikut untuk mencipta projek Django:

    django-admin startproject myproject
  3. Buat aplikasi Django
    Masukkan direktori projek, laksanakan arahan berikut untuk mencipta aplikasi Django:

    cd myproject
    python3 manage.py startapp myapp
  4. Konfigurasi pangkalan data Django
    Buka fail settings.py dan konfigurasikan maklumat pangkalan data, seperti menggunakan SQLite:

    DATABASES = {
     'default': {
         'ENGINE': 'django.db.backends.sqlite3',
         'NAME': BASE_DIR / 'db.sqlite3',
     }
    }
  5. Buat model pangkalan data
    Tentukan model pangkalan data anda dalam fail models.py. Sebagai contoh, kami mencipta model Pengguna:

    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. Lakukan pemindahan pangkalan data
    Jalankan arahan berikut untuk melaksanakan pemindahan pangkalan data:

    python3 manage.py makemigrations
    python3 manage.py migrate
  7. Buat paparan Django
    Tulis fungsi paparan Django anda dalam fail views.py. Sebagai contoh, kami mencipta fungsi pandangan untuk mendapatkan semua pengguna:

    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. Buat projek Vue

    Dalam terminal, masukkan direktori tempat anda ingin mencipta projek Vue dan laksanakan arahan berikut untuk mencipta projek Vue:
  9. vue create myproject

  10. Konfigurasi proksi Vue

    Konfigurasi proksi Vue dalam fail myproject/vue.config.js untuk proksi permintaan ke bahagian belakang Django:
  11. module.exports = {
      devServer: {
     proxy: {
       '^/api': {
         target: 'http://localhost:8000',
         changeOrigin: true
       }
     }
      }
    }

  12. Buat komponen Vue

    Buat komponen Users.svurce direktori untuk memaparkan senarai pengguna:
  13. <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>

  14. Konfigurasi penghalaan Vue

    Konfigurasi penghalaan Vue dalam fail src/router/index.js dan gunakan komponen Users.vue sebagai laluan:
  15. 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

  16. Jalankan projek

    root Django dan Vue masing-masing Jalankan arahan berikut dalam direktori untuk menjalankan projek:
  17. python3 manage.py runserver
    npm run serve

Sekarang, anda boleh melawati http://localhost:8080 dalam penyemak imbas untuk melihat projek tindanan penuh anda. Komponen Pengguna akan mendapatkan data daripada bahagian belakang Django dan memaparkannya pada halaman.


Ringkasan:

Melalui langkah di atas, kami berjaya melaksanakan projek tindanan penuh menggunakan Vue3 dan Django4. Dengan menyepadukan pembangunan bahagian hadapan dan bahagian belakang, kami boleh membangunkan aplikasi web yang berkuasa dengan lebih cekap. Saya harap artikel ini akan membantu anda dan menjadikan anda lebih biasa dengan proses pembangunan tindanan penuh Vue dan Django. 🎜

Atas ialah kandungan terperinci Langkah demi langkah: Langkah pelaksanaan projek tindanan penuh Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn