前期准备
首先新建一个文件夹，文件夹里面新建一个文件夹，用于安装依赖
安装vite框架
npm init -y
目的是安装package.json配置文件
npm install vite --save-dev
安装vite框架
安装完是这个样子
新建了一个文件夹和js文件
后端内容
main.js
document.getElementById('app').innerHTML = '<h1>Welcome to Vite!</h1>';
前端内容
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app">Hello Vite!</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
package.json添加了vite运行的内容
package.json
{
"name": "font",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"vite": "^6.3.5"
}
}
接下来，就开始实现运行
npm install
npm run dev
地址访问
接下来进行地址访问，发现成功
接下来开始安装后端fastapi框架
准备工作
新建一个文件夹main.py
from fastapi import FastAPI
app = FastAPI()
@app.get("/")
async def read_root():
return {"message": "Hello FastAPI"}
@app.get("/items/{item_id}")
async def read_item(item_id: int, q: str = None):
return {"item_id": item_id, "q": q}
安装可选依赖
pip install fastapi[all]
安装生产服务器
生产环境部署 pip install gunicorn uvicorn[standard] #备注如果是windows 版本，没必要安装，linux版本必须安装 # 使用 Gunicorn 运行 gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app
生成依赖文件
pip freeze > requirements.txt
运行服务器命令
uvicorn main:app --reload
启动报错
缺少模块
pip install +模块名
注意：出现MouleNotEoundError都是缺少模块
接下来开始启动服务
uvicorn main:app --reload
注意：进入这个目录下
访问http://127.0.0.1:8000这个路径下
官方文档教程
新建一个
main.py
from typing import Union
from fastapi import FastAPI
app = FastAPI()
@app.get("/")
def read_root():
return {"Hello": "World"}
@app.get("/items/{item_id}")
def read_item(item_id: int, q: Union[str, None] = None):
return {"item_id": item_id, "q": q}
进行浏览
访问地址：
127.0.0.1:8000/items/5?q=somequery
说明你已经创建了一个api,能够以/ /items进行http响应
结果
访问这个路径
会发现自动生成的api交互式文档
另外一个交互式文档
修改main.py,
添加put请求
from typing import Union
from fastapi import FastAPI
from pydantic import BaseModelapp = FastAPI()
class Item(BaseModel):
name: str
price: float
is_offer: Union[bool, None] = None
@app.get("/")
def read_root():
return {"Hello": "World"}
@app.get("/items/{item_id}")
def read_item(item_id: int, q: Union[str, None] = None):
return {"item_id": item_id, "q": q}
@app.put("/items/{item_id}")
def update_item(item_id: int, item: Item):
return {"item_name": item.name, "item_id": item_id}#注释：
app=FastAPI()
app变量是FastAPI是一个实例
@app.get("/")告诉 FastAPI 在它下方的函数负责处理如下访问请求：
- 请求路径为
/- 使用
get操作- def路径操作函数，如果不清楚查看下方链接并发 async / await - FastAPI
发现api文档，自动添加了put请求，自动进行了更新
点击try it out
可以添加参数进行新的调用
点击excute,可以将api和用户界面进行通信
就会出现
交互反应
这个是反映结果
我们来进行一下地址访问
127.0.0.1:8000/items/11111
11111就是我们刚才修改的item_id
地址的反应结果
可选文档同样会体现新的参数和请求体
安装fastapi
pip install "fastapi[standard]"
安装运行进程
运行fastapi
fastapi dev main.py
然后进行访问
127.0.0.1:8080
127.0.0.1:8080/docs
如果你想看openai的内容
访问这个路径
{"openapi":"3.1.0","info":{"title":"FastAPI","version":"0.1.0"},"paths":{"/":{"get":{"summary":"Read Root","operationId":"read_root__get","responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{}}}}}}},"/items/{item_id}":{"get":{"summary":"Read Item","operationId":"read_item_items__item_id__get","parameters":[{"name":"item_id","in":"path","required":true,"schema":{"type":"integer","title":"Item Id"}},{"name":"q","in":"query","required":false,"schema":{"anyOf":[{"type":"string"},{"type":"null"}],"title":"Q"}}],"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}},"put":{"summary":"Update Item","operationId":"update_item_items__item_id__put","parameters":[{"name":"item_id","in":"path","required":true,"schema":{"type":"integer","title":"Item Id"}}],"requestBody":{"required":true,"content":{"application/json":{"schema":{"$ref":"#/components/schemas/Item"}}}},"responses":{"200":{"description":"Successful Response","content":{"application/json":{"schema":{}}}},"422":{"description":"Validation Error","content":{"application/json":{"schema":{"$ref":"#/components/schemas/HTTPValidationError"}}}}}}}},"components":{"schemas":{"HTTPValidationError":{"properties":{"detail":{"items":{"$ref":"#/components/schemas/ValidationError"},"type":"array","title":"Detail"}},"type":"object","title":"HTTPValidationError"},"Item":{"properties":{"name":{"type":"string","title":"Name"},"price":{"type":"number","title":"Price"},"is_offer":{"anyOf":[{"type":"boolean"},{"type":"null"}],"title":"Is Offer"}},"type":"object","required":["name","price"],"title":"Item"},"ValidationError":{"properties":{"loc":{"items":{"anyOf":[{"type":"string"},{"type":"integer"}]},"type":"array","title":"Location"},"msg":{"type":"string","title":"Message"},"type":{"type":"string","title":"Error Type"}},"type":"object","required":["loc","msg","type"],"title":"ValidationError"}}}}
完美，撒花