小编Spy*_*lis的帖子

如何将 JSON 数据从 JavaScript 前端发布到 FastAPI 后端?

我试图将一个名为“ethAddress”的值从客户端的输入表单传递到 FastAPI,以便我可以在函数中使用它来生成 matplotlib 图表。

我正在使用 fetch 将输入的文本发布到 Charts.tsx 文件中:

   fetch("http://localhost:8000/ethAddress", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(ethAddress),
    }).then(fetchEthAddresses);
Run Code Online (Sandbox Code Playgroud)

然后我的 api.py 文件设置如下:

#imports
app = FastAPI()

@app.get("/ethAddress")
async def get_images(background_tasks: BackgroundTasks, ethAddress: str):
    
    image = EthBalanceTracker.get_transactions(ethAddress)
    img_buf = image
    background_tasks.add_task(img_buf.close)
    headers = {'Content-Disposition': 'inline; filename="out.png"'}
    return Response(img_buf.getvalue(), headers=headers, media_type='image/png')


@app.post("/ethAddress")
async def add_ethAddress(ethAddress: str):
    return ethAddress
Run Code Online (Sandbox Code Playgroud)

据我了解,我使用请求将请求正文中的“ethAddress”从客户端传递到后端fetch POST,然后我可以访问@app.post在 FastAPI 中使用已发布的值。然后我将该值作为字符串返回。然后我在路线中使用它GET来生成图表。

我收到此错误:

INFO:     127.0.0.1:59821 - "POST /ethAddress HTTP/1.1" 422 Unprocessable Entity
INFO:     127.0.0.1:59821 …
Run Code Online (Sandbox Code Playgroud)

python reactjs next.js fastapi

4
推荐指数
1
解决办法
6107
查看次数

if 语句可以在 usestates 中使用吗?

我有一个 useState 如下:

const [Total, setTotal] = useState(props.location.state.data.price)  
Run Code Online (Sandbox Code Playgroud)

我想要它,所以如果 props.location.state.data.price 已定义,它会呈现,但如果未定义,则返回 0。

我试过无效合并运算符,但它不起作用。任何帮助表示赞赏。谢谢

javascript reactjs

2
推荐指数
1
解决办法
56
查看次数

MongoDB 与 MongoDB Atlas

我是一名新的 Web 开发人员,对 MongoDB 有一些疑问。

我正在处理的站点使用使用 MongoDB 在本地保存数据的引用。但是在做了一些研究之后,我看到了一个叫做 MongoDB Atlas 的东西,它可以将数据保存到云端。我想我的问题是,如果我要托管一个网站,我选择使用哪个网站有关系吗?或者我会被限制在 Atlas 吗?为什么有人会选择一个?

mongodb reactjs mongodb-atlas

2
推荐指数
1
解决办法
587
查看次数

如何使用 FastAPI/Nextjs 显示 Matplotlib 图表而不在本地保存图表?

我正在为网站使用 Nextjs 前端和 FastAPI 后端。我在前端有一个“以太坊地址”的输入表单,并使用输入的地址,我在后端生成一个 matplotlib 图表,显示“一段时间内的以太坊余额”。现在,我尝试使用 FastAPI 返回此图表,以便可以在前端显示它。我不想在本地保存图表。

这是到目前为止我的相关代码:

前端/ nexjs 文件名为“Chart.tsx”。正文中的“ethAddress”正在捕获输入表单中输入的数据。

fetch("http://localhost:8000/image", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(ethAddress),
    }).then(fetchEthAddresses);
Run Code Online (Sandbox Code Playgroud)

生成名为 ethBalanceTracker.py 的 matplotlib 图表的后端 python 文件

#Imports
#Logic for chart here

        plt.plot(times, balances)
        buf = BytesIO()
        plt.savefig(buf, format="png")
        buf.seek(0)

        return StreamingResponse(buf, media_type="image/png")
Run Code Online (Sandbox Code Playgroud)

使用名为 api.py 的 FastAPI 的后端 python 文件

@app.get("/image")
async def get_images() -> dict:
    return {"data": images}

@app.post("/image")
async def add_image(ethAddress: dict) -> dict:

    test = EthBalanceTracker.get_transactions(ethAddress["ethAddress"])
    images.append(test)
Run Code Online (Sandbox Code Playgroud)

我已经尝试了上面的代码和其他一些变体。我使用是StreamingResponse因为我不想在本地保存图表。我的问题是我无法显示图表localhost:8000/images并得到一个 …

python charts matplotlib next.js fastapi

2
推荐指数
1
解决办法
2431
查看次数