FastAPI+Vue3零基础开发ERP系统项目实战课 20240831上课笔记 查询参数和分页实现

本文主要是介绍FastAPI+Vue3零基础开发ERP系统项目实战课 20240831上课笔记 查询参数和分页实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

回顾

  • 获取路径参数
  • 什么是路径参数?/user/{id}
  • 什么时候使用?需要传递参数
  • 怎么实现类型转换?声明参数的类型
  • 怎么捕获文件路径?{file_path:path}

什么是查询参数

查询字符串是键值对的集合,这些键值对位于 URL 的 ? 之后,以 & 分隔。

http://127.0.0.1:8000/items/?skip=0&limit=10

上面的 skip=0&limit=10 就是查询参数,表示:

  • skip:0
  • limit:10

怎么定义查询参数

示例代码:

from fastapi import FastAPIapp = FastAPI()fake_items_db = [{"item_name": "Foo"}, {"item_name": "Bar"}, {"item_name": "Baz"}]@app.get("/items/")
async def read_item(skip: int = 0, limit: int = 10):return fake_items_db[skip : skip + limit]

这段代码中,没有路径参数,但是又有其他的方法参数:

@app.get("/items/")
async def read_item(skip: int = 0, limit: int = 10):

在方法参数中,除了路径参数之外,就是查询参数。

所以定义查询参数,实际上就是定义方法的参数。

案例:分页查询

在这里插入图片描述

当数据量非常大的时候,我们使用一个网页可能放不下那么多数据,所以就需要把数据分成一组一组的进行返回并渲染。这里的一组数据就是一页数据,每页数据到底有多少条这个叫每页的数量。分页一般用page表示,每页数量一般用size表示。

比如我们说访问第三页数据,实际上就是page=3的时候,返回的数据。

这里的page和size一般来讲就是查询参数,查询参数一般是放在GET方法中,用来作为查询数据的过滤条件的参数。

简单案例:

from fastapi import FastAPIapp = FastAPI()# 查询用户
@app.get("/user")
async def get_user(page: int = 1, size: int = 20):"""查询用户信息:param page: 第几页:param size: 每页数量:return: 分页用户信息"""return {"page": page,"size": size,"count": 1000,  # 数据库里面符合查询条件的数据个数"data": [  # 当前页的具体信息{"id": 1, "name": "张三", "age": 23},{"id": 2, "name": "李四", "age": 33},{"id": 3, "name": "王五", "age": 25},]}if __name__ == '__main__':import uvicornuvicorn.run(app, host='0.0.0.0', port=8888)

使用postman进行测试:
在这里插入图片描述

练习:返回所有用户

生成1000条用户信息,当我访问 http://127.0.0.1:8888/user?page=1&size=1000 把所有1000条用户信息,全部给我返回。每一条用户信息要包含ID,姓名,年龄三个字段。要求姓名不能重复,年龄不能全部相同,ID要唯一。

from fastapi import FastAPIapp = FastAPI()# 查询用户
@app.get("/user")
async def get_user(page: int = 1, size: int = 20):"""查询用户信息:param page: 第几页:param size: 每页数量:return: 分页用户信息"""data = []for i in range(1, 1001):data.append({"id": i, "name": f"张三{i}", "age": 20 + i % 10})return {"page": page,"size": size,"count": 1000,  # 数据库里面符合查询条件的数据个数"data": data}if __name__ == '__main__':import uvicornuvicorn.run(app, host='0.0.0.0', port=8888)

代码优化

from fastapi import FastAPIdata = []
for i in range(1, 1001):data.append({"id": i, "name": f"张三{i}", "age": 20 + i % 10})
app = FastAPI()# 查询用户
@app.get("/user")
async def get_user(page: int = 1, size: int = 20):"""查询用户信息:param page: 第几页:param size: 每页数量:return: 分页用户信息"""return {"page": page,"size": size,"count": len(data),  # 数据库里面符合查询条件的数据个数"data": data}if __name__ == '__main__':import uvicornuvicorn.run(app, host='0.0.0.0', port=8888)

练习:只需要返回前20条数据

现在是整个1000条数据都返回了,我现在只想要前20条,也就是第一页的数据。

@app.get("/user")
async def get_user(page: int = 1, size: int = 20):"""查询用户信息:param page: 第几页:param size: 每页数量:return: 分页用户信息"""return {"page": page,"size": size,"count": len(data),  # 数据库里面符合查询条件的数据个数"data": data[:size]}

练习:想要第二页的20条数据

第一页:切片 [0:20]

第二页:切片 [20:40]

第三页:切片 [40:60]

用代码表示:page=2 size=20

  • page:1 size:20 ===>> start:0 end:20
  • page:2 size:20 ===>> start:20 end:40
  • page:3 size:20 ===>> start:40 end:60

end = start + size

  • start=0 size=20 end=0+20=20
  • start=20 size=20 end=20+20=40
  • start=40 size=20 end=40+20=60

start = (page - 1) x size

  • page=1 size=20 start=(1-1) x 20=0x20=0
  • page=2 size=20 start=(2-1)x20=1x20=20
  • page=3 size=20 start=(3-1)x20=2x20=40
@app.get("/user")
async def get_user(page: int = 1, size: int = 20):"""查询用户信息:param page: 第几页:param size: 每页数量:return: 分页用户信息"""start = (page - 1) * sizeend = start + sizereturn {"page": page,"size": size,"count": len(data),  # 数据库里面符合查询条件的数据个数"data": data[start:end]}

使用postman测试:
在这里插入图片描述

遗留的问题

  • 3、FastAPI
  • 4、MySQL8
  • 5、SQLModel,和FastAPI框架是同一个作者,两者结合比较好用,但是学习成本较高,使用难度稍大
  • 6、Vue3
  • 7、Tailwindcss
  • 8、Ant Design Vue,UI组件库
  • 9、数据同步:有一个API,这个API提供了一些数据,需要在ERP系统中进行展示。
  • 10、登录注册需要吗?需要
  • 11、第三方平台管理:对接哪些接口平台飞书,钉钉,聚水潭等等
  • 12、用户管理
  • 13、Docker
  • 14、Linux
  • 15、Nginx
  • 16、项目部署实战

这篇关于FastAPI+Vue3零基础开发ERP系统项目实战课 20240831上课笔记 查询参数和分页实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1129676

相关文章

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享(CORS)2. Nginx 配置跨域的场景2.1

Python中提取文件名扩展名的多种方法实现

《Python中提取文件名扩展名的多种方法实现》在Python编程中,经常会遇到需要从文件名中提取扩展名的场景,Python提供了多种方法来实现这一功能,不同方法适用于不同的场景和需求,包括os.pa... 目录技术背景实现步骤方法一:使用os.path.splitext方法二:使用pathlib模块方法三

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性,由Chrome125开始提供原生支持需... 目录 css Anchor Positioning:重新定义「锚定定位」的时代来了! 什么是 Anchor Pos

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布局和层叠关

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》:本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一:高德开放平台的使用二:创建数据库(我是用的是mysql)三:Springboot所需的依赖(根据你的需求再

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解