Membina contoh SPA menggunakan Python dan React

Dengan perkembangan teknologi Internet yang berterusan, semakin banyak laman web mula menggunakan seni bina SPA (Single Page Application). SPA merujuk kepada mempersembahkan semua atau kebanyakan kandungan melalui satu halaman dan mengemas kini kandungan halaman secara dinamik melalui pelanggan, dan bukannya menggunakan kaedah berbilang halaman tradisional. Dalam artikel ini, kami akan menggunakan Python dan React untuk membina contoh SPA mudah untuk menunjukkan idea asas dan kaedah pelaksanaan SPA.

1. Persediaan persekitaran

Sebelum kita mula membina, kita perlu menyediakan persekitaran pembangunan. Mula-mula, anda perlu memasang Node.js dan npm Node.js ialah alat untuk menjalankan JavaScript pada bahagian pelayan, dan npm ialah pengurus pakej untuk Node.js. Kedua, kita perlu memasang Python dan perpustakaan yang diperlukan yang berkaitan dengannya.

Untuk memudahkan pengurusan dan penggunaan, kami akan menggunakan Django sebagai rangka kerja belakang untuk membina projek kami. Kita boleh menggunakan arahan berikut untuk memasang Django:

pip install Django

Pada masa yang sama, kita perlu memasang beberapa perpustakaan Python lain, termasuk django-cors-headers, djangorestframework dan django- webpack-loader . Perpustakaan ini akan menjadikan rangka kerja bahagian belakang kami lebih lengkap dan menyediakan lebih banyak sokongan untuk pembinaan bahagian hadapan kami.

pip install django-cors-headers djangorestframework django-webpack-loader

2. Bina bahagian hadapan

Sebelum membina bahagian hadapan, kita perlu menentukan beberapa struktur direktori. . Kami akan mencipta folder yang dipanggil frontend dalam direktori root projek untuk menyimpan kod front-end kami. Di bawah folder hadapan, kami akan mencipta folder bernama src untuk menyimpan kod React kami, dan folder bernama awam untuk menyimpan templat HTML, imej dan fail sumber lain kami.

Seterusnya, kami akan menggunakan arahan npx untuk mencipta aplikasi React, bernama frontend:

npx create-react-app frontend

Kemudian, kita perlu menggunakan npm Install beberapa perpustakaan yang diperlukan, termasuk react-router-dom, axios, bootstrap, react-bootstrap dan prop-types.

npm install react-router-dom axios bootstrap react-bootstrap prop-types

Selepas pemasangan selesai, kita boleh mula menulis kod React. Kami akan memuatkan komponen React kami secara dinamik berdasarkan penghalaan, dan juga menggunakan axios dalam komponen untuk bertukar data dengan bahagian belakang.

3. Bina bahagian belakang

Sebelum membina bahagian belakang, kita perlu menentukan beberapa struktur direktori. Kami akan mencipta folder bernama backend dalam direktori root projek untuk menyimpan kod backend kami. Di bawah folder bahagian belakang, kami akan mencipta folder yang dipanggil templat untuk menyimpan fail templat HTML kami.

Pertama, kita perlu mencipta projek Django bernama mysite:

django-admin.py startproject mysite backend

Kemudian, kita perlu mencipta projek Django dalam mysite/ mysite/tetapan fail py untuk menambah beberapa konfigurasi yang diperlukan. Secara khusus, kita perlu menentukan STATIC_URL, STATICFILES_DIRS, TEMPLATE_DIRS, CORS_ORIGIN_ALLOW_ALL, REST_FRAMEWORK dan WEBPACK_LOADER.

URL_STATIC = '/static/'
DIRS_STATICFILES = [os.path.join(BASE_DIR, "frontend/build/static")]
TEMPLATE_DIRS = [os.path.join(BASE_DIR, "frontend/public")]
CORS_ORIGIN_ALLOW_ALL = Benar
REST_FRAMEWORK = {'DEFAULT_RENDERER_CLASSES': ('rest_framework.renderers.JSONRenderer', )}
WEBPACK_LOADER' = {'IR'BUNDLE': {'IR'BUNDLE': dist/', 'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json')}}

Selepas membuat konfigurasi ini, kita boleh mula menulis kod backend kami ialah hilang. Kami akan menentukan fail yang dipanggil views.py untuk mengendalikan permintaan HTTP kami.

Dalam fungsi paparan, kami akan menggunakan nama komponen React sebagai parameter penghalaan untuk memuatkan templat React kami secara dinamik dan menghantarnya ke bahagian hadapan.

4. Membina alatan pembungkusan

Semasa penggunaan sebenar, kami perlu menggunakan webpack untuk membungkus komponen React dan sumber yang berkaitan ke dalam fail. Untuk memudahkan pengurusan, kami boleh membenamkan nama komponen React ke dalam fail konfigurasi Webpack, supaya ia boleh menjana fail pembungkusan yang sepadan berdasarkan nama komponen.

Selepas membuat persediaan ini, kami boleh menyepadukan kod bahagian hadapan dan bahagian belakang. Kami boleh menggunakan perkhidmatan fail statik Django untuk menerbitkan fail pakej React dan templat HTML bersama-sama pada halaman web yang sama untuk melengkapkan pembinaan contoh SPA kami.

5. Ringkasan

Dalam artikel ini, kami menggunakan Python dan React untuk membina contoh SPA dan menunjukkan idea asas dan kaedah pelaksanaan SPA. Daripada contoh ini, kita dapat melihat bahawa seni bina SPA boleh menjadikan keseluruhan tapak lebih pantas, lebih cekap dan lebih mudah diselenggara. Saya harap artikel ini berguna kepada pemula Jika anda menemui masalah atau mempunyai sebarang pertanyaan, sila hubungi kami untuk komunikasi.

Atas ialah kandungan terperinci Membina contoh SPA menggunakan Python dan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!