如何连接Svelte前端与Python API实现跨端口数据交互

你规划的前后端分离流程完全可落地，已编写的back.py核心逻辑可以100%复用，不需要重写原有返回列表/数组的业务函数，仅需给Python代码加一层极薄的Web服务封装即可。

1. 封装后端服务 #

用FastAPI给现有back.py套Web层，自动处理JSON序列化、跨域、参数校验，开发效率最高。

• 先安装依赖，执行命令：pip install fastapi uvicorn
• 打开你现有的back.py，原有业务函数完全保留不动，只新增服务启动、路由、跨域配置的代码，参考示例：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
import uvicorn

# --------------------------
# 这里放你原来写的所有代码
# 比如def fun(param1, param2): 这类业务函数，一行都不用改
# --------------------------
def fun(param1: str, param2: int):
    # 你原来的逻辑，返回列表、数组的代码保持原样
    return original_result

# 以下是新增的Web服务代码
app = FastAPI()

# 配置跨域规则，解决前后端不同端口的访问拦截问题
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 定义前端调用的接口
@app.get("/api/query-data")
def query_data(param1: str, param2: int):
    # 直接调用你已经写好的fun函数，FastAPI会自动把返回的列表/数组转成标准JSON
    data = fun(param1, param2)
    return {"code": 200, "data": data}

if __name__ == "__main__":
    # 后端服务启动在本地8000端口
    uvicorn.run(app, host="127.0.0.1", port=8000)

• 运行修改后的back.py，后端服务就启动完成，可直接在浏览器访问http://127.0.0.1:8000/api/query-data?param1=测试&param2=1验证返回是否正常。

2. 改造Svelte前端 #

你的Svelte项目正常启动即可（默认一般跑在5173端口，和后端8000端口不冲突），只需要把原来写死模拟数据的部分，替换成接口请求逻辑即可，参考front.svelte示例：

<script>
  import ApexCharts from 'svelte-apexcharts'
  // 绑定页面输入的参数
  let param1 = ''
  let param2 = ''
  // 图表配置完全保留你原来的写法
  let chartOptions = {
    // 你之前写好的Apexcharts配置项，不需要改
  }
  // 图表数据初始值可以保留原来的模拟数据，接口请求成功后会自动替换
  let chartSeries = []

  // 接口请求函数
  async function loadData() {
    const resp = await fetch(`http://127.0.0.1:8000/api/query-data?param1=${encodeURIComponent(param1)}&param2=${encodeURIComponent(param2)}`)
    const result = await resp.json()
    if (result.code === 200) {
      // 拿到后端返回的数组，直接赋值给图表series即可，和你之前用模拟数据的入参要求完全一致
      chartSeries = result.data
    }
  }
</script>

<!-- 页面输入区域 -->
<div class="input-area">
  <input type="text" bind:value={param1} placeholder="请输入param1" />
  <input type="number" bind:value={param2} placeholder="请输入param2" />
  <button on:click={loadData}>查询生成图表</button>
</div>

<!-- 图表组件，和你之前的写法完全一致 -->
<ApexCharts options={chartOptions} series={chartSeries} width="100%" />

• 数据结构对齐：后端fun函数返回的列表/数组结构，必须和你之前写的模拟数据结构完全一致，比如之前模拟数据是[{name: '销售额', data: [12,23,34]}]，后端返回的结构也要完全匹配，否则图表会渲染失败
• 参数类型匹配：前端传参时注意数字类型的参数不要传字符串，FastAPI会自动做参数校验，传错类型会返回422错误，根据接口返回提示调整即可
• 本地开发阶段跨域配置直接用allow_origins=["*"]即可，不需要额外做代理配置，上线部署时再调整为实际前端域名

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