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

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

时间:2024-09-03 19:22:13浏览次数:12  
标签:20 FastAPI app 查询 Vue3 ERP data page size

回顾

  • 获取路径参数
  • 什么是路径参数?/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 FastAPI

app = 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 FastAPI

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": 1000,  # 数据库里面符合查询条件的数据个数
        "data": [  # 当前页的具体信息
            {"id": 1, "name": "张三", "age": 23},
            {"id": 2, "name": "李四", "age": 33},
            {"id": 3, "name": "王五", "age": 25},
        ]
    }


if __name__ == '__main__':
    import uvicorn

    uvicorn.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 FastAPI

app = 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 uvicorn

    uvicorn.run(app, host='0.0.0.0', port=8888)

代码优化

from fastapi import FastAPI

data = []
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 uvicorn

    uvicorn.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) * size
    end = start + size
    return {
        "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、项目部署实战

标签:20,FastAPI,app,查询,Vue3,ERP,data,page,size
From: https://blog.csdn.net/qq_37703224/article/details/141791060

相关文章

  • vue3整合antv x6实现图编辑器快速入门
    安装:npminstall@antv/x6--save如果使用umd包,可以使用下面三个CDN中的任何一个,默认使用X6的最新版:https://unpkg.com/@antv/x6/dist/index.jshttps://cdn.jsdelivr.net/npm/@antv/x6/dist/index.jshttps://cdnjs.cloudflare.com/ajax/libs/antv-x6/2.0.0/index.......
  • vue3使用路由守卫出现的问题合集
    登录后停留在登录页面无法跳转--24.9.3原代码:functionisRoute(to){letres=router.getRoutes()letresFil=res.filter(item=>item.path===to.path)returnresFil.length>0}router.beforeEach((to,from,next)=>{if(to.path!=='/login'......
  • Vue3+SpringBoot前端项目实战智慧实验室管理平台
    Vue3+SpringBoot前端项目实战:‌智慧实验室管理平台在当今数字化快速发展的时代,‌智慧实验室管理平台成为提升科研效率、‌优化资源配置的重要工具。‌本文将介绍如何使用Vue3和SpringBoot构建一个功能全面的智慧实验室管理平台,‌涵盖平台的设计思路、‌技术选型、‌核心功......
  • 前端Vue3项目VUE3+TypeScript企业级前端Vue项目
    前端Vue3项目VUE3+TypeScript企业级前端Vue项目‌Vue3+SpringBoot前端项目实战:‌智慧实验室管理平台‌在当今数字化快速发展的时代,‌智慧实验室管理平台的建设成为了提升科研效率与管理水平的关键一环。‌本文将通过一个实战案例,‌详细介绍如何使用Vue3和SpringBoot技术栈构建......
  • Vue3源码解析,打造自己的Vue3框架,实现技术深度与思维
    Vue3源码解析与打造自己的Vue3框架:‌技术深度与思维实践引言Vue.js作为当前最流行的前端框架之一,‌其不断迭代和更新推动了前端技术的快速发展。‌Vue3作为Vue.js的下一代主要版本,‌在性能、‌可维护性和开发体验方面进行了重大改进。‌本文将通过对Vue3源码的深入解析,‌探讨......
  • Vue3+Vite+Vant-UI+Pinia+VueUse开发双端业务驱动技术栈商用项目
    前言:个人git仓库,全是干货一、本次搭建项目涉及到vue3、vite、pinia、vue-router、typescript、element-plus,下面先简单介绍一下大家比较陌生的框架或库1、vue3vue团队官宣:2022年2月7日,vue3作为vue的默认版本。现在打开vue官网,界面默认显示的是vue3版本的指导文档。vue团队在......
  • Vite2.0+ElementPlus+Koa2+Mongo全栈开发通用后台系统Vue3
    Vite2.0+ElementPlus+Koa2+Mongo全栈开发通用后台系统Vue3前言当前基于NodeJs框架的全栈工程实践非常之火,作为一个很长时间未接触代码的前程序猿。一直有点手痒痒,想尝试一下这种全新的编程体验,于是就重新开始了填坑的不归之路。这一套框架是基于现在的前后台分离的指导原则来......
  • TS4+Vite+Vitest+Vitepress Vue3.3 自主打造媲美ElementPlus的组件库
    TS4+Vite+Vitest+VitepressVue3.3自主打造媲美ElementPlus的组件库这个问题看起来是想要创建一个类似ElementPlus的Vue组件库,并且使用TypeScript、Vite、Vitest和Vitepress进行开发。以下是一个简化的指南,用于创建一个自己的Vue组件库项目框架。安装必要的工具:npm......
  • vue3中使用pinia报错
    问题:UncaughtError:[......
  • 【系统方案】ERP系统总体解决方案书(Doc原件70页)
    目录第一部分概述第二部分方案介绍第三部分系统业务流程3.1关键需求概括分析3.1.1 销售管理方面3.1.2 采购管理方面3.1.3 仓库管理方面3.1.4 财务管理方面3.1.5 人力资源方面3.2关键需求具体分析3.2.1财务管理3.2.1.1会计凭证解决3.......