如何在Flask应用中集成Spinner组件

flask

小樊

2024-09-09 08:41:11

栏目: 编程语言

要在 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 组件。你可以根据需要修改这个例子，以适应你的项目需求。

如何在Flask应用中集成Spinner组件

最新问答

相关标签