阅读量:0
要在 Flask 应用中集成 Spinner 组件，你需要使用 Flask 作为后端服务器，同时使用前端框架（如 React、Vue 或 Angular）来创建和管理 Spinner 组件
- 安装 Flask：
pip install Flask - 创建一个简单的 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) - 创建一个简单的 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 和我们的应用代码 --> <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> - 创建一个 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")); - 运行 Flask 应用：
python app.py - 打开浏览器并访问
http://localhost:5000，你将看到一个显示 “Loading…” 的 Spinner 组件。
这个例子展示了如何在 Flask 应用中集成一个简单的 Spinner 组件。你可以根据需要修改这个例子，以适应你的项目需求。
