【Python】dash-fastapi前后端搭建

概述

项目中需要快速搭建一个前后端系统，涉及到dash-fastapi架构的时候，对该架构的时候进行总结。本文主要总结的是对该架构的基本使用，后续再对该架构的项目源码进行总结分析

此处实现一个小的demo，迷你任务管理器，后端使用FastAPI，前端则使用Dash，数据存储暂时使用列表进行存储，主要功能如下

• 任务列表展示: 前端页面显示一个简单的任务列表，包含任务标题和状态。
• 添加任务: 用户可以在前端输入任务标题，点击按钮添加新任务。
• 刷新任务列表: 点击按钮可以刷新任务列表，从后端获取最新数据。

整体架构理解

代码主体架构

• 后端
  • main.py （Fast API主文件）
  • requirements.txt（后端依赖）
• 前端
  • app.py（Dash主文件）
  • api_client.py（前端API客户端）
  • layoputs.py（前端布局）
  • callbacks.py（前端回调函数）
  • requirements.txt(后端依赖）

主要逻辑理解

代码中具体体现

• 后端
  • main.py：后端，也就类似于厨房。专门负责接收顾客的订单，然后准备食物（构建响应）并告知服务器食物准备后
  • tasks_db = []：通过列表内存列表，类似于厨师的菜单列表。其记录了餐厅可以提供的菜品，也就是后端可以完成的任务
  • @app.get ：厨师提供给服务员今日菜单，服务员发送get请求的时候，就可以知道后端提供什么服务（从tasks_db中获取）
  • @app.post：创创建任务，类似于服务员将菜单传给厨房；后面的逻辑就是请求响应的基本逻辑
  • Task（使用Pydantic模型）：菜单上的菜品叙述，规定了每个任务包含哪些信息，提供任务名以及状态是否完成
• 前端
  • layouts.py：餐厅的菜单，定义了顾客可以看到什么，也就是前端显示的页面
    • dcc.Input：点餐单的填写区域，顾客要吃什么
    • dbc.Button：提交按钮，这里可以对应设计供，例如提交点餐单或者是刷新菜单信息
    • html.Div：上菜的盘子，厨房准备后的食物会放进这个盘子里展示给顾客
  •  callbacks.py：服务员接收到顾客的指令应该如何行动
  • api_client.py：点餐系统，帮助前端与后端沟通，服务员与厨师之间的沟通                                                          &