python fastapi 将sqlite数据全部内容在html显示,并可以在html页面中修改数据,点击保存后,更新这些数据到数据库中
时间: 2024-09-29 08:02:01 浏览: 18
在Python FastAPI应用中将SQLite数据展示在HTML页面上,并允许用户实时编辑并提交更新,你需要做以下几个步骤:
1. **数据库操作**:
首先,你需要安装FastAPI、Uvicorn(作为Web服务器)、Pydantic(用于数据验证)和sqlalchemy等库。然后,建立一个模型来映射SQLite表,比如:
```python
from pydantic import BaseModel
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy import Column, Integer, String, create_engine
Base = declarative_base()
class MyTable(Base):
__tablename__ = 'my_table'
id = Column(Integer, primary_key=True)
name = Column(String)
# ... 其他字段
engine = create_engine('sqlite:///example.db', echo=False)
Base.metadata.create_all(engine)
SessionLocal = sessionmaker(bind=engine)
```
2. **获取并显示数据**:
使用FastAPI的路由和模板引擎(如Jinja2)获取数据库数据并在HTML中显示,示例:
```python
async def get_items(request):
with SessionLocal() as session:
items = session.query(MyTable).all()
return HTMLTemplateResponse('index.html', {'items': items})
```
3. **HTML模板** (`templates/index.html`):
设计一个表格,将每条数据绑定到对应的表单元素:
```html
<table>
{% for item in items %}
<tr>
<td>{{ item.name }}</td>
<td><input type="text" name="name" value="{{ item.name }}"></td>
<!-- 添加修改按钮 -->
<td><button onclick="saveEdit('{{ item.id }}')">Save</button></td>
</tr>
{% endfor %}
</table>
<script>
function saveEdit(itemId) {
// 获取表单值并发送Ajax请求
var name = document.querySelector(`input[name=name][value='${itemId}']`).value;
fetch('/api/update_item', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: itemId, name }),
})
.then(response => response.json())
.catch(error => console.error(error));
}
</script>
```
4. **处理表单提交**:
创建一个更新数据的API端点,接收POST请求并更新数据库:
```python
async def update_item(request):
data = await request.json()
with SessionLocal() as session:
item = session.query(MyTable).filter_by(id=data['id']).first()
if item:
item.name = data['name']
session.commit()
return HTTPStatus.OK
```
现在,用户可以在线编辑和保存数据。注意,为了安全起见,生产环境建议使用CSRF令牌和其他安全性措施,同时在前端使用HTTPS来加密通信。