mockjs与angular8的结合

一、前言：

  由于我们的后端业务复杂，前后端联调之前都要等java与c联调好之后，然后与前端交互，每次前端逻辑做完都需要等很长时间，前端总因为数据问题后期需要修改部分逻辑，耗时耗力，因此引入mockjs，模拟各种后台数据，方便http请求异步联调，使前端可以模拟数据（包括错误数据）先做界面逻辑开发。

二、项目情况

框架：angular8
UI：ng-zorro

三、环境安装

npm i mockjs -s

四、定义mock数据文件 (mockData.js)

import Mock from "mockjs";

// 拦截请求，返回假数据
import Mock from "mockjs";

let data = Mock.mock({
     [{
         // 属性routeId 是一个自增数，起始值为 1，每次增 1
        'routeId|+1': 1,
        "name|+1": [
            "Hello",
            "Mock.js",
            "!"
        ]
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))


//拦截请求，返回假数据

Mock.mock("http://192.16.1.11:8080/netinterfaces/routes", {
    code: 200,
    message: "调用成功",
    data: data
    
});

五、引入mockjs模拟数据

1.environment.ts中定义isMock变量

export const environment = {
  ...
  isMock: true,
};

2.main.ts中导入mockData.ts文件

// 如果允许mock数据
if (environment.isMock) {
    import('./assets/data/mockData').then(_ => {
        console.log('引入mockjs拦截数据成功');
    });
}

六、使用

1. 业务文件中调用serverice文件

constructor(private networkService: NetworkService,
            private notification: NzNotificationService) {}

ngOnInit() {
    this.getTableAll();
}

getTableAll() {
        this.loading = true;  
        this.networkService.getStaticRouterDatas().subscribe((data: any) => {
             if (data.code === 200) {
                this.tableData = data.data;
            } else {
                this.notification.error('数据查询失败', '');
            }
            this.loading = false;
        }, () => {
            this.loading = false;
        });
        this.getTableCount();
    }

networkService.ts

getStaticRouterDatas(params) {
      return this.http.get('http://192.16.1.11:8080/netinterfaces/routes');
}

七、关于mockjs

  以上仅为mockjs在angular8中如何使用，而mockjs还有很多关于根据模板生成模拟数据、配置拦截Ajax请求时的行为、以及生成随机数据的工具类等api需要学习，具体详见mockjs官方文档 github.com/nuysoft/Moc…