前期準備
首先新建一個文件夾，文件夾里面新建一個文件夾，用于安裝依賴
安裝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這個路徑下
官方文檔教程
FastAPI
新建一個
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響應
結果
訪問這個路徑
FastAPI - Swagger UI
會發現自動生成的api交互式文檔
另外一個交互式文檔
http://127.0.0.1:8000/redoc
修改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的內容
訪問這個路徑
127.0.0.1:8000/openapi.json
{"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"}}}}
完美，撒花
如何設置自動備份任務？)
 首頁的實現:自定義導航欄,輪撥圖,前臺分類,熱門推薦,猜你喜歡,下拉刷新,骨架屏)