Python FASTAPI 将SQLITE3中数据库 data表单的数据显示在html页面中,第一行显示列名,第二行开始显示内容,数据在页面上可以直接被修改,点击保存按钮,同步页面数据到数据库中
时间: 2024-09-29 12:05:07 浏览: 24
在Python中,使用FastAPI构建Web应用并结合SQLite3数据库展示和交互数据,可以分为以下几个步骤:
1. **设置环境**:安装FastAPI、Uvicorn(服务器)、SQLAlchemy(ORM库)以及HTML模板引擎(如Jinja2)等必要的库。
```bash
pip install fastapi uvicorn sqlalchemy jinja2
```
2. **配置数据库**:创建一个SQLite3连接,并通过SQLAlchemy映射数据库模型。
```python
from sqlalchemy import create_engine, Column, Integer, String
from sqlalchemy.ext.declarative import declarative_base
Base = declarative_base()
class Data(Base):
__tablename__ = "data"
id = Column(Integer, primary_key=True)
name = Column(String)
value = Column(String)
```
3. **获取数据视图**:创建一个视图函数,从数据库获取数据并在响应中返回HTML模板。
```python
from fastapi import FastAPI, Depends, HTTPException
from sqlalchemy.orm import Session
from app.db import get_db
app = FastAPI()
@app.get("/data")
async def show_data(db: Session = Depends(get_db)):
data = db.query(Data).all()
columns = [col.name for col in Data.__table__.columns]
return {"columns": columns, "rows": [dict(row) for row in data]}
```
4. **HTML模板**:创建一个HTML模板,用于显示数据表格,包括列名和内容,以及表单供用户编辑。
```html
<!-- templates/data.html -->
<table>
<tr>
{% for column in columns %}
<th>{{ column }}</th>
{% endfor %}
</tr>
{% for row in rows %}
<tr>
{% for key, value in row.items() %}
<td>{{ value }}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
<form id="edit-form">
<!-- ...表单元素... -->
</form>
<button onclick="saveData()">保存</button>
```
5. **JavaScript功能**:添加一些前端脚本,比如事件监听器来更新表单数据,当点击“保存”按钮时发送Ajax请求更新数据库。
```javascript
// JavaScript (假设在templates/data.js)
function saveData() {
var formData = document.getElementById("edit-form").elements;
var data = {};
for (var i = 0; i < formData.length; i++) {
if (formData[i].name && formData[i].value) {
data[formData[i].name] = formData[i].value;
}
}
fetch(`/data`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
})
.then(response => response.json())
.catch(error => console.error('Error:', error));
}
```
6. **运行应用**:启动FastAPI应用,访问`http://localhost:8000/data`查看和编辑数据。
注意,这只是一个基础示例,实际项目中还需要考虑异常处理、表单验证以及更安全的数据传输方式(如CSRF令牌)。同时,为了更好地实现用户体验,建议使用Ajax轮询或者WebSockets来实现实时更新。