不使用vue等前端的情况下,python fastapi 将excel文件Sheet的内容在线渲染到一个网页上,每一行数据有一个复选项,页面有增加行功能,删除勾选的行,保存当前页面数据到服务器
时间: 2024-10-06 22:01:56 浏览: 63
在Python FastAPI项目中,如果你想要实现在不依赖Vue等前端框架的前提下,将Excel文件内容以表格形式在线展示并允许用户操作(选择、添加和删除行),可以采用以下步骤:
1. **处理Excel文件**:
使用第三方库如`pandas`读取Excel文件(`pandas.read_excel()`),将数据加载到DataFrame对象中。
```python
import pandas as pd
def load_excel(file_path):
data = pd.read_excel(file_path)
return data
```
2. **构建HTML模板**:
创建一个简单的HTML模板,使用JavaScript(例如使用原生JavaScript或`axios`发送Ajax请求)来交互。你可以使用`html`和`javascript`标签直接编写基本的HTML结构,并使用CSS布局表格。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Excel Table</title>
</head>
<body>
<table id="data-table">
<!-- 表格内容将会在这里动态生成 -->
</table>
<script>
// JavaScript 代码用于显示数据和操作
</script>
</body>
</html>
```
3. **FastAPI端点**:
在FastAPI应用中创建一个路由,接收文件上传并返回JSON数据供前端渲染。这部分需要提供一个POST接口,接收文件流,然后调用之前的数据加载函数。
```python
from fastapi import FastAPI, File, UploadFile
app = FastAPI()
@app.post("/upload")
async def upload_file(file: UploadFile = File(...)):
file_content = await file.read()
data = load_excel(io.BytesIO(file_content))
return {"rows": data.to_dict(orient="records")}
```
4. **前端交互**:
在JavaScript中,监听文件上传事件,然后使用`fetch`或`axios`从服务器获取数据。遍历数据填充表格,同时为每个单元格添加复选框。添加、删除行和保存数据都需要通过JavaScript处理DOM和发送HTTP请求到服务器。
5. **更新和提交数据**:
用户操作后,比如点击“删除”按钮,可以在前端删除对应行的数据显示,然后发送带有已删除行标识的请求到服务器。对于添加行,可以动态创建新的表格外加复选框,然后同样发送包含新数据的请求。
```javascript
// 伪代码示例
function deleteRow(rowId) {
// 删除DOM元素
axios.delete('/update', { data: { rowId: rowId } });
}
function addRow() {
// 添加新行到表格
axios.post('/add_row', newRowData);
}
```
6. **服务器端处理增删操作**:
接收到前端的更新请求,在服务器端对DataFrame进行修改,然后持久化到数据库或其他存储。
```python
@app.post("/update")
async def update_rows(rows_to_update):
# 更新数据...
updated_data = ... # 对数据做相应处理
return updated_data
@app.post("/add_row")
async def add_new_row(new_row_data):
# 新增行...
added_data = ... # 同样处理新增数据并返回
return added_data
```
阅读全文