溫馨提示×

如何在Flask應(yīng)用中集成Spinner組件

小樊
83
2024-09-09 08:41:11
欄目: 編程語言

要在 Flask 應(yīng)用中集成 Spinner 組件，你需要使用 Flask 作為后端服務(wù)器，同時(shí)使用前端框架（如 React、Vue 或 Angular）來創(chuàng)建和管理 Spinner 組件

  1. 安裝 Flask：
pip install Flask
  1. 創(chuàng)建一個(gè)簡單的 Flask 應(yīng)用：
# app.py
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/spinner')
def spinner():
    return jsonify({"message": "Loading..."})

if __name__ == '__main__':
    app.run(debug=True)
  1. 創(chuàng)建一個(gè)簡單的 HTML 頁面，并引入 React 和 Bootstrap：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Flask Spinner Example</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div id="app"></div>

    <!-- 引入 React 和我們的應(yīng)用代碼 -->
   <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
   <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
   <script src="app.js"></script>
</body>
</html>
  1. 創(chuàng)建一個(gè) React 組件來顯示 Spinner：
// app.js
const { useState, useEffect } = React;

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    fetch("/api/spinner")
      .then((response) => response.json())
      .then((data) => setMessage(data.message));
  }, []);

  return (
    <div className="container">
      <h1>{message}</h1>
      <div className="spinner-border text-primary" role="status">
        <span className="visually-hidden">Loading...</span>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));
  1. 運(yùn)行 Flask 應(yīng)用：
python app.py
  1. 打開瀏覽器并訪問 http://localhost:5000，你將看到一個(gè)顯示 “Loading…” 的 Spinner 組件。

這個(gè)例子展示了如何在 Flask 應(yīng)用中集成一個(gè)簡單的 Spinner 組件。你可以根據(jù)需要修改這個(gè)例子，以適應(yīng)你的項(xiàng)目需求。

0 踩