后端生成excel表格需要调用平台拿到数据,调用平台的时间为半小时,调用完成后返回给前端,此时前端异步处理拿到数据后容易白屏,如何解决,如何用代码实现
时间: 2023-12-08 20:06:31 浏览: 112
html前端动态获取后端数据显示到表格,实现分页显示
3星 · 编辑精心推荐
可以使用异步请求的方式,在后端调用平台拿到数据的同时,前端可以先展示一个 loading 界面,等到数据返回后再将数据展示给用户。
具体的实现方法可以是:
1. 前端:在发起请求时,展示一个 loading 界面,可以使用第三方库如 antd 的 Spin 组件来实现。
2. 后端:在调用平台拿到数据之后,将数据以 JSON 格式返回给前端,可以使用 Flask 框架的 jsonify 方法来实现。
3. 前端:在接收到数据后,将数据渲染到表格中,可以使用第三方库如 react-table 或 antd 的 Table 组件来实现。
下面是一个简单的代码示例:
```
// 前端代码
import { Spin, Table } from 'antd';
import axios from 'axios';
const MyTable = () => {
const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
const fetchData = async () => {
setLoading(true);
const res = await axios.get('/api/getData');
setData(res.data);
setLoading(false);
};
useEffect(() => {
fetchData();
}, []);
if (loading) {
return <Spin />;
}
return (
<Table dataSource={data} columns={columns} />
);
};
// 后端代码
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/getData')
def get_data():
# 调用平台获取数据
data = call_platform()
return jsonify(data)
if __name__ == '__main__':
app.run()
```
阅读全文