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

安装前端vite框架，后端安装fastapi框架

news 来源：原创 2025/6/16 8:36:46

前期准备

首先新建一个文件夹，文件夹里面新建一个文件夹，用于安装依赖

安装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 BaseModel

app = 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"}}}}

完美，撒花