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!'}

rrreee

rrreee

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