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>
相关文章:
![](https://www.ngui.cc/images/no-images.jpg)
Fast API使用
相关的代码上都有注释,其中前端代码是用来提交表单的 此代码进行了跨域处理,允许前端直接提交表单,并正常返回 完整代码: from typing import Unionfrom fastapi import Header, Cookie from pydantic import BaseModel, Field f…...
![](https://i-blog.csdnimg.cn/direct/a3421f9aaf4f4effab372dfbbffcaf50.png)
LLM - Llama 3 的 Pre/Post Training 阶段 Loss 以及 logits 和 logps 概念
欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/145056912 Llama 3 是 Meta 公司发布的开源大型语言模型,包括具有 80 亿和 700 亿参数的预训练和指令微调的语言模型,支持…...
![](https://www.ngui.cc/images/no-images.jpg)
MySQL 中删除重复数据 SQL 写法
要在 MySQL 中删除重复的数据并只保留一条,可以使用下面的方法(要用的时候直接复制小改下条件和表名称即即可) 方法一:使用 left join 子查询删除重复数据(推荐) 温馨提示:本人在 500w 数据下执行此 SQL 耗费 15s-30s…...
![](https://www.ngui.cc/images/no-images.jpg)
docker minio镜像arm64架构
minio版本为RELEASE.2021-09-03T03-56-13Z 原项目信创改造,服务器资源改为了arm64架构,统信uos docker镜像库内没有对应的minio镜像,当前镜像为拉取源码后,自编译打包镜像,亲测可用。 使用方式 将tar包导入到服务器…...
![](https://www.ngui.cc/images/no-images.jpg)
VUE3 监听器(watch)
在 Vue 3 中,监听器(watch)是用来观察响应式数据的变化,并在数据发生变化时执行相应操作的机制。watch 主要用于响应式数据变化时的副作用处理,比如异步操作、数据更新等。 1. 基础使用 在 Vue 3 中,watc…...
![](https://www.ngui.cc/images/no-images.jpg)
CAPL如何设置TCP/IP传输层动态端口范围
在TCP/IP协议中,应用程序通过传输层协议TCP/UDP传输数据,接收方传输层收到数据后,根据传输层端口号把接收的数据上交给正确的应用程序。我们可以简单地认为传输层端口号是应用程序的标识,这就是为什么我们说应用程序在使用TCP/IP协议通信时要打开传输层端口号或者绑定端口号…...
![](https://www.ngui.cc/images/no-images.jpg)
随记:有关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…...
![](https://www.ngui.cc/images/no-images.jpg)
IntelliJ IDEA 优化设置
针对 Java 开发,IntelliJ IDEA 有许多优化设置,可以帮助提高代码编写、调试、构建和运行的效率。以下是一些针对 Java 开发的优化建议: 1. 增加 JVM 内存和性能优化 增加堆内存: 通过调整 idea.vmoptions 文件,增加 IntelliJ ID…...
![](https://i-blog.csdnimg.cn/direct/8335a8b4f812437bb92e819653b0e56a.png)
jsp企业财务管理系统设计与实现
企业财务管理系统 摘要 对于企业集来说,财务管理的地位很重要。随着计算机和网络在企业中的广泛应用,企业发展速度在不断加快,在这种市场竞争冲击下企业财务管理系统必须优先发展,这样才能保证在竞争中处于优势地位。对此企业必须实现财务管理…...
![](https://www.ngui.cc/images/no-images.jpg)
EscherNet运行笔记
文章标题: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…...
![](https://www.ngui.cc/images/no-images.jpg)
Java中的反射机制及其应用场景
目录 什么是Java反射机制? 工作原理 主要应用场景 注意事项 总结 什么是Java反射机制? Java反射机制是一种强大的工具,它允许程序在运行时访问、检查和修改其本身的类和对象的信息。通过反射,开发者可以在不知道类的具体实现…...
![](https://i-blog.csdnimg.cn/direct/3d0da6f16bc14fcf8b6743818690d394.png)
信息科技伦理与道德3:智能决策
1 概述 1.1 发展历史 1950s-1980s:人工智能的诞生与早期发展热潮 1950年:图灵发表了一篇划时代的论文,并提出了著名的“图灵测试”;1956年:达特茅斯会议首次提出“人工智能”概念;1956年-20世纪70年代&a…...
![](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=assets%2Fcomponents.B1JZbf0_.png&pos_id=img-OD9aqqVT-1736380938373)
青少年编程与数学 02-006 前端开发框架VUE 16课题、组件基础
青少年编程与数学 02-006 前端开发框架VUE 16课题、组件基础 一、定义一个组件二、使用组件三、传递 props四、监听事件五、通过插槽来分配内容六、动态组件七、DOM 内模板解析注意事项1、大小写区分2、闭合标签3、元素位置限制 课题摘要:本文介绍了Vue.js中的组件基础…...
![](https://i-blog.csdnimg.cn/direct/b51a745fe8e248ccae1ae1909d4f2260.png)
25/1/11 算法笔记 Yolov8物体识别
这几天做了给Yolov8检测物体的小任务,今天来做下总结。 首先介绍下整个Yolov8检测的步骤吧,安装库那些就不讲了。 这是我的文件包的对象树。 有images包,里面装了训练和验证的图像。 labels包,装了标注好的labels的txt文件&…...
![](https://www.ngui.cc/images/no-images.jpg)
水水水水水水
为了拿推广卷,但不想把我原本完整的文章拆成零散的多篇,只能出此下策随便发一篇,认真写的都笔记专栏里 网络技术:数字时代的基础设施 在当今社会,网络技术无疑是推动现代生活和经济发展的核心动力之一。从简单的信息传…...
![](https://i-blog.csdnimg.cn/direct/d617d6f9daa44591bca3d501d1e2cb28.png)
XS5037C一款应用于专业安防摄像机的图像信号处理芯片,支持MIPI和 DVP 接口,内置高性能ISP处理器,支持3D降噪和数字宽动态
XS5037C是一款应用于专业安防摄像机的图像信号处理芯片,支持MIPI和 DVP 接口,最 大支持 5M sensor接入。内置高性能ISP处理器,支持3D降噪和数字宽动态。标清模拟输出支 持960H,高清模拟输出支持HDCCTV 720P/1080P/4M/5M。高度集成…...
![](https://www.ngui.cc/images/no-images.jpg)
机器学习无处不在,AI顺势而为,创新未来
机器学习无处不在: 1、推荐广告和搜索:推广搜不分家,属于数据科学中,对人的行为进行理解 2、计算机视觉CV:对人看到的东西进行理解 3、自然语言处理:对人交流的东西进行理解 4、数据挖掘和数据分析&…...
![](https://www.ngui.cc/images/no-images.jpg)
pandas处理json的相关操作
Pandas 是一个强大的数据处理库,它提供了丰富的功能来处理 JSON 数据。以下是 Pandas 中处理 JSON 的所有常见操作: 1. 读取 JSON 文件 使用 pandas.read_json() 函数可以从 JSON 文件或 JSON 字符串中读取数据。 从 JSON 文件读取 import pandas as …...
![](https://www.ngui.cc/images/no-images.jpg)
linux内存泄露定位过程(kmemleak和slab debug)
1,当遇到内存增加过多时,或者由于内存导致系统oom时我们怎么定位呢,定位时需要确认是内核态还是用户态内存泄露。 排查步骤 top查看VIRT和RES内存 rootubuntu2004:~# top top - 21:05:39 up 7 min, 1 user, load average: 5.01, 4.09, 2.…...
![](https://www.ngui.cc/images/no-images.jpg)
2025年安卓面试复习总结
文章目录 深入理解并熟练运用常用设计模式及反射原理,能够自定义注解及泛型,多次通过设计模式对 app 代码进行高效重构,显著提升代码的可维护性与扩展性。设计模式自定义注解泛型Kotlin泛型 精通多线程原理,对 ThreadPoolExecutor…...
![](https://www.ngui.cc/images/no-images.jpg)
JS scrollIntoView 技巧揭秘:解锁网页流畅交互
文章目录 一.基本概念二.语法和参数基本语法:element.scrollIntoView();参数详解: 三.应用场景和示例场景一:点击目录点位到相应的位置React 示例代码:Vue3 示例代码: 场景二:轮播图定位到指定图片示例代码…...
![](https://www.ngui.cc/images/no-images.jpg)
【Ubuntu 24.04】常见问题解决
1.24开启3D加速黑屏 参考文章:Ubuntu24开机黑屏,VMware卡死,虚拟机繁忙解决方案 没有3D加速就没有动画,所以我们需要开启3D加速,但是直接开启3D加速会黑屏 由于Ubuntu24内部的图形加速驱动异常,因此需要更新…...
![](https://www.ngui.cc/images/no-images.jpg)
前端依赖安装指南
前端依赖安装指南 一、NVM管理工具安装 1.在 Windows 上安装 下载 NVM for Windows 的安装程序:(最新版本可以在 nvm-windows Releases 页面 找到)运行下载的安装程序并按步骤操作。 2.配置 NVM exe安装自动配置环境变量 3. 验证 NVM 安装 验证 NVM 是否成功…...
![](https://i-blog.csdnimg.cn/direct/54a4bf1b13be4464a2a84285c38a35ff.png)
灌区闸门自动化控制系统-精准渠道量测水-灌区现代化建设
项目背景 本项目聚焦于黑龙江某一灌区的现代化改造工程,该灌区覆盖广阔,灌溉面积高达7.5万亩,地域上跨越6个乡镇及涵盖17个村庄。项目核心在于通过全面的信息化建设,强力推动节水灌溉措施的实施,旨在显著提升农业用水的…...
![](https://csdnimg.cn/release/blog_editor_html/release2.3.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=O83A)
ELK实战(最详细)
一、什么是ELK ELK是三个产品的简称:ElasticSearch(简称ES) 、Logstash 、Kibana 。其中: ElasticSearch:是一个开源分布式搜索引擎Logstash :是一个数据收集引擎,支持日志搜集、分析、过滤,支持大量数据…...
![](https://www.ngui.cc/images/no-images.jpg)
《大型语言模型与强化学习的融合:探索问题的新解决方案与开源验证需求》
强化学习在2020年代初期通过开源项目如CleanRL的多学习者PPO算法取得了显著进展,但在语言模型领域未能充分利用其潜力 1. 开源项目CleanRL的贡献 CleanRL 是一个致力于提供简单、高效且易于理解的强化学习(RL)算法实现的开源项目。该项目通…...
![](https://i-blog.csdnimg.cn/direct/8696b98e2db342ccb950e25be9423cb4.png)
springboot 默认的 mysql 驱动版本
本案例以 springboot 3.1.12 版本为例 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.1.12</version><relativePath/> </parent> 点击 spring-…...
![](https://www.ngui.cc/images/no-images.jpg)
10分钟快速了解OceanGPT(沧渊)
10分钟快速了解OceanGPT(沧渊) 海洋科学任务的大语言模型——OceanGPT OceanGPT是如何训练的?为了训练 OceanGPT (沧渊) ,收集了一个跨越多个领域的海洋科学语料库。由于每个子领域和主题都有其独特的数据特征和模式,因此提出了一个特定于领域的指令生成框架,称为 DoDirec…...
![](https://i-blog.csdnimg.cn/direct/aa0d9afbb2ac4d758bb31ea6e598cf82.png)
蓝桥杯嵌入式速通(1)
1.工程准备 创建一文件夹存放自己的代码,并在mdk中include上文件夹地址 把所有自身代码的头文件都放在headfile头文件中,之后只需要在新的文件中引用headfile即可 headfile中先提前可加入 #include "stdio.h" #include "string.h"…...
![](https://www.ngui.cc/images/no-images.jpg)
Redis优化建议详解
Redis优化建议详解 1. 内存优化 1.1 内存配置 设置最大内存 maxmemory 4gb 内存淘汰策略 maxmemory-policy allkeys-lru 样本数量 maxmemory-samples 51.2 内存优化策略 数据结构优化 使用压缩列表(ziplist)合理设置hash-max-ziplist-entries使用整数…...
![](/images/no-images.jpg)
切图做网站/二次感染即将大爆发
传送门 题意:有个房间,房间的值用四面的门加起来的值表示,非常巧妙,西门用1表示,北门用2表示,东门用4表示,南门用8表示,最后判断是否连通的方法使用&,非常巧妙。 题…...
![](https://img-my.csdn.net/uploads/201207/29/1343497764_6660.png)
广西南宁网站建设/指数工具
首先是用java来实现简单的Server端(http的请求内容格式可以参考msdn:http://msdn.microsoft.com/zh-cn/library/hh202945(vvs.92)): /*** 推送toast通知* param uriString 推送服务通知uri* param title toast标题* param content toast内容* param param 页面跳转参…...
点击立即进入正能量网站/百度seo什么意思
1、下载git的PC客户端软件,并安装 下载地址:http://git-scm.com/download/ ,安装路径可以任意,我选择在D盘目录 2、绑定用户并设置ssh-key 绑定用户的命令: git config --global user.name "设置用户名"g…...
![](https://img-blog.csdnimg.cn/20200312162428277.png#pic_center)
河北pc端网站建设/seo优化一般多少钱
不同font-size的字体会出现上下偏差, display: flex;align-items: baseline;解决方案 align-items属性定义项目在交叉轴上如何对齐。 .box {align-items: flex-start | flex-end | center | baseline | stretch; }flex-start:交叉轴的起点对齐。 flex-…...
![](https://img-blog.csdnimg.cn/img_convert/a5ddca5f9dbdd34adaacc8cb450d0e82.png)
巴马网站建设/seo网络推广
PHP新闻采集在线源码,是一款非常优秀的编辑采集站,软件能够帮助用户网上新闻采集,直接获取源码,操作非常简单,软件是以PHP语言为基础,需要这款软件的朋友快来下载。软件介绍全网采集采集任意互联网公开数据…...
抄袭网站违法/大庆网络推广
ROS Indigo beginner_Tutorials-04 创建ROS程序包(就是软件包) 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubuntu 14.04.4 LTS ROS 版本:ROS Indigo 下面我们就来在刚刚创建的 catkin_ws ROS 工作空…...