Bermula dari awal: projek teknologi baharu Vue3+Django4

Mulakan dari awal: Projek teknologi baharu Vue3+Django4

Pengenalan:
Dalam bidang teknologi yang berkembang pesat hari ini, sudah menjadi trend. Sebagai rangka kerja popular untuk pembangunan bahagian hadapan dan belakang, Vue dan Django bukan sahaja mempunyai pelbagai latar belakang aplikasi, tetapi juga membawa ciri yang lebih menarik dan berkuasa dalam versi terkini. Artikel ini akan memperkenalkan cara menggunakan Vue3 dan Django4 untuk membina projek teknologi baharu, dan menunjukkan kuasa mereka melalui contoh kod.

1. Perancangan dan penyediaan projek
Sebelum bermula, kita perlu merancang dan menyediakan projek. Mula-mula, kita perlu memastikan bahawa kita telah memasang Node.js, Python dan persekitaran pembangunan Django. Kemudian, kita boleh mencipta projek Vue baharu dengan memasang Vue CLI dengan arahan berikut:

npm install -g @vue/cli
vue create my-project
cd my-project

Seterusnya, kami bersedia untuk mencipta projek Django. Pasang Django melalui arahan berikut:

pip install Django

Kemudian, kita boleh mencipta projek Django baharu melalui arahan berikut:

django-admin startproject myproject
cd myproject

2. Pembangunan bahagian hadapan: Vue3#🎜🎜 ## 🎜🎜#

Buat komponen Vue

Dalam Vue3, kita boleh menggunakan sintaks
1. untuk menulis komponen. Berikut ialah contoh mudah:
   <script setup>

   <template>
     <div>
       <h1>{{ message }}</h1>
       <p>{{ description }}</p>
     </div>
   </template>
   
   <script setup>
   import { ref } from 'vue'
   
   const message = ref('Hello, Vue3')
   const description = ref('This is a demo project')
   </script>

Memperkenalkan komponen

Dalam aplikasi utama, kami boleh memperkenalkan komponen Vue kami dan menjadikannya dalam DOM . Berikut ialah contoh:
2. 
   

   <template>
     <div>
       <my-component></my-component>
     </div>
   </template>
   
   <script setup>
   import MyComponent from '@/components/MyComponent.vue'
   </script>

3. Pembangunan bahagian belakang: Django4

Buat paparan Django

Dalam Django Gunakan paparan untuk mengendalikan permintaan HTTP dan membalas respons. Berikut ialah contoh mudah:
1. 
   

   from django.http import JsonResponse
   
   def my_view(request):
       data = {
           'message': 'Hello, Django4',
           'description': 'This is a demo project'
       }
       return JsonResponse(data)

Mengkonfigurasi penghalaan URL

Dalam Django, kami boleh memetakan permintaan kepada paparan yang sepadan melalui penghalaan URL. Berikut ialah contoh:
2. 
   

   from django.urls import path
   from .views import my_view
   
   urlpatterns = [
       path('my-view/', my_view, name='my-view'),
   ]

4. Sambungkan bahagian hadapan dan belakang: Antara muka API

Selepas bahagian hadapan dan bahagian belakang sedia, kita perlu untuk menyambungkannya melalui antara muka API. Dalam Vue3, kami boleh menggunakan perpustakaan axios untuk menghantar permintaan HTTP. Berikut ialah contoh:

import axios from 'axios'

axios.get('/api/my-view/')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

Dalam Django, kita boleh menggunakan Rangka Kerja Django REST untuk mencipta dan mengurus antara muka API. Berikut ialah contoh:

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def my_view(request):
    data = {
        'message': 'Hello, Django4',
        'description': 'This is a demo project'
    }
    return Response(data)

5. Penyerahan dan pengujian projek

Selepas melengkapkan pembangunan dan lulus ujian, kami boleh menggunakan projek itu. Untuk penggunaan bahagian hadapan, kami boleh menggunakan arahan binaan Vue CLI untuk menjana fail statik dan mengaturnya ke pelayan. Untuk penggunaan bahagian belakang, kita boleh menggunakan perintah runserver Django untuk memulakan pelayan. Kami juga boleh menggunakan Nginx sebagai pelayan web untuk membalikkan permintaan proksi bahagian hadapan dan belakang.

6. Ringkasan

Dengan menggunakan Vue3 dan Django4, kami boleh membina projek teknologi tindanan penuh yang berkuasa dengan mudah. Komponenisasi dan model pengaturcaraan responsif Vue3 menjadikan pembangunan bahagian hadapan lebih cekap dan elegan. Pandangan Django4, penghalaan URL dan antara muka API menjadikan pembangunan bahagian belakang lebih mudah dan lebih fleksibel. Saya harap artikel ini akan membantu anda mempelajari dan menguasai teknologi Vue3 dan Django4.

Contoh kod:

Contoh komponen Vue

• Contoh paparan Django
#🎜#contoh sambungan Backen🎜 🎜#
• Contoh penggunaan dan ujian projek
• Pautan rujukan:

Vue dokumentasi rasmi: https://v3.vuejs org/

Django rasmi dokumentasi: https://docs.djangoproject.com/

• Django REST Framework dokumentasi rasmi: https://www.django-rest-framework . org/
• Nota: Artikel ini ditulis berdasarkan Vue CLI 4.x dan Django 4.x Beberapa contoh mungkin perlu dilaraskan mengikut keadaan sebenar.

Atas ialah kandungan terperinci Bermula dari awal: projek teknologi baharu Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!