# 牛只运输管理系统数据结构说明 ## 1. 概述 本文档详细描述了牛只运输管理系统中使用的主要数据结构,包括API接口返回数据结构、状态管理数据结构等。 ## 2. API接口数据结构 ### 2.1 用户相关接口 #### 登录接口 `/login` **请求参数:** ```typescript interface LoginRequest { mobile: string; // 手机号 password: string; // 密码或验证码 loginType: number; // 登录类型(0:密码登录, 1:验证码登录) } ``` **响应数据:** ```typescript interface LoginResponse { token: string; // 认证令牌 mobile: string; // 手机号 username: string; // 用户名 userType: number; // 用户类型 roleId: string; // 角色ID } ``` #### 获取用户菜单接口 `/getUserMenus` **响应数据:** ```typescript interface Menu { id: string; // 菜单ID parentId: string; // 父级菜单ID name: string; // 菜单名称 routeUrl: string; // 路由URL pageUrl: string; // 页面URL icon: string; // 菜单图标 type: number; // 菜单类型(1:菜单, 2:按钮) authority: string; // 权限标识 } ``` ### 2.2 系统管理接口 #### 岗位管理列表接口 `/sysRole/queryList` **请求参数:** ```typescript interface PositionListRequest { pageNum: number; // 页码 pageSize: number; // 每页条数 name?: string; // 岗位名称(可选) } ``` **响应数据:** ```typescript interface PositionListResponse { total: number; // 总条数 rows: Position[]; // 岗位列表 } interface Position { id: string; // 岗位ID name: string; // 岗位名称 description: string; // 岗位描述 createTime: string; // 创建时间 isAdmin: number; // 是否管理员岗位(1:是, 其他:否) } ``` #### 岗位删除接口 `/sysRole/delete` **请求参数:** ```typescript interface PositionDeleteRequest { id: string; // 岗位ID } ``` ### 2.3 运输管理接口 #### 运输计划相关接口 (具体接口结构需根据实际API文档补充) ### 2.4 检疫管理接口 #### 检疫记录相关接口 (具体接口结构需根据实际API文档补充) ## 3. 状态管理数据结构 ### 3.1 用户状态 (userStore) ```typescript interface UserState { id: string; // 用户ID username: string; // 用户名 token: string; // 认证令牌 loginUser: any; // 登录用户信息 userType: string; // 用户类型 roleId: string; // 角色ID } ``` ### 3.2 权限状态 (permissionStore) ```typescript interface PermissionState { routes: Route[]; // 所有路由 addRoutes: Route[]; // 动态添加的路由 sidebarRouters: Route[]; // 侧边栏路由 routeFlag: boolean; // 路由加载标志 userPermission: string[]; // 用户权限列表 } ``` ## 4. 路由数据结构 ### 4.1 路由配置结构 ```typescript interface RouteConfig { path: string; // 路由路径 name?: string; // 路由名称 component: Component; // 组件 redirect?: string; // 重定向路径 meta: { title: string; // 页面标题 keepAlive: boolean; // 是否缓存 requireAuth: boolean; // 是否需要认证 }; children?: RouteConfig[]; // 子路由 } ``` ## 5. 组件数据结构 ### 5.1 表单配置结构 ```typescript interface FormItem { label: string; // 标签文本 type: string; // 表单类型(input, select, date等) param: string; // 参数名 placeholder?: string; // 占位符 span?: number; // 栅格占据的列数 labelWidth?: number; // 标签宽度 // 根据类型不同可能包含以下属性 selectOptions?: Option[]; // 下拉选项(仅select类型) multiple?: boolean; // 是否多选(仅select类型) labelKey?: string; // 标签键名(仅select类型) valueKey?: string; // 值键名(仅select类型) } ``` ### 5.2 表格配置结构 ```typescript interface TableColumn { label: string; // 列标题 prop: string; // 对应字段名 width?: number; // 列宽 showOverflowTooltip?: boolean;// 是否显示溢出提示 } ``` ## 6. 工具函数数据结构 ### 6.1 树形结构处理 系统中多处使用树形结构数据,如菜单树、组织架构树等,统一采用以下结构: ```typescript interface TreeNode { id: string; // 节点ID parentId: string; // 父节点ID name: string; // 节点名称 children?: TreeNode[]; // 子节点 } ``` ## 7. 配置数据结构 ### 7.1 环境配置 系统支持多种环境配置,通过环境变量文件进行管理: - `.env`: 基础配置 - `.env.development`: 开发环境配置 - `.env.production`: 生产环境配置 ### 7.2 主题配置 系统支持主题配置,包括颜色、字体、间距等样式变量。 ## 8. 数据存储结构 ### 8.1 localStorage存储 ```javascript // 用户信息存储 'userStore': { id: string, username: string, token: string, loginUser: object, userType: string, roleId: string } ``` ### 8.2 sessionStorage存储 (根据实际使用情况补充) ## 9. 数据交互流程 ### 9.1 登录流程数据交互 ``` 1. 用户输入登录信息 2. 调用/login接口 3. 服务端验证并返回token等信息 4. 前端存储用户信息到store和localStorage 5. 调用/getUserMenus接口获取菜单信息 6. 根据菜单信息动态生成路由 7. 跳转到首页 ``` ### 9.2 页面访问流程 ``` 1. 用户访问某个页面URL 2. 路由守卫检查用户是否登录 3. 如未登录,跳转到登录页 4. 如已登录,检查用户是否有该页面权限 5. 如有权限,加载对应组件 6. 如无权限,显示无权限提示 ``` ## 10. 数据安全 ### 10.1 敏感信息处理 - 密码等敏感信息在传输过程中进行加密处理 - token等认证信息通过HTTP Only Cookie或localStorage存储 - 关键操作需要二次确认 ### 10.2 数据验证 - 前端对用户输入进行基础验证 - 后端对接口参数进行严格验证 - 防止SQL注入、XSS等安全问题