一、功能概述
本文详细介绍了如何在 Vue.js 项目中实现项目管理功能，并使其使用 Mock 数据，同时确保其他页面继续使用后端接口。主要涉及以下几个文件的修改：
- src/mock/project.ts - Mock 数据定义
- src/api/project.ts - API 调用修改
- src/views/project/ProjectList.vue - 项目管理页面
二、具体实现
1. Mock 数据定义 (src/mock/project.ts)
2. API 调用修改 (src/api/project.ts)
三、实现细节说明
1. Mock 数据实现
Mock 数据的实现主要包含三个部分：
- 静态数据：
- 定义了基础的项目数据数组 mockProjects
- 每个项目包含 id、projectNo、projectName、status 等字段
- 使用 TypeScript 类型确保数据结构符合 Project 接口定义
- 列表查询功能：
- mockGetProjectList 函数模拟了后端的分页查询
- 支持按项目名称和编号进行筛选
- 实现了分页逻辑，返回指定页码的数据
- 使用 Promise 和 setTimeout 模拟网络延迟
- 新增功能：
- mockAddProject 函数模拟了项目新增操作
- 自动生成项目 ID 和创建时间
- 将新项目添加到 mockProjects 数组中
2. API 层改造
API 层的改造采用了无缝切换的策略：
- 保持接口不变：
- 维持原有的函数名和参数类型不变
- 确保其他页面的调用方式不需要修改
- 切换数据源：
- 将原有的 HTTP 请求替换为 Mock 数据调用
- 保持返回数据格式与原接口一致
3. 页面实现
项目列表页面实现了完整的项目管理功能：
- 搜索功能：
- 支持按项目名称和编号搜索
- 实现了表单重置功能
- 搜索条件变更时自动刷新列表
- 分页功能：
- 支持页码切换和每页条数调整
- 分页参数变更时自动刷新列表
- 显示总记录数和跳转功能
- 新增功能：
- 使用模态框实现新增表单
- 包含必填字段验证
- 提供表单重置和取消功能
四、注意事项
- 类型安全：
- 使用 TypeScript 类型定义确保类型安全
- 修复了 id 字段的类型问题（从 string 改为 number）
- 错误处理：
- 添加了适当的错误处理和提示
- 使用 i18n 支持错误消息国际化
- 性能考虑：
- 添加了加载状态控制
- 模拟了合理的网络延迟
五、总结
通过以上改造，我们实现了：
- 项目管理功能使用 Mock 数据，而其他页面继续使用后端接口
- 保持了良好的代码组织和类型安全
- 提供了完整的项目管理功能，包括查询、新增等
- 确保了系统其他部分不受影响
这种实现方式既满足了开发测试需求，又保证了系统的可维护性和扩展性。