Panduan pembangunan tindanan penuh Vue3+Django4

Panduan Pembangunan Tindanan Penuh Vue3+Django4

Dengan populariti model pembangunan pemisahan bahagian hadapan dan belakang, Vue dan Django telah menjadi susunan teknologi yang digemari oleh ramai pembangun. Sebagai rangka kerja bahagian hadapan yang popular, Vue mudah dipelajari, fleksibel dan cekap, manakala Django ialah rangka kerja bahagian belakang yang berkuasa yang menyediakan pelbagai fungsi yang diperlukan untuk membangunkan aplikasi web.

Vue3 dan Django4 yang dikeluarkan baru-baru ini membawa banyak ciri dan penambahbaikan baharu yang menarik, meningkatkan kecekapan pembangunan dan pengalaman pengguna. Artikel ini akan membawa pembaca memahami panduan pembangunan tindanan penuh Vue3+Django4, membantu pembangun menggunakan kedua-dua rangka kerja ini dengan lebih baik untuk pembangunan tindanan penuh.

Langkah pertama: Sediakan persekitaran

Sebelum memulakan pembangunan tindanan penuh, kita perlu menyediakan persekitaran pembangunan terlebih dahulu. Vue3 memerlukan Node.js sebagai persekitaran berjalan, manakala Django4 memerlukan sokongan Python. Oleh itu, kita perlu memasang Node.js dan Python secara berasingan.

Memasang Node.js adalah sangat mudah Muat turun pakej pemasangan yang sepadan dari tapak web rasmi dan ikut gesaan untuk memasangnya. Selepas pemasangan selesai, kami juga perlu memasang alat perancah Vue vue-cli, yang boleh dipasang melalui arahan berikut:

npm install -g @vue/cli

Memasang Python juga sangat mudah Anda boleh memuat turun pakej pemasangan yang sepadan dari laman web rasmi, dan kemudian pasangkannya mengikut arahan. Selepas pemasangan selesai, kami juga perlu memasang Django dan pakej sambungan yang berkaitan Anda boleh menggunakan arahan pip untuk memasang:

pip install Django

Langkah 2: Buat projek Vue3

Selepas menyediakan persekitaran pembangunan, kami boleh mula mencipta Projek Vue3. Buka terminal baris arahan dan gunakan arahan berikut untuk mencipta projek Vue3 baharu:

vue create my-project

Kemudian konfigurasikan pilihan mengikut gesaan, anda boleh memilih konfigurasi manual dan konfigurasi lalai. Selepas memilih konfigurasi manual, anda boleh memilih pelbagai ciri dan pemalam mengikut keperluan anda.

Selepas mencipta projek, masukkan direktori projek dan gunakan arahan berikut untuk memulakan pelayan pembangunan:

cd my-project
npm run serve

Dengan cara ini, anda boleh mengakses projek dalam penyemak imbas dan melihat halaman selamat datang Vue3.

Langkah 3: Buat projek Django

Seterusnya, kita perlu mencipta projek Django. Dalam terminal baris arahan, gunakan arahan berikut untuk mencipta projek Django baharu:

django-admin startproject mysite

Selepas mencipta projek, masukkan direktori projek dan gunakan arahan berikut untuk memulakan pelayan pembangunan:

cd mysite
python manage.py runserver

Dengan cara ini, anda boleh mengakses halaman selamat datang Django dalam penyemak imbas .

Langkah 4: Sambungkan Vue3 dan Django

Sekarang kita mempunyai projek Vue3 dan projek Django, kita perlu menyambungkannya. Pertama, kita perlu mengkonfigurasi proksi dalam projek Vue3 untuk dapat mengakses API Django. Cipta fail vue.config.js dalam direktori akar projek Vue3, dan kemudian tambahkan konfigurasi berikut:

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

Kemudian, apabila membuat permintaan API menggunakan axios atau perpustakaan klien HTTP lain dalam projek Vue3, anda boleh mengakses terus < code>/ apiPath. /api路径。

在Django项目中，我们需要创建一个API视图来处理Vue3发送的请求。可以创建一个api.py文件，在其中编写API视图的逻辑。例如，可以使用Django的rest framework来快速创建RESTful API：

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

@api_view(['GET'])
def hello_world(request):
    return Response({'message': 'Hello, World!'})

然后，在Django项目的urls.py中添加这个API视图的路由：

from django.urls import path
from . import api

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

这样，当在Vue3项目中发送GET请求到/api/hello时，Django将返回一个包含{'message': 'Hello, World!'}

Dalam projek Django, kita perlu mencipta paparan API untuk mengendalikan permintaan yang dihantar oleh Vue3. Anda boleh mencipta fail api.py di mana anda menulis logik paparan API. Sebagai contoh, anda boleh menggunakan rangka kerja rehat Django untuk mencipta API RESTful dengan cepat:

rrreee

Kemudian, tambah laluan paparan API ini dalam urls.py projek Django:

rrreee

Dengan cara ini, apabila menghantar permintaan GET kepada /api/hello, Django akan mengembalikan respons JSON yang mengandungi {'message': 'Hello, World!'}.

Langkah 5: Bangunkan fungsi aplikasi

Selepas langkah di atas, kami telah berjaya menyambungkan Vue3 dan Django dan boleh menghantar permintaan API dalam Vue3. Seterusnya, kita boleh mula membangunkan fungsi aplikasi mengikut keperluan kita.

Dalam projek Vue3, anda boleh menggunakan ciri baharu Vue3 seperti API Komposisi untuk menulis logik komponen. Anda boleh menggunakan Penghala Vue untuk pengurusan penghalaan bahagian hadapan dan Vuex untuk pengurusan keadaan.

Dalam projek Django, anda boleh menggunakan model Django dan migrasi pangkalan data untuk mentakrif dan mengurus model data. Anda boleh menggunakan borang dan templat Django untuk mengendalikan input pengguna dan menjadikan antara muka.

Langkah 6: Penerapan dan Pengoptimuman

Langkah terakhir ialah menggunakan dan mengoptimumkan aplikasi kami. Anda boleh menggunakan arahan pembungkusan Vue3 untuk menyusun kod bahagian hadapan ke dalam fail statik dan kemudian menggunakannya ke pelayan.

Untuk projek Django, anda boleh menggunakan pelayan pembangunan terbina dalam Django untuk ujian dan penyahpepijatan, kemudian pertimbangkan untuk menggunakan Nginx+uWSGI untuk penggunaan.

Selain itu, kod hadapan dan belakang boleh dioptimumkan untuk mengurangkan masa pemuatan dan meningkatkan prestasi. Anda boleh menggunakan Webpack dan Babel untuk mengoptimumkan projek Vue3, dan menggunakan caching dan alat penalaan prestasi Django untuk mengoptimumkan projek Django. 🎜🎜Kesimpulan🎜🎜Artikel ini memperkenalkan panduan pembangunan tindanan penuh Vue3+Django4, dengan harapan dapat membantu pembaca menggunakan kedua-dua rangka kerja ini dengan lebih baik untuk pembangunan tindanan penuh. Vue3 dan Django4 menyediakan fungsi yang kaya dan alatan berkuasa, menjadikan pembangunan tindanan penuh lebih mudah dan lebih cekap. Kami berharap pembaca boleh menggunakan kedua-dua rangka kerja ini dengan mahir semasa proses pembangunan dan mencipta aplikasi yang lebih cemerlang. 🎜

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