Butiran teknikal: pembinaan projek baharu Vue3+Django4

Penjelasan teknikal terperinci: Pembinaan projek baharu Vue3+Django4

Pengenalan:
Kini, model pembangunan pemisahan bahagian hadapan dan belakang telah menjadi kemahiran penting untuk pembangunan perusahaan. Vue dan Django adalah rangka kerja bahagian hadapan dan belakang yang sangat popular Gabungan mereka boleh meningkatkan kecekapan pembangunan dan kualiti kod. Artikel ini akan memperkenalkan secara terperinci cara membina projek baharu, menggunakan Vue3 sebagai rangka kerja bahagian hadapan dan Django4 sebagai rangka kerja bahagian belakang, memberikan pembaca contoh kod dan penjelasan teknikal terperinci.

1. Persediaan persekitaran

1. Persediaan persekitaran hadapan
   Pertama, pastikan anda telah memasang persekitaran Node.js. Kemudian, pasang Vue CLI 4.x menggunakan arahan berikut:

npm install -g @vue/cli

Cipta projek Vue3 baharu menggunakan arahan berikut:

vue create project-name

Semasa proses permulaan projek, anda perlu memilih Vue3 sebagai versi. Selepas pemulaan selesai, masukkan direktori projek dan gunakan arahan berikut untuk menjalankan projek:

cd project-name
npm run serve

2. Persediaan persekitaran hujung belakang
   Pertama, pastikan anda telah memasang persekitaran Python 3.9. Kemudian, gunakan arahan berikut untuk memasang Django 4.x:

pip install Django

Buat projek Django baharu:

django-admin startproject project-name

Masukkan direktori projek dan gunakan arahan berikut untuk menjalankan projek:

cd project-name
python manage.py runserver

2. Penyahpepijatan sendi hadapan dan belakang

1. Konfigurasi hadapan
   Dalam direktori akar projek Vue3, cari fail vue.config .js, jika ia tidak wujud, buat secara manual. Tambahkan kod berikut pada fail:

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

Kod ini mengkonfigurasi pelayan proksi untuk memajukan permintaan API dari hujung hadapan ke alamat hujung belakang.

2. Konfigurasi belakang
   Dalam direktori akar projek Django, cari fail settings.py, ubah suai ALLOWED_HOSTS dan INSTALLED_APPS seperti berikut:

ALLOWED_HOSTS = ['localhost', '127.0.0.1']

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

Kemudian, tambah kod berikut pada penghujung fail settings.py:

CORS_ALLOW_ALL_ORIGINS = True

Kod ini Dikonfigurasikan untuk membenarkan permintaan merentas domain.

3. Interaksi hadapan dan belakang

1. Permintaan hadapan
   Dalam projek Vue3, permintaan API dibuat dengan menggunakan perpustakaan axios. Mula-mula, pasang axios menggunakan arahan berikut:

npm install axios

Kemudian, dalam komponen yang perlu memanggil API, perkenalkan axios dan hantar permintaan:

import axios from 'axios'

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

2. Backend response
   Dalam Django, gunakan Django Rest Framework (DRF) untuk membina API. Mula-mula, gunakan arahan berikut untuk memasang DRF:

pip install djangorestframework

Kemudian, dalam direktori aplikasi Django, cipta fail serializers.py baharu dan tulis kod berikut:

from rest_framework import serializers

class ExampleSerializer(serializers.Serializer):
    id = serializers.IntegerField()
    name = serializers.CharField(max_length=100)

Seterusnya, cipta fail baharu views.py dan tulis The kod berikut:

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

@api_view(['GET'])
def example(request):
    data = [
        {'id': 1, 'name': 'example1'},
        {'id': 2, 'name': 'example2'},
    ]
    serializer = ExampleSerializer(data, many=True)
    return Response(serializer.data)

Akhir sekali, dalam direktori projek Django, cari fail urls.py dan tambah kod berikut:

from django.urls import path
from . import views

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

Dengan cara ini, apabila bahagian hadapan menghantar permintaan GET ke /api/example, bahagian belakang akan mengembalikan data sampel.

Kesimpulan:
Melalui penjelasan terperinci artikel ini, pembaca akan memahami cara menggunakan Vue3 sebagai rangka kerja bahagian hadapan dan Django4 sebagai rangka kerja bahagian belakang untuk membina projek baharu. Kami menerangkan proses persediaan persekitaran, penyahpepijatan sendi hadapan dan belakang serta interaksi hadapan dan belakang serta memberikan contoh kod yang sepadan. Saya harap pembaca dapat menguasai penggunaan asas Vue dan Django melalui artikel ini dan dapat mengaplikasikannya pada projek sebenar.

Atas ialah kandungan terperinci Butiran teknikal: pembinaan projek baharu Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!