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:

1. Buat projek React:
   Mula-mula, kita perlu menggunakan alat Create React App untuk mencipta projek React. Buka baris arahan dan laksanakan arahan berikut:

npx create-react-app my-app

Arahan ini akan mencipta projek React bernama my-app dalam direktori semasa.

2. Tulis komponen React:
   Buat fail bernama App.js dalam direktori src dan edit kod berikut:

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.

3. Rendering React komponen:
   Dalam fail index.js dalam direktori src, gantikan kod asal dengan kod berikut:

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:

1. Install Flask:
   Laksanakan arahan berikut dalam baris arahan untuk memasang perpustakaan Flask:

pip install flask

2. Buat aplikasi Flask:
   Create dan edit fail bernama app.py ia Kod berikut:

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.

3. Jalankan aplikasi Flask:
   Laksanakan arahan berikut dalam baris arahan untuk menjalankan aplikasi Flask:

python app.py

Arahan ini akan memulakan pelayan setempat, mendengar pada port 5000 secara lalai.

5. Sambungan depan dan belakang:

1. Hantar permintaan GET dan dapatkan data:
   Dalam fail App.js, edit fungsi handleIncrement dan handleDecrement seperti berikut:

...
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.

2. Hantar permintaan POST dan kemas kini data:
   Dalam fail App.js, edit handleIncrement dan handleDecrement fungsi seperti berikut:

...
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!