Angular10.0项目中使用mock.js

为什么使用mock.js

前后端一起进行开发时，一些功能要等接口开发出来前端才能调试，依懒性太强。这时候对方可以先定义好接口和数据字段，提前进行开发和测试。

原理

拦截了所有的请求并代理到本地模拟数据，所以 network 中没有发出任何的请求。因为只是模拟数据进行测试，就不必频繁发请求给服务器造成压力

在angular项目中的使用

1. 安装mock， npm install mockjs

2. 添加mock开关 ，在开发环境中添加mock开关，防止在正式环境中误用到；

   // 文件 environment.ts
   export const environment = {
   	isMock: true
   }
   1
   2
   3
   4

3. 添加mock文件，找一个合适的位置，新建一个文件夹mock，并创建index.js文件，用于创建mock数据。我的项目中放在了src/app/下。

   // 文件mock/index.js
   import Mock from "mockjs"
   1
   2

4. 引入mock文件，在main.ts中添加以下代码

   // main.ts
   if(environment.isMock){
     import('./app/mock/index.js');
   }
   1
   2
   3
   4

   这样就成功了引入了mock.js，剩下的就是根据mock语法，规范的使用

5. 举例：

   // mock/index.js
   // mock方法第一个参数是拦截的接口url,第二个参数是请求方式，第三个参数是返回的数据
   Mock.mock(/\/getList/,"get",{
   	"data":{
   		"name": "@CNAME",
   		"phone": /^1(3|5|6|7|8|9)\d{9}/,
   		"addtime": "@DATETIME",
   		"id": "@ID",
   	},
   	"arrData| 1-5":[
   		{
   			'addtime': "@DATETIME",
   		  	'adduser': "@CNAME",
   		    'adduserid': "@ID",
   		    'flag|1': ['0','1'],
   		}
   	]
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18

   注意：没办法直接生成数组，不过可以使用以下方法返回数组：

   let List = Mock.mock({
   	"data|1-5":[
   		{
   			'addtime': "@DATETIME",
   		  	'adduser': "@CNAME",
   		    'adduserid': "@ID",
   		    'flag|1': ['0','1'],
   		}
   	]
   }) 
   
   Mock.mock(/\/getList/, "get", List.data)
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12