python fastapi 构建一个html的查询页面,当输入一个账号时,fastapi查询数据并将账号信息实时更新在原来的查询页面上
时间: 2024-09-13 11:16:32 浏览: 87
FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API,基于 Python 3.6+ 类型提示。要使用 FastAPI 构建一个 HTML 查询页面并实时更新账号信息,你可以通过以下步骤来实现:
1. 创建 FastAPI 应用程序并定义 API 路由。
2. 使用模板引擎(例如 Jinja2)生成 HTML 页面。
3. 使用 WebSocket 或其他实时更新技术(如 Server-Sent Events, SSE)来实现实时数据更新。
以下是一个简单的例子,使用 FastAPI 和 Jinja2 模板引擎来展示如何构建一个简单的查询页面并提供实时数据更新功能:
1. 安装 FastAPI 和相关库:
```bash
pip install fastapi uvicorn Jinja2Templates
```
2. 创建一个 Python 文件,例如 `main.py`,并编写以下代码:
```python
from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
from fastapi.responses import HTMLResponse
import uvicorn
app = FastAPI()
templates = Jinja2Templates(directory="path_to_templates")
@app.get("/", response_class=HTMLResponse)
async def read_item(request: Request):
return templates.TemplateResponse("query_page.html", {"request": request})
@app.post("/search")
async def search_account(account_number: str):
# 这里应该是查询数据库的代码
# 假设我们查询到了账号信息
account_info = f"账号信息:{account_number}"
return {"account_info": account_info}
if __name__ == "__main__":
uvicorn.run(app, host="0.0.0.0", port=8000)
```
3. 在你的项目目录中创建一个名为 `templates` 的文件夹,并在其中创建一个 HTML 文件 `query_page.html`,包含以下内容:
```html
<!DOCTYPE html>
<html>
<head>
<title>账号查询页面</title>
</head>
<body>
<h1>请输入账号进行查询</h1>
<form action="/search" method="post">
<input type="text" name="account_number">
<button type="submit">查询</button>
</form>
<div id="account-info">{{ account_info }}</div>
<script>
// 使用 AJAX 或者其他技术实现页面部分更新
// 这里只是一个示例
document.querySelector('form').onsubmit = function(event) {
event.preventDefault();
var account_number = document.querySelector('[name="account_number"]').value;
fetch('/search', {
method: 'POST',
body: new URLSearchParams({'account_number': account_number}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(response => response.json())
.then(data => {
document.getElementById('account-info').innerHTML = data.account_info;
})
.catch(error => console.error('Error:', error));
};
</script>
</body>
</html>
```
请注意,上面的 HTML 代码只是一个静态页面的示例,你需要根据实际情况修改和扩展,例如添加前端 JavaScript 代码以实现不重新加载页面的情况下更新账号信息。
4. 运行你的 FastAPI 应用:
```bash
uvicorn main:app --reload
```
现在,当你访问 FastAPI 应用提供的地址时,你将看到一个简单的查询页面,你可以输入账号并查询信息。点击查询按钮后,页面将显示账号信息。为了实现真正的实时更新,你可能需要使用更高级的技术如 WebSockets 或 Server-Sent Events。
阅读全文