Python FASTAPI 将SQLITE3中数据库 data表单的数据显示在html页面中,第一行显示列名,第二行开始显示内容,数据在页面上可以直接被修改,修改后点击保存按钮,同步数据库中的数据
时间: 2024-09-29 16:02:18 浏览: 56
ohcoach-cell-data-upload-server:将单元格中的gps和imu数据上传到python flask服务器
在Python FastAPI中将SQLite3数据库的data表单数据显示在HTML页面上并实现动态修改和保存,可以按照以下步骤进行:
1. **安装所需库**:
首先,需要安装`fastapi`, `uvicorn`, `jinja2`以及`sqlite3`库。
```bash
pip install fastapi uvicorn jinja2
```
2. **数据库操作**:
使用`sqlite3`库建立连接并读取数据表:
```python
import sqlite3
from typing import List
def get_database_data():
db = sqlite3.connect('your_database.db') # 替换为你实际的数据库路径
cursor = db.cursor()
cursor.execute("SELECT * FROM data")
headers = [description[0] for description in cursor.description]
rows = cursor.fetchall()
db.close()
return headers, rows
```
3. **FastAPI路由设置**:
创建一个GET路由返回HTML模板,其中包含数据表头和初始数据:
```python
from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@app.get("/data_table")
async def display_data(request: Request):
headers, rows = get_database_data()
context = {"headers": headers, "rows": rows}
return templates.TemplateResponse("data_table.html", context)
```
4. **HTML模板** (`templates/data_table.html`):
创建一个HTML模板,展示表头和数据,并添加一个表单元素供用户修改:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Table</title>
</head>
<body>
<table>
<thead>
<tr>
{{ for header in headers }}
<th>{{ header }}</th>
{{ endfor }}
</tr>
</thead>
<tbody>
{{ for row in rows }}
<tr>
{{ for cell in row }}
<td contenteditable="true">{{ cell }}</td>
{{ endfor }}
<td><button id="save-row-{{ loop.index0 }}">{{ 'Save' }}</button></td>
</tr>
{{ endfor }}
</tbody>
</table>
<script>
// JavaScript 事件监听以保存修改后的数据
document.querySelectorAll('button').forEach(function (btn, index) {
btn.addEventListener('click', function () {
const saveButton = this;
const newRow = saveButton.parentElement.previousElementSibling;
const cells = newRow.querySelectorAll('td');
const newData = {};
cells.forEach((cell, idx) => {
if (idx % 2 === 0) { // 每隔一列处理数据
newData[cell.innerText] = cell.contentEditable ? cell.textContent : '';
}
});
fetch(`/data_table/update/${index}`, {
method: 'PUT',
body: JSON.stringify(newData),
headers: {'Content-Type': 'application/json'}
}).then(response => response.json());
});
});
</script>
</body>
</html>
```
5. **更新数据的POST路由**:
创建一个POST路由接收用户的修改并更新数据库:
```python
@app.post("/data_table/update/{row_index}")
async def update_data(row_index: int, request: Request):
headers, rows = get_database_data()
row_to_update = rows[row_index]
data = await request.json()
for idx, cell_value in enumerate(data.values()):
row_to_update[idx * 2 + 1] = cell_value # 数据的索引假设每行有两个单元格
# 更新数据库
db = sqlite3.connect('your_database.db')
cursor = db.cursor()
cursor.execute("UPDATE data SET column2 = ?, column3 = ? WHERE id = ?", (row_to_update[1], row_to_update[2], row_to_update[0]))
db.commit()
db.close()
return {"message": "Data saved"}
```
记得替换上述代码中的数据库路径(`your_database.db`)。
阅读全文