256 lines
6.2 KiB
Markdown
256 lines
6.2 KiB
Markdown
# 牛只运输管理系统数据结构说明
|
||
|
||
## 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等安全问题 |