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

要在 Flask 应用中集成 Spinner 组件，你需要使用 Flask 作为后端服务器，同时使用前端框架（如 React、Vue 或 Angular）来创建和管理 Spinner 组件

1. 安装 Flask：

pip install Flask

1. 创建一个简单的 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)

1. 创建一个简单的 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>

1. 创建一个 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. 运行 Flask 应用：

python app.py

1. 打开浏览器并访问 http://localhost:5000，你将看到一个显示 “Loading…” 的 Spinner 组件。

这个例子展示了如何在 Flask 应用中集成一个简单的 Spinner 组件。你可以根据需要修改这个例子，以适应你的项目需求。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！