Pembelajaran mendalam: Contoh pembangunan tindanan penuh Vue3+Django4

Pembelajaran mendalam: Contoh pembangunan tindanan penuh Vue3+Django4

Ikhtisar:
Dengan perkembangan pesat aplikasi web , semua pembangunan Stack telah menjadi topik hangat. Sebagai rangka kerja bahagian hadapan dan bahagian belakang yang popular, Vue dan Django digunakan secara meluas dalam pembangunan tindanan penuh. Artikel ini akan memperkenalkan cara menggunakan versi terkini Vue3 dan Django4 untuk pembangunan tindanan penuh, dan menggunakan contoh praktikal untuk menunjukkan fungsinya yang berkuasa dan kebolehskalaan yang fleksibel.

1. Persediaan persekitaran:
   Pertama sekali, kita perlu memastikan bahawa Python, Node.js dan Vue CLI telah dipasang dengan betul. Anda boleh memasangnya menggunakan arahan berikut:
2. Pemasangan Python: https://www.python.org/downloads/
3. Pemasangan Node.js: https://nodejs .org /
4. Pemasangan Vue CLI: npm install -g @vue/cli

5. Buat projek Django:
   Pertama, kita perlu mencipta projek Django baharu. Buka baris arahan dan cipta projek menggunakan arahan berikut:

   django-admin startproject myproject

6. Cipta aplikasi Django:
   Seterusnya, kita perlu mencipta aplikasi Django. Pergi ke direktori projek dan buat aplikasi menggunakan arahan berikut:

   cd myproject
   python manage.py startapp myapp

7. Konfigurasikan penghalaan Django:
   Dalam fail myproject/myproject/urls.py, konfigurasikan Django Laluan akar dan sub-laluan myapp:

   from django.urls import path, include
   
   urlpatterns = [
    path('api/', include('myapp.urls')),
   ]

8. Cipta paparan Django:
   Dalam fail myapp/views.py, cipta Fungsi paparan Django: # 🎜🎜#

   from django.shortcuts import render
   from django.http import JsonResponse
   
   def hello(request):
    return JsonResponse({'message': 'Hello, World!'})

9. Konfigurasi penghalaan Django:

   Dalam fail myapp/urls.py, konfigurasikan penghalaan myapp: ##🎜🎜 🎜🎜##🎜🎜 #
   Mulakan pelayan Django:

   Gunakan arahan berikut untuk memulakan pelayan pembangunan Django:

from django.urls import path

from . import views

urlpatterns = [
 path('hello/', views.hello),
]

10. Lawati http://localhost:8000/api /hello/, anda sepatutnya dapat melihat data JSON yang dikembalikan.

    
    

    Buat projek Vue:

    Sekarang, kita perlu mencipta projek Vue baharu. Buka baris arahan dan gunakan arahan berikut untuk mencipta projek:

python manage.py runserver

11. Nota: Apabila mencipta projek, pilih konfigurasi pratetap lalai, atau konfigurasikannya mengikut keperluan anda sendiri.

    
    

    Konfigurasikan proksi pelayan pembangunan Vue:

    Dalam direktori akar projek Vue, cari fail vue.config.js (jika tidak, sila buat yang baharu), Dan tambahkan konfigurasi berikut:

vue create myvueapp

12. 
    Buat komponen Vue:

    Dalam direktori src projek Vue, cari Apl. vue fail dan gantikan kandungannya dengan Kod berikut:

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

13. 
    Mulakan pelayan pembangunan Vue:

    Gunakan arahan berikut untuk memulakan pelayan pembangunan Vue: # 🎜🎜#

    <template>
      <div>
     <h1 id="message">{{ message }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       message: ""
     };
      },
      mounted() {
     this.fetchData();
      },
      methods: {
     fetchData() {
       fetch("/api/hello/")
         .then(response => response.json())
         .then(data => {
           this.message = data.message;
         })
         .catch(err => {
           console.log(err);
         });
     }
      }
    };
    </script>

Lawati http:// localhost:8080, anda sepatutnya dapat melihat data yang diperoleh daripada API Django.

14. 
    

    Pada ketika ini, kami telah berjaya melengkapkan contoh pembangunan tindanan penuh Vue3+Django4. Melalui contoh ini, kami belajar cara menyediakan persekitaran pembangunan, mencipta projek Django dan projek Vue, dan cara mengkonfigurasi penghalaan, mencipta paparan dan komponen serta mendapatkan data daripada API bahagian belakang melalui AJAX.
    Ringkasan:
Melalui kajian artikel ini, kami mempunyai pemahaman yang mendalam tentang pembangunan tindanan penuh Vue3 dan Django4, dan mempraktikkan kes praktikal. Pembangunan tindanan penuh memberikan kami fleksibiliti dan kecekapan yang lebih besar, membolehkan kami mengendalikan kedua-dua keperluan bahagian hadapan dan bahagian belakang secara serentak. Saya harap pembaca dapat memahami dengan lebih mendalam tentang pembangunan tindanan penuh Vue3+Django4 melalui contoh ini, dan dapat menggunakan pengetahuan dan teknologi ini dalam projek sebenar.

Atas ialah kandungan terperinci Pembelajaran mendalam: Contoh pembangunan tindanan penuh Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!