当前位置: 首页 > news >正文

Fast API使用

相关的代码上都有注释,其中前端代码是用来提交表单的
此代码进行了跨域处理,允许前端直接提交表单,并正常返回
完整代码:

from typing import Unionfrom fastapi import Header, Cookie
from pydantic import BaseModel, Field
from fastapi.responses import RedirectResponse
from fastapi import Depends, FastAPI, HTTPException, Form, File, UploadFile
from fastapi.responses import JSONResponse
from typing import Optional
from fastapi.middleware.cors import CORSMiddleware
import asyncioapp = FastAPI()# 配置允许的跨域来源
origins = ["http://127.0.0.1",  # 本地前端"http://127.0.0.1:3000",  # 如果使用 VS Code Live Server"http://127.0.0.1:8000",  # 如果使用 VS Code Live Server"http://localhost",  # 本地前端"http://localhost:3000"  # 本地开发时的 URL"http://localhost:8000"  # 本地开发时的 URL
]# 添加 CORS 中间件
app.add_middleware(CORSMiddleware,allow_origins=origins,  # 允许的来源allow_credentials=True,  # 允许发送 Cookieallow_methods=["*"],  # 允许所有方法allow_headers=["*"],  # 允许所有头部
)# 自定义中间件处理 OPTIONS 请求
@app.middleware("http")
async def options_middleware(request, call_next):if request.method == "OPTIONS":headers = {"Access-Control-Allow-Origin": "*",  # 允许所有来源"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",  # 允许的 HTTP 方法"Access-Control-Allow-Headers": "Content-Type",  # 允许的请求头}return JSONResponse(content=None, status_code=200, headers=headers)response = await call_next(request)print(response)# 添加 CORS 头部到响应response.headers["Access-Control-Allow-Origin"] = "*"  # 或指定前端地址return response# 定义实体对象
class Item(BaseModel):name: str = Field(..., title="Item Name", max_length=100)description: str = Field(None, title="Item Description", max_length=255)price: float = Field(..., title="Item Price", gt=0)tax: float = None# 依赖项函数
def common_parameters(q: str = None, skip: int = 0, limit: int = 100):return {"q": q, "skip": skip, "limit": limit}# 主路径
@app.get("/")
def read_root():return {"Hello": "World"}# get
@app.get("/items/{item_id}")
def read_item(item_id: int, q: Union[str, None] = None):if item_id == 42:raise HTTPException(status_code=404, detail="Item not found")content = {"item_id": item_id}headers = {"X-Custom-Header": "custom-header-value"}return JSONResponse(content=content, headers=headers)# put
@app.put("/items/{item_id}")
def update_item(item_id: int, item: Item):return {"item_id": item_id}# post
@app.post("/items/")
def create_item(item: Item):print(f"{item.name}--{item.description}--{item.price}--{item.tax}")return item# 请求依赖前置
@app.get("/items/")
def read_item(commons: dict = Depends(common_parameters), user_agent: str = Header(None),session_token: str = Cookie(None)):return commons# return {"User-Agent": user_agent, "Session-Token": session_token}# 后处理函数
async def after_request():print("after_request")pass# 后处理依赖项
@app.get("/items/", response_model=dict)
async def read_items_after(request: dict = Depends(after_request)):return {"message": "Items returned successfully"}# 异步依赖项函数
async def get_token():# 模拟异步操作await asyncio.sleep(2)return "fake-token"# 异步路由操作函数
@app.get("/async/")
async def read_items(token: Optional[str] = Depends(get_token)):return {"token": token}# 直接前端传参
@app.post("/login/")
async def login(username: str = Form(), password: str = Form()):return {"username": username}# redirect
@app.get("/redirect")
def redirect():return RedirectResponse(url="/items/")# 路由操作函数
@app.post("/files/")
async def create_file(file: UploadFile = File(...)):return {"filename": file.filename}# 传参处理
@app.get("/items/")
def read_item(skip: int = 0, limit: int = 10):return {"skip": skip, "limit": limit}

前端代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Create Item</title>
</head>
<body><h1>Create Item</h1><form id="itemForm"><label for="name">Item Name:</label><br><input type="text" id="name" name="name" required maxlength="100"><br><br><label for="description">Item Description:</label><br><textarea id="description" name="description" maxlength="255"></textarea><br><br><label for="price">Item Price:</label><br><input type="number" id="price" name="price" step="0.01" required min="0.01"><br><br><label for="tax">Item Tax (optional):</label><br><input type="number" id="tax" name="tax" step="0.01" min="0"><br><br><input type="submit" value="Submit"></form><script>document.getElementById('itemForm').addEventListener('submit', async function(event) {event.preventDefault();// Gather the form dataconst formData = new FormData(event.target);const data = {name: formData.get('name'),description: formData.get('description'),price: parseFloat(formData.get('price')),tax: formData.has('tax') ? parseFloat(formData.get('tax')) : null};try {const response = await fetch('http://127.0.0.1:8000/items/', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(data)});if (response.ok) {const jsonResponse = await response.json();alert('Item created: ' + JSON.stringify(jsonResponse));} else {alert('Error: ' + response.statusText);}} catch (error) {alert('Network error: ' + error);}});</script>
</body>
</html>

相关文章:

Fast API使用

相关的代码上都有注释&#xff0c;其中前端代码是用来提交表单的 此代码进行了跨域处理&#xff0c;允许前端直接提交表单&#xff0c;并正常返回 完整代码&#xff1a; from typing import Unionfrom fastapi import Header, Cookie from pydantic import BaseModel, Field f…...

LLM - Llama 3 的 Pre/Post Training 阶段 Loss 以及 logits 和 logps 概念

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/145056912 Llama 3 是 Meta 公司发布的开源大型语言模型&#xff0c;包括具有 80 亿和 700 亿参数的预训练和指令微调的语言模型&#xff0c;支持…...

MySQL 中删除重复数据 SQL 写法

要在 MySQL 中删除重复的数据并只保留一条&#xff0c;可以使用下面的方法&#xff08;要用的时候直接复制小改下条件和表名称即即可&#xff09; 方法一&#xff1a;使用 left join 子查询删除重复数据(推荐) 温馨提示&#xff1a;本人在 500w 数据下执行此 SQL 耗费 15s-30s…...

docker minio镜像arm64架构

minio版本为RELEASE.2021-09-03T03-56-13Z 原项目信创改造&#xff0c;服务器资源改为了arm64架构&#xff0c;统信uos docker镜像库内没有对应的minio镜像&#xff0c;当前镜像为拉取源码后&#xff0c;自编译打包镜像&#xff0c;亲测可用。 使用方式 将tar包导入到服务器…...

VUE3 监听器(watch)

在 Vue 3 中&#xff0c;监听器&#xff08;watch&#xff09;是用来观察响应式数据的变化&#xff0c;并在数据发生变化时执行相应操作的机制。watch 主要用于响应式数据变化时的副作用处理&#xff0c;比如异步操作、数据更新等。 1. 基础使用 在 Vue 3 中&#xff0c;watc…...

CAPL如何设置TCP/IP传输层动态端口范围

在TCP/IP协议中,应用程序通过传输层协议TCP/UDP传输数据,接收方传输层收到数据后,根据传输层端口号把接收的数据上交给正确的应用程序。我们可以简单地认为传输层端口号是应用程序的标识,这就是为什么我们说应用程序在使用TCP/IP协议通信时要打开传输层端口号或者绑定端口号…...

随记:有关Springboot项目中的时间格式实现的几种方式

1.注解 JsonFormat DateTimeFormat import com.fasterxml.jackson.annotation.JsonFormat; import org.springframework.format.annotation.DateTimeFormat;import java.time.LocalDateTime;public class Event {// 序列化和反序列化时生效JsonFormat(pattern "yyyy-MM…...

IntelliJ IDEA 优化设置

针对 Java 开发&#xff0c;IntelliJ IDEA 有许多优化设置&#xff0c;可以帮助提高代码编写、调试、构建和运行的效率。以下是一些针对 Java 开发的优化建议&#xff1a; 1. 增加 JVM 内存和性能优化 增加堆内存: 通过调整 idea.vmoptions 文件&#xff0c;增加 IntelliJ ID…...

jsp企业财务管理系统设计与实现

企业财务管理系统 摘要 对于企业集来说,财务管理的地位很重要。随着计算机和网络在企业中的广泛应用&#xff0c;企业发展速度在不断加快&#xff0c;在这种市场竞争冲击下企业财务管理系统必须优先发展&#xff0c;这样才能保证在竞争中处于优势地位。对此企业必须实现财务管理…...

EscherNet运行笔记

文章标题&#xff1a;EscherNet: A Generative Model for Scalable View Synthesis 1. 环境配置 conda env create -f environment.yml -n eschernet conda activate eschernet 2. 数据下载 wget https://tri-ml-public.s3.amazonaws.com/datasets/views_release.tar.gz 3…...

Java中的反射机制及其应用场景

目录 什么是Java反射机制&#xff1f; 工作原理 主要应用场景 注意事项 总结 什么是Java反射机制&#xff1f; Java反射机制是一种强大的工具&#xff0c;它允许程序在运行时访问、检查和修改其本身的类和对象的信息。通过反射&#xff0c;开发者可以在不知道类的具体实现…...

信息科技伦理与道德3:智能决策

1 概述 1.1 发展历史 1950s-1980s&#xff1a;人工智能的诞生与早期发展热潮 1950年&#xff1a;图灵发表了一篇划时代的论文&#xff0c;并提出了著名的“图灵测试”&#xff1b;1956年&#xff1a;达特茅斯会议首次提出“人工智能”概念&#xff1b;1956年-20世纪70年代&a…...

青少年编程与数学 02-006 前端开发框架VUE 16课题、组件基础

青少年编程与数学 02-006 前端开发框架VUE 16课题、组件基础 一、定义一个组件二、使用组件三、传递 props四、监听事件五、通过插槽来分配内容六、动态组件七、DOM 内模板解析注意事项1、大小写区分2、闭合标签3、元素位置限制 课题摘要:本文介绍了Vue.js中的组件基础&#xf…...

25/1/11 算法笔记 Yolov8物体识别

这几天做了给Yolov8检测物体的小任务&#xff0c;今天来做下总结。 首先介绍下整个Yolov8检测的步骤吧&#xff0c;安装库那些就不讲了。 这是我的文件包的对象树。 有images包&#xff0c;里面装了训练和验证的图像。 labels包&#xff0c;装了标注好的labels的txt文件&…...

水水水水水水

为了拿推广卷&#xff0c;但不想把我原本完整的文章拆成零散的多篇&#xff0c;只能出此下策随便发一篇&#xff0c;认真写的都笔记专栏里 网络技术&#xff1a;数字时代的基础设施 在当今社会&#xff0c;网络技术无疑是推动现代生活和经济发展的核心动力之一。从简单的信息传…...

XS5037C一款应用于专业安防摄像机的图像信号处理芯片,支持MIPI和 DVP 接口,内置高性能ISP处理器,支持3D降噪和数字宽动态

XS5037C是一款应用于专业安防摄像机的图像信号处理芯片&#xff0c;支持MIPI和 DVP 接口&#xff0c;最 大支持 5M sensor接入。内置高性能ISP处理器&#xff0c;支持3D降噪和数字宽动态。标清模拟输出支 持960H&#xff0c;高清模拟输出支持HDCCTV 720P/1080P/4M/5M。高度集成…...

机器学习无处不在,AI顺势而为,创新未来

机器学习无处不在&#xff1a; 1、推荐广告和搜索&#xff1a;推广搜不分家&#xff0c;属于数据科学中&#xff0c;对人的行为进行理解 2、计算机视觉CV&#xff1a;对人看到的东西进行理解 3、自然语言处理&#xff1a;对人交流的东西进行理解 4、数据挖掘和数据分析&…...

pandas处理json的相关操作

Pandas 是一个强大的数据处理库&#xff0c;它提供了丰富的功能来处理 JSON 数据。以下是 Pandas 中处理 JSON 的所有常见操作&#xff1a; 1. 读取 JSON 文件 使用 pandas.read_json() 函数可以从 JSON 文件或 JSON 字符串中读取数据。 从 JSON 文件读取 import pandas as …...

linux内存泄露定位过程(kmemleak和slab debug)

1&#xff0c;当遇到内存增加过多时&#xff0c;或者由于内存导致系统oom时我们怎么定位呢&#xff0c;定位时需要确认是内核态还是用户态内存泄露。 排查步骤 top查看VIRT和RES内存 rootubuntu2004:~# top top - 21:05:39 up 7 min, 1 user, load average: 5.01, 4.09, 2.…...

2025年安卓面试复习总结

文章目录 深入理解并熟练运用常用设计模式及反射原理&#xff0c;能够自定义注解及泛型&#xff0c;多次通过设计模式对 app 代码进行高效重构&#xff0c;显著提升代码的可维护性与扩展性。设计模式自定义注解泛型Kotlin泛型 精通多线程原理&#xff0c;对 ThreadPoolExecutor…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...