fastapi 建立一个服务,一个html网页当点击更新按钮后,每隔1s向服务器请求数据,服务器返回json字符串{“name”:“123”,“string”:345},html网页分开显示这个字符串的name和string
时间: 2024-09-14 10:05:06 浏览: 11
FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API。要用 FastAPI 建立一个服务,并且有一个 HTML 网页能每隔一秒向服务器请求数据,可以通过编写一个 FastAPI 应用来实现,并使用 JavaScript 完成前端的定时请求和数据显示。
以下是一个简单的示例实现:
1. 安装 FastAPI 和 Uvicorn(一个轻量级的 ASGI 服务器,用于运行 FastAPI 应用):
```bash
pip install fastapi uvicorn
```
2. 创建 FastAPI 应用:
```python
# main.py
from fastapi import FastAPI, BackgroundTasks
import time
app = FastAPI()
@app.get("/")
async def read_root():
return {"message": "Welcome to FastAPI"}
@app.get("/data")
async def get_data():
return {"name": "123", "string": 345}
# 假设这个函数是在后台执行的,每隔一定时间更新数据
def update_data():
for i in range(10):
time.sleep(1)
print("Data updated") # 实际情况下这里会是数据更新的逻辑
```
3. 编写 HTML 和 JavaScript 代码,使用 AJAX 或 Fetch API 定时请求数据:
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FastAPI Real-Time Data</title>
<script>
function fetchData() {
fetch('/data')
.then(response => response.json())
.then(data => {
document.getElementById('name').innerText = data.name;
document.getElementById('string').innerText = data.string;
})
.catch(error => console.error('Error:', error));
}
setInterval(fetchData, 1000); // 每隔1秒执行一次 fetchData 函数
</script>
</head>
<body onload="fetchData()">
<h1>Data from FastAPI</h1>
<p>Name: <span id="name"></span></p>
<p>String: <span id="string"></span></p>
</body>
</html>
```
4. 运行 FastAPI 应用:
```bash
uvicorn main:app --reload
```
这将在本地启动 FastAPI 服务器,默认监听 8000 端口。服务器启动后,可以通过浏览器访问 `http://127.0.0.1:8000/` 查看 HTML 页面,并看到每隔一秒更新一次的数据。