FastAPI中如何让终端用户通过界面向请求体输入数据？

完全可以实现你要的效果，核心是通过前端页面提供可视化交互（下拉选框），再用JavaScript把用户选择的内容自动转成符合要求的JSON格式，发送到FastAPI接口。下面是具体实现思路和代码示例：

一、基础实现方案（静态列名） #

如果你的数据库列名是固定的，可以直接在前端写死下拉选项：

1. 前端HTML+JavaScript代码 #

<!DOCTYPE html>
<html>
<head>
    <title>数据库列查询</title>
</head>
<body>
    <h3>选择要查询的列</h3>
    <!-- 下拉选框 -->
    <select id="columnSelect">
        <option value="">请选择列</option>
        <option value="id">ID</option>
        <option value="name">姓名</option>
        <option value="age">年龄</option>
        <!-- 这里替换成你实际的数据库列名 -->
    </select>
    <button onclick="submitQuery()">提交查询</button>
    <div id="resultArea" style="margin-top:20px;"></div>

    <script>
        async function submitQuery() {
            // 获取下拉框选中的值
            const selectedColumn = document.getElementById('columnSelect').value;
            if (!selectedColumn) {
                alert('请先选择列');
                return;
            }

            // 包装成符合后端要求的JSON结构
            const requestData = {
                column_to_select: selectedColumn
            };

            try {
                // 发送POST请求到FastAPI接口
                const response = await fetch('http://localhost:8000/query', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(requestData)
                });

                // 处理响应（根据你的后端返回结果调整）
                const result = await response.json();
                document.getElementById('resultArea').innerText = `查询结果：${JSON.stringify(result)}`;
            } catch (error) {
                document.getElementById('resultArea').innerText = `请求失败：${error.message}`;
            }
        }
    </script>
</body>
</html>

2. 后端代码（保持原有逻辑，加防注入优化） #

注意：你的原有代码直接拼接SQL字符串有SQL注入风险，建议改成参数化查询，示例如下：

from fastapi import FastAPI
from pydantic import BaseModel
import psycopg2  # 以PostgreSQL为例，其他数据库逻辑类似

app = FastAPI()

class SqlQuery(BaseModel):
    column_to_select: str

# 参数化查询避免SQL注入
def execute_my_query_function(column):
    conn = psycopg2.connect("dbname=mydatabase user=postgres")
    cur = conn.cursor()
    # 用%s作为占位符（不同数据库占位符可能不同，比如MySQL用%s，SQLite用?）
    cur.execute(f"SELECT %s FROM mytable;", (column,))
    result = cur.fetchall()
    cur.close()
    conn.close()
    return result

@app.post("/query")
async def my_query(sql_query: SqlQuery):
    result = execute_my_query_function(sql_query.column_to_select)
    return {"data": result}

二、动态获取列名（更灵活） #

如果数据库列名可能变化，可以在后端加一个接口返回所有列名，前端动态生成下拉选项：

1. 后端新增接口 #

@app.get("/columns")
async def get_columns():
    # 查询数据库表的所有列名（以PostgreSQL为例）
    conn = psycopg2.connect("dbname=mydatabase user=postgres")
    cur = conn.cursor()
    cur.execute("SELECT column_name FROM information_schema.columns WHERE table_name = 'mytable';")
    columns = [row[0] for row in cur.fetchall()]
    cur.close()
    conn.close()
    return {"columns": columns}

2. 前端修改JS，动态拉取列名 #

在原来的<script>里加初始化逻辑：

// 页面加载时获取列名并生成下拉选项
async function loadColumns() {
    try {
        const response = await fetch('http://localhost:8000/columns');
        const data = await response.json();
        const selectElement = document.getElementById('columnSelect');
        // 清空默认选项（保留提示）
        selectElement.innerHTML = '<option value="">请选择列</option>';
        // 动态添加列选项
        data.columns.forEach(column => {
            const option = document.createElement('option');
            option.value = column;
            option.textContent = column;
            selectElement.appendChild(option);
        });
    } catch (error) {
        alert(`加载列名失败：${error.message}`);
    }
}

// 页面加载完成后执行初始化
window.onload = loadColumns;

核心逻辑总结 #

1. 前端提供可视化交互界面（下拉选框），让用户直观选择；
2. JavaScript捕获用户选择，将数据转换成后端要求的JSON结构；
3. 通过HTTP请求（fetch/axios）将JSON发送到FastAPI接口；
4. 后端用BaseModel自动解析JSON，处理业务逻辑。

内容的提问来源于stack exchange，提问作者random_juncture