Vue和FastAPI实现前后端分离

前言

近期接触了一些开源大模型应用服务,发现很多用的都是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_in=obj, creator_id=u['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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/789526.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【快捷部署】013_Podman(3.4.4)

📣【快捷部署系列】013期信息 编号选型版本操作系统部署形式部署模式复检时间013podman3.4.4Ubuntu 22.04apt-2024-04-03 一、快捷部署 注意! 必须满足:Ubuntu 20.10 and newer #由于本期安装脚本较为简单,所以不制作一键安装脚本&#xf…

【Django学习笔记(三)】BootStrap介绍

BootStrap介绍 前言正文1、BootStrap 快速了解2、初识BootStrap2.1 下载地址2.2 创建目录2.3 引入BootStrap2.4 使用BootStrap 3、BootStrap 组件&样式3.1 导航条3.2 栅格系统3.3 container3.3.1 container3.3.2 container-fluid 3.4 面板3.5 媒体对象3.6 分页3.7 图标3.7.…

SAP-CO主数据之作业类型创建-<KL01>

公告:周一至周五每日一更,周六日存稿,请您点“关注”和“在看”,后续推送的时候不至于看不到每日更新内容,感谢。 目录 一、背景: 成本中心主数据创建: 成本要素主数据创建: 二…

氟化氢冷凝装置PFA反应烧瓶可应用半导体行业

PFA多颈烧瓶是一种高品质的实验室器皿,它具有多个颈口,可以在同一容器内进行多种化学反应。PFA多颈烧瓶能够耐受高温和强酸、强碱等腐蚀性介质,是化学实验中不可或缺的物品。多颈烧瓶可以配合搅拌桨、温度计、恒压分液漏斗、冷凝管等使用&…

golang语言系列:学习路线图

云原生学习路线导航页(持续更新中) 本文是 golang语言系列 文章,主要展示golang语言学习的全路线图 参考:https://github.com/darius-khll/golang-developer-roadmap/blob/master/i18n/zh-CN/ReadMe-zh-CN.md

宁波中墙建材水泥用半挂车运输,如何卸货,有什么注意点

宁波中墙建材水泥用半挂车运输,如何卸货,有什么注意点 水泥用半挂车运输卸货时,一般可以采用以下步骤: 准备工作:确保卸货区域安全,清理障碍物,检查卸货设备是否正常。停车就位:将半…

本地Windows打包启动前端后台

本地Windows打包启动前端后台 1、安装jdk Windows JDK安装 2、Nginx 2.1、将 nginx-1.16.1文件夹复制到D:\home\jisapp目录下 2.2、域名证书配置: 将域名证书放到D:\home\jisapp\ssl\2023目录下->配置nginx.conf文件(D:\home\jisapp\nginx-1.22.0…

通过nvtx和Nsight Compute分析pytorch算子的耗时

通过nvtx和Nsight Compute分析pytorch算子的耗时 一.效果二.代码 本文演示了如何借助nvtx和Nsight Compute分析pytorch算子的耗时 一.效果 第一次执行,耗时很长 小规模的matmul,调度耗时远大于算子本身 大规模的matmul,对资源的利用率高小规模matmul,各层调用的耗时 二.代码…

【Linux】Vim编辑器

专栏文章索引:Linux 目录 在Vim编辑器中,一个Tab键相当于几个空格? 在Vim编辑器中,一个Tab键相当于几个空格? 在Vim编辑器中,默认情况下,一个Tab键相当于8个空格。 这是Vim的默认设置&#x…

Linux 设备驱动管理之内核对象(Kernel Object)机制

Linux 设备驱动管理之内核对象(Kernel Object)机制 Linux内核是一个复杂的系统,它通过一系列的机制和结构体来管理和表示系统中的资源。其中一个关键的概念是“内核对象”(Kernel Object,简称kobject)。本文将深入探讨kobject机制…

Springboot导出mysql数据到Excel表

Controller层代码 /*** 导出数据管理审核表*/ApiOperation(value "导出数据管理审核表")Log(title "导出数据管理审核表", businessType BusinessType.EXPORT)PostMapping("/exportCsv")public void exportCsv(HttpServletResponse response,…

【C++】二分查找算法(模板)

重点 只需要记住两点: 1.left right 时,一定就是最终结果(包括找不到目标值),无需再次判断,如果判断就会死循环 2.求中点如果是求左端点 mid left (right - left)/2 如果是求右端点 mid left (right -…

物联网实战--入门篇之(四)嵌入式-UART驱动

目录 一、串口简介 二、串口驱动设计 三、串口发送 四、串口接收处理 五、PM2.5数据接收处理 六、printf重定义 七、总结 一、串口简介 串口在单片机的开发中属于非常常用的外设,最基本的都会预留一个调试串口用来输出调试信息,串口时序这里就不谈…

洛谷-P1706 全排列问题(DFS)

目录 题目链接: 思路: 代码: 题目链接: P1706 全排列问题 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路: 如果n比较小,可以写n个for循环输出全排列。但是这种简单方法只能用于较小的n&#xff0…

如何涉及一个高质量API接口(2)

设计一个高质量的API接口需要考虑多方面的因素,包括接口的易用性、稳定性、安全性以及性能等。下面是一些设计高质量API接口的基本思路,并附带部分简单的源码示例。 一、设计思路 明确接口目的与功能 清晰定义API的目的和功能,确保每个接口都…

代码随想录算法训练营第三十六天|435. 无重叠区间,763. 划分字母区间

435. 无重叠区间 题目 给定一个区间的集合 intervals ,其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量,使剩余区间互不重叠 。 示例 1: 输入: intervals [[1,2],[2,3],[3,4],[1,3]] 输出: 1 解释: 移除 [1,3] 后,剩下…

基于opencv的SVM算法的车牌识别系统设计与实现

基于opencv的SVM算法的车牌识别系统设计与实现 车牌识别技术是智能交通系统中的一项关键技术,它能够自动识别车辆的车牌号码。本文将详细介绍如何使用Python编程语言结合OpenCV库和SVM算法来实现车牌识别系统。 系统架构 车牌识别系统主要包括以下几个模块&…

PHP教程_PHP5函数str_replace替换字符串中的字符

PHP教程_PHP5函数str_replace替换字符串中的字符 PHP (PHP: Hypertext Preprocessor) 即 “超文本预处理器”, 是在服务器端执行的脚本语言, 尤其适用于Web开发并可嵌入HTML中。 PHP 语法学习了 C语言, 吸纳 Java 和 Perl 多个语言的特色发展出自己的特色语法, 并根据它们的长…

提高生产力!这10个Lambda表达式必须掌握,开发效率嘎嘎上升!

在Java8及更高版本中,Lambda表达式的引入极大地提升了编程的简洁性和效率。本文将围绕十个关键场景,展示Lambda如何助力提升开发效率,让代码更加精炼且易于理解。 集合遍历 传统的for-each循环对集合进行遍历虽然直观,但在处理大…

Python(乱学)

字典在转化为其他类型时,会出现是否舍弃value的操作,只有在转化为字符串的时候才不会舍弃value 注释的快捷键是ctrl/ 字符串无法与整数,浮点数,等用加号完成拼接 5不入??? 还有一种格式化的方法…