fastapi 建立一个服务,一个html网页每隔1s向服务器请求数据,服务器返回json字符串{“name”:“123”,“string”:345},html网页分开显示这个字符串的name和string
时间: 2024-09-14 08:05:35 浏览: 33
Java Json字符串的双引号("")括号如何去掉
FastAPI是一个现代、快速(高性能)的Web框架,用于构建API,具有基于标准Python类型提示的交互式API文档。使用FastAPI,你可以创建一个服务,并配合JavaScript和HTML来实现定时从服务器获取数据并更新网页内容。
以下是使用FastAPI建立服务的基本步骤和代码示例:
1. 首先安装FastAPI和Uvicorn(一个用于运行FastAPI应用的ASGI服务器):
```bash
pip install fastapi uvicorn
```
2. 创建一个FastAPI应用,并定义一个端点来提供所需的数据:
```python
# main.py
from fastapi import FastAPI
import time
app = FastAPI()
@app.get("/")
async def get_data():
data = {"name": "123", "string": 345}
return data
```
3. 使用JavaScript来定时向服务器请求数据,并更新HTML页面:
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FastAPI Data Fetching</title>
</head>
<body>
<h1>FastAPI Data Fetching Example</h1>
<div id="name">Name will be shown here</div>
<div id="string">String will be shown here</div>
<script>
function fetchData() {
fetch('/').then(response => response.json()).then(data => {
document.getElementById('name').innerText = data.name;
document.getElementById('string').innerText = data.string;
}).catch(error => {
console.error('Error fetching data:', error);
});
}
// Call fetchData every 1 second
setInterval(fetchData, 1000);
</script>
</body>
</html>
```
4. 运行FastAPI应用:
```bash
uvicorn main:app --reload
```
`--reload` 选项使得服务器在代码变更后自动重启,方便开发过程中使用。
现在,打开浏览器并访问 `http://127.0.0.1:8000`,你应该能看到每秒钟更新一次的 `name` 和 `string` 的值。
阅读全文