网站开发培训机构排名,手机网页版浏览器,商城网站做推广方案,灰色网站网站前言
近期接触了一些开源大模型应用服务#xff0c;发现很多用的都是FastAPI web框架#xff0c;于是乎研究了一下它的优势#xff0c;印象最深有两个#xff1a;一个是它的异步处理性能比较好#xff0c;二是它可以类似java swagger的API交互文档#xff0c;这个对应前…前言
近期接触了一些开源大模型应用服务发现很多用的都是FastAPI web框架于是乎研究了一下它的优势印象最深有两个一个是它的异步处理性能比较好二是它可以类似java swagger的API交互文档这个对应前后端分离多人开发非常友好。之前总结过Vue和Flask实现前后端分离这次同样借个小项目实践、并总结下Vue和FastAPI实现前后端分离。 FastAPI FastAPI 是一个现代化的 Web 框架基于 Python 3.7 的类型提示和异步编程技术。FastAPI 遵循 OpenAPI以前称为 Swagger标准可以自动生成交互式 API 文档。FastAPI 提供了自动数据验证、自动文档生成等强大的功能可以显著减少开发工作量。FastAPI 基于 Starlette 框架构建支持异步请求处理能够处理高并发和高负载的场景。 准备
项目需求及分析
有个抓拍人脸并保存人脸截图的算法在版本发布前想要对其效果收集主观评价。于是开发一个简单的内部在线评分工具会方便大家操作以及最后结果的汇总。照样采用vue框架后端就尝试下FastAPI。
在开始开发前我们先去github上看看有没有类似的开源项目如果有现成的项目框架可以用我们只需在上面添加或改动实现我们的业务功能即可一定程度上可以大大缩短开发周期。
由于评分工具需要用户信息所以需要用户登录及用户管理功能。 于是找到一个基本符合我们要求的开源项目 GitHub - JohnDoe1996/fastAPI-vue: FastAPI-vue 开源项目源码目录如上图前端代码在frontend/dashboard目录下vue框架后端代码在backend/app下采用FastAPI。
前端
关于前端开发环境准备可参考Vue和Flask实现前后端分离在此不做赘述。
将开源项目的前端代码在pycharm中打开安装依赖库npm install启动服务在浏览器可以正常打开页面。如果验证码不显示没关系因为我们还没有启动后端服务 至此开发环境准备妥当下面可进行前端代码的开发。
前端主要涉及两个页面任务列表页面及图片展示和投票提交页面采用ElementUI组件库。
要实现前后端通信我们需要在前端项目中相应位置配置后端服务地址 后端
打开pycharm打开backend/app项目配置venv。工程目录如下 业务功能涉及的后端接口较简单其实主要是对mysql数据库的CURD。但对于FastAPI不同于Flask的是它可以定义数据模型schemas用于定义API的输入输出数据的结构可以提高API的稳定性、可维护性和安全性同时提升开发效率。
首先我们通过Pydantic库来定义数据模型这个数据模型可以用作请求体、响应体的参数中。
from pydantic import BaseModelclass TaskDataSchema(BaseModel):name: strtype: int 0resource_path: strremark: str status: int 0order_num: int 0class ResourceGroupSchema(BaseModel):name: strtype: int 0path: strremark: str status: int 0order_num: int 0task_data_id: int接着在路由操作函数中请求参数可以使用上面定义的数据模型如ResourceDataSchema作为请求体结构。当客户端发送 POST、PUT 等请求时FastAPI 会自动解析请求体并将数据转换为定义的 Pydantic 模型。
from .schemas import ResourceDataSchema
from .curd.curd_resource_group import curd_resource_group
from common import deps
from ..permission.models import Usersrouter APIRouter()router.post(/resource/data, summary添加资源, tags[task])
async def addResourceData(*,db: Session Depends(deps.get_db),u: Users Depends(deps.user_perm([task:image-list:get])),obj: ResourceDataSchema):curd_resource_data.create(db, obj_inobj, creator_idu[id])return respSuccessJson()
最终效果 生产环境部署 采用docker-compose部署目录结构如下 docker-compose.yml如下
version: 3
services:nginx:image: privatehub.xxxx.com/nginx:v2.2volumes:- /fastAPI-vue/frontend/nginx.conf:/etc/nginx/nginx.conf- /fastAPI-vue/frontend/conf.d:/etc/nginx/conf.d- /fastAPI-vue/frontend/html:/var/www/html- /etc/localtime:/etc/localtimeports:- 8999:8080restart: alwaysbackend:build: /fastAPI-vue/backendvolumes:- $PWD/backend:/backendports:- 8099:8899restart: always
nginx是前端服务backend是后端服务主要指定镜像、端口映射进行目录挂载。
FastAPI-vue/backend中的Dockerfile如下
# 基础镜像
FROM privatehub.xxx.com/python:v1.0
# 作者
MAINTAINER xxxx
# 设置工作目录
COPY app/requirements.txt /tmp
WORKDIR /backend/app
# 安装依赖库
RUN pip install --no-cache-dir -r /tmp/requirements.txt
# 启动命令
CMD [uvicorn, main:app, --host, 0.0.0.0, --port, 8899]
执行命令启动服务
docker-compose up -d --build
