基于 FastAPI 和 Vue3 的生产管理系统代码示例，包含动态路由、状态管理和工艺流程的逻辑

1. 环境搭建

后端（FastAPI）

1. 安装FastAPI和Uvicorn：

   pip install "fastapi[all]"
   

2. 创建一个main.py文件，编写基本的FastAPI应用：

   from fastapi import FastAPI
   import uvicorn
   
   app = FastAPI()
   
   @app.get("/test")
   def test():
       return {"message": "FastAPI + Vue3"}
   
   if __name__ == "__main__":
       uvicorn.run(app='main:app', host="127.0.0.1", port=8000, reload=True)
   

前端（Vue3）

1. 在项目根目录下创建Vue3项目：

   npm init vue@latest
   

2. 进入项目目录并安装依赖：

   cd vue3
   npm install
   npm run dev
   

2. 前后端集成

1. 在Vue3项目中，使用Vite构建工具进行打包：

   npm run build
   

2. 将打包后的dist目录复制到FastAPI项目中。

3. 在FastAPI中配置静态文件服务：

   from fastapi.staticfiles import StaticFiles
   from fastapi.responses import HTMLResponse
   import os
   
   BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
   
   app.mount("/dist", StaticFiles(directory=os.path.join(BASE_DIR, 'fastapi/dist')), name="dist")
   app.mount("/assets", StaticFiles(directory=os.path.join(BASE_DIR, 'fastapi/dist/assets')), name="assets")
   
   @app.get("/")
   def main():
       html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'dist', 'index.html')
       with open(html_path, 'r', encoding='utf-8') as f:
           html_content = f.read()
       return HTMLResponse(content=html_content, status_code=200)
   

3. 动态路由与步骤化导航

后端（FastAPI）

1. 定义动态路由接口，例如订单提交流程：

   @app.get("/order/create")
   def create_order():
       return {"step": 1, "message": "Order creation page"}
   
   @app.get("/order/preview")
   def preview_order():
       return {"step": 2, "message": "Order preview page"}
   
   @app.get("/order/submit")
   def submit_order():
       return {"step": 3, "message": "Order submitted successfully"}
   

2. 使用动态路由匹配，根据后端返回的菜单数据生成可访问路径：

   @app.get("/menu")
   def get_menu():
       return {
           "menu": [
               {"path": "/order/create", "name": "Create Order"},
               {"path": "/order/preview", "name": "Preview Order"},
               {"path": "/order/submit", "name": "Submit Order"}
           ]
       }
   

前端（Vue3）

1. 使用Vue Router实现动态路由：

   import { createRouter, createWebHistory } from 'vue-router';
   
   const routes = [
       { path: '/order/create', component: () => import('@/views/OrderCreate.vue') },
       { path: '/order/preview', component: () => import('@/views/OrderPreview.vue') },
       { path: '/order/submit', component: () => import('@/views/OrderSubmit.vue') }
   ];
   
   const router = createRouter({
       history: createWebHistory(),
       routes
   });
   
   export default router;
   

2. 在Vue组件中根据后端返回的菜单数据动态生成导航：

   <template>
       <div>
           <nav>
               <ul>
                   <li v-for="item in menu" :key="item.path">
                       <router-link :to="item.path">{{ item.name }}</router-link>
                   </li>
               </ul>
           </nav>
           <router-view></router-view>
       </div>
   </template>
   
   <script>
   import { ref, onMounted } from 'vue';
   import axios from 'axios';
   
   export default {
       setup() {
           const menu = ref([]);
   
           onMounted(async () => {
               const response = await axios.get('/menu');
               menu.value = response.data.menu;
           });
   
           return { menu };
       }
   };
   </script>
   

4. 工艺流程逻辑

1. 后端逻辑：

   • 定义工艺流程的每个步骤，例如订单创建、审核、提交等。

   • 使用数据库存储流程状态，例如订单的状态、当前步骤等。

   • 提供API接口供前端调用，更新和查询流程状态。

2. 前端逻辑：

   • 使用Vue3的响应式状态管理（如Pinia）来跟踪当前流程状态。

   • 根据后端返回的状态动态更新UI，例如显示当前步骤、禁用或启用按钮等。

5. 权限管理

1. 后端：

   • 使用JWT进行身份验证和授权。

   • 定义角色和权限模型，控制用户对不同接口和资源的访问。

2. 前端：

   • 根据用户权限动态生成菜单和按钮。

   • 在路由守卫中检查用户权限，限制访问未授权的页面。

通过以上步骤，你可以基于FastAPI和Vue3开发一个完整的生产管理系统，支持动态路由、步骤化导航和工艺流程管理。