要在 Flask 應用中集成 Spinner 組件，你需要使用 Flask 作為后端服務器，同時使用前端框架（如 React、Vue 或 Angular）來創建和管理 Spinner 組件
pip install Flask
# 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)
<!-- 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 和我們的應用代碼 -->
<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>
// 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"));
python app.py
http://localhost:5000，你將看到一個顯示 “Loading…” 的 Spinner 組件。這個例子展示了如何在 Flask 應用中集成一個簡單的 Spinner 組件。你可以根據需要修改這個例子，以適應你的項目需求。
