Rumah >pembangunan bahagian belakang >Tutorial Python >REACT x persediaan FLASK
APA ITU FLASK?
FLASK ialah rangka kerja web yang ringan untuk Python yang membolehkan anda membina apl web dengan cepat dan dengan kod boilerplate yang minimum. Mari melangkah-.
MARI MULAKAN LANGKAH DEMI LANGKAH
Mari mulakan dengan membuat persediaan yang diperlukan. Pergi ke Vite dan salin arahan ini:
npm create vite@latest
Saya menggunakan MAC sahaja, jadi persediaan untuk WINDOWS mungkin berbeza sedikit. Seterusnya, buka terminal dan tampal kod yang anda salin dari tapak web Vite. Sebaik sahaja anda menjalankan kod anda akan digesa kepada perkara berikut:
? Project name: › vite-project
Ganti vite-project dengan nama projek anda sendiri. Selepas anda memberikannya nama, anda digesa untuk memilih rangka kerja, dalam kes saya, saya akan memilih REACT sebagai rangka kerja saya, tetapi anda boleh memilih rangka kerja yang anda kenali dan tekan enter:
? Select a framework: › - Use arrow-keys. Return to submit. Vanilla Vue ❯ React Preact Lit Svelte Solid Qwik Others
Setelah anda memilih rangka kerja anda, kini anda boleh memilih varian (bahasa) pilihan anda. Saya biasa dengan JavaScript jadi saya akan memilihnya. Ingat: anda perlu memilih varian yang lebih anda kuasai dan tekan tab enter.
? Select a variant: › - Use arrow-keys. Return to submit. TypeScript TypeScript + SWC ❯ JavaScript JavaScript + SWC Remix ↗
Selepas gesaan ini dipilih, terdapat arahan berikut yang diberikan kepada anda untuk menjalankannya:
Scaffolding project in /Users/Marlon/Development/code/practice-phase-4/flask_app_dev/my-app... Done. Now run: cd my-app npm install npm run dev
jika anda berjaya menjalankan kod di atas, anda akan sampai ke hos tempatan anda:
VITE v5.4.8 ready in 1455 ms ➜ Local: http://127.0.0.1:5555/ ➜ Network: use --host to expose ➜ press h + enter to show help
Anda boleh menyalin alamat http dan menampalnya dalam penyemak imbas anda dan anda akan melihat halaman Vite React, yang kini anda boleh gunakan untuk projek anda.
Sekarang buka editor kod anda, saya menggunakan Kod Visual Studio sebagai editor kod saya. Sekali lagi, anda boleh menggunakan editor kegemaran anda. Seterusnya, di dalam terminal bersepadu VSCode, anda perlu menjalankan arahan ini secara berasingan untuk mendapatkan alamat hos setempat anda, untuk mengedit dan mula membina apl anda.
npm install npm run dev
Mari cd di dalam src dan anda akan melihat fail berikut
src % tree . ├── App.css ├── App.jsx ├── assets │ └── react.svg ├── index.css └── main.jsx
Di dalam 'App.jsx' anda boleh mengedit dan/atau memadamkan kod di dalam fail itu dan menambah kod anda sendiri dengan sewajarnya. Fail ini mengandungi logo Vite dan React.
Setelah anda membiasakan diri dengan fail yang telah anda buat, kini kami boleh menyediakan direktori bahagian hadapan dan bahagian belakang. Mari buat kemudian dengan menjalankan kod ini:
mkdir backend; mkdir server; mkdir frontend
Mari dapatkan persediaan projek kami agar kelihatan lebih kurang seperti ini:
my-app/ ├── backend/ | server/ │ ├── app.py │ ├── models.py │ ├── requirements.txt ├── frontend/ │ ├── src/ │ ├── public/ │ ├── package.json
Buka dua terminal:
Satu terminal adalah untuk bahagian belakang/pelayan dan satu lagi untuk bahagian hadapan/src.
Bahagian belakang/pelayan jalankan arahan berikut:
pipenv install && pipenv shell
untuk memastikan semua kebergantungan dipasang dan untuk mencipta Pipfile kami.
Di dalam frontend/src jalankan arahan berikut:
npm install npm run dev
untuk memastikan semua fail yang diperlukan seperti fail package.json kami dicipta.
Bahagian 2 Akan Datang....
Atas ialah kandungan terperinci REACT x persediaan FLASK. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!