92 lines
2.5 KiB
Markdown
92 lines
2.5 KiB
Markdown
# Mock数据使用说明
|
||
|
||
## 文件说明
|
||
|
||
以下是为上海地图大屏组件创建的模拟数据文件：
|
||
|
||
1. `getAllCourse.json` - 总分数据
|
||
2. `getAllData.json` - 各区域数据
|
||
3. `getCheckMonitoringValue.json` - 抽检监测数据
|
||
4. `getCheckAssessmentValue.json` - 抽查考核数据
|
||
5. `getIstrativeSanctionValue.json` - 行政处罚数据
|
||
6. `getComplaintReportValue.json` - 投诉举报数据
|
||
7. `getInformationTracingValue.json` - 信息追溯数据
|
||
8. `getLawEnforcementInspectionValue.json` - 执法检查数据
|
||
9. `mockConfig.js` - Mock拦截器配置
|
||
|
||
## 使用方法
|
||
|
||
### 方法一：使用axios-mock-adapter（推荐）
|
||
|
||
1. 安装依赖：
|
||
```bash
|
||
npm install axios-mock-adapter --save-dev
|
||
```
|
||
|
||
2. 在项目入口文件（如main.ts或main.js）中引入mock配置：
|
||
```javascript
|
||
// 仅在开发环境中启用mock
|
||
if (process.env.NODE_ENV === 'development') {
|
||
require('./public/mock/mockConfig.js');
|
||
}
|
||
```
|
||
|
||
### 方法二：直接修改API文件（临时使用）
|
||
|
||
在`src/api/SettingAPI.js`或对应的API文件中，可以临时修改API函数直接返回模拟数据，例如：
|
||
|
||
```javascript
|
||
// 原API函数
|
||
export const getAllCourse = (month, stage, district) => {
|
||
// 临时替换为使用模拟数据
|
||
return Promise.resolve({
|
||
data: require('../../public/mock/getAllCourse.json').data
|
||
});
|
||
|
||
// 原代码注释掉
|
||
// return request({
|
||
// url: '/settings/getAllCourse',
|
||
// method: 'get',
|
||
// params: { month, stage, district }
|
||
// });
|
||
};
|
||
```
|
||
|
||
### 方法三：简易版本（不需要安装额外依赖）
|
||
|
||
创建一个简单的mock服务文件：
|
||
|
||
```javascript
|
||
// src/mock/index.js
|
||
import { getAllCourse, getAllData /* 其他API函数 */ } from '../api/SettingAPI';
|
||
|
||
// 劫持原函数
|
||
const originalGetAllCourse = getAllCourse;
|
||
const originalGetAllData = getAllData;
|
||
// ... 其他原函数
|
||
|
||
// 替换为模拟数据版本
|
||
export function enableMock() {
|
||
window.getAllCourse = function() {
|
||
return Promise.resolve({ data: require('../../public/mock/getAllCourse.json').data });
|
||
};
|
||
window.getAllData = function() {
|
||
return Promise.resolve({ data: require('../../public/mock/getAllData.json').data });
|
||
};
|
||
// ... 其他API替换
|
||
}
|
||
|
||
// 恢复原函数
|
||
export function disableMock() {
|
||
window.getAllCourse = originalGetAllCourse;
|
||
window.getAllData = originalGetAllData;
|
||
// ... 恢复其他API
|
||
}
|
||
```
|
||
|
||
然后在需要的地方调用`enableMock()`来启用模拟数据。
|
||
|
||
## 数据修改
|
||
|
||
您可以随时编辑JSON文件中的数据来测试不同的显示效果，所有文件都位于`public/mock/`目录下。
|