Rumah >hujung hadapan web >tutorial js >Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask
Cara menggunakan React and Flask untuk membina aplikasi web yang ringkas dan mudah digunakan
Pengenalan:
Dengan perkembangan Internet, keperluan aplikasi web menjadi semakin pelbagai dan kompleks. Untuk memenuhi keperluan pengguna untuk kemudahan penggunaan dan prestasi, semakin penting untuk menggunakan tindanan teknologi moden untuk membina aplikasi rangkaian. React dan Flask ialah dua rangka kerja yang sangat popular untuk pembangunan bahagian hadapan dan belakang, dan ia berfungsi dengan baik bersama-sama untuk membina aplikasi web yang ringkas dan mudah digunakan. Artikel ini akan memperkenalkan secara terperinci cara menggunakan React dan Flask untuk membina aplikasi web yang ringkas dan mudah digunakan, serta memberikan contoh kod khusus.
1 Pengenalan kepada React:
React ialah perpustakaan JavaScript sumber terbuka Facebook untuk membina antara muka pengguna. Ia menerima pakai idea pengkomponenan, membolehkan pembangun membahagikan halaman kepada komponen bebas, dan setiap komponen boleh menguruskan status dan tingkah lakunya sendiri secara bebas. Reka bentuk ini menjadikan pembangunan lebih modular dan boleh diselenggara.
2. Pengenalan kepada Flask:
Flask ialah rangka kerja aplikasi web ringan yang ditulis dalam Python. Ia dibangunkan berdasarkan perpustakaan Werkzeug dan Jinja2, dan mudah digunakan dan sangat fleksibel. Flask menyediakan keupayaan untuk membina aplikasi web dengan cepat dan boleh digunakan dengan mudah dengan perpustakaan dan rangka kerja lain.
3 Bina bahagian hadapan React:
npx create-react-app my-app
Arahan ini akan mencipta projek React bernama my-app dalam direktori semasa.
import React, { useState } from 'react'; function App() { const [count, setCount] = useState(0); const handleIncrement = () => { setCount(prevCount => prevCount + 1); }; const handleDecrement = () => { setCount(prevCount => prevCount - 1); }; return ( <div> <h1>计数器</h1> <p>当前计数:{count}</p> <button onClick={handleIncrement}>增加</button> <button onClick={handleDecrement}>减少</button> </div> ); } export default App;
Komponen pembilang mudah ini mengandungi teks yang memaparkan kiraan semasa dan dua butang Klik boleh digunakan untuk menambah dan mengurangkan bilangan. Komponen menggunakan cangkuk useState React secara dalaman untuk mengurus keadaan pengiraan.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
Fungsi kod ini adalah untuk menjadikan komponen Apl kepada elemen DOM dengan id daripada akar.
4. Bina bahagian belakang Flask:
pip install flask
from flask import Flask, jsonify app = Flask(__name__) @app.route('/api/counter', methods=['GET']) def get_counter(): counter = 0 return jsonify(counter) if __name__ == '__main__': app.run(debug=True)
Kod ini mencipta aplikasi Flask bernama aplikasi dan mentakrifkan laluan bernama get_counter untuk mengendalikan permintaan GET dan mengembalikan nilai awal pembilang.
python app.py
Arahan ini akan memulakan pelayan setempat, mendengar pada port 5000 secara lalai.
5. Sambungan depan dan belakang:
... const handleIncrement = () => { fetch('/api/counter') .then(response => response.json()) .then(data => setCount(data)); }; const handleDecrement = () => { fetch('/api/counter') .then(response => response.json()) .then(data => setCount(data)); }; ...
API fetch digunakan di sini untuk menghantar permintaan GET, dan kemudian dalam panggilan balik Tetapkan nilai kiraan dalam fungsi.
... const handleIncrement = () => { fetch('/api/counter', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ count: count + 1 }), }) .then(response => response.json()) .then(data => setCount(data)); }; const handleDecrement = () => { fetch('/api/counter', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ count: count - 1 }), }) .then(response => response.json()) .then(data => setCount(data)); }; ...
Fetch API digunakan di sini untuk menghantar permintaan POST dan membawa nilai kiraan badan permintaan. Kemudian tetapkan nilai kiraan yang dikemas kini dalam fungsi panggil balik.
6. Ringkasan:
Artikel ini memperkenalkan secara terperinci cara menggunakan React dan Flask untuk membina aplikasi web yang ringkas dan mudah digunakan. Pengkomponunan dan pengurusan keadaan halaman hadapan boleh dicapai melalui React, manakala Flask menyediakan pembinaan dan pengurusan data antara muka belakang. Melalui sambungan antara hujung depan dan belakang, interaksi data dan kemas kini halaman boleh dicapai. Contoh kod di atas adalah aplikasi kaunter mudah yang boleh dikembangkan dan diubah suai mengikut keperluan sebenar. Saya harap artikel ini akan membantu pembangun yang ingin membina aplikasi web menggunakan React dan Flask.
Atas ialah kandungan terperinci Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!