mock模拟数据 ----vue

1 应用场景：
后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接口返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。
2 流程：
（1）先安装mockjs

npm install mockjs --save-dev

（2）项目的目录结构：在src同级新建一个mock文件夹

（2–1）mock文件夹下的index.js 文件是拦截ajax的核心

(2—2)mock/reponse 文件夹下是一些js文件，每个js文件对应的是一个接口的返回数据，举个例子这个是mock/response/resource.js文件，那么调用这个文件的导出函数的时候他就会返回你自己模拟写好的arrList的数据格式

(2----3)同时呢mock/module文件夹下也会有一些js文件，他们会和response里面的js文件互相对应，举个栗子mock/module/resource.js

(2–4) 补充：看文件目录，有一个也是新建的 .env文件,他里面放的是一些定义的变量如

(2—5) 在需要调用接口的页面先进行个判断，引入mock，然后正常调用api里面的函数即可,mock会自己拦截

if(process.env.VUE_APP_MOCK == true) {
 	require('../../mock')				// 如果没有真实接口的情况下，引入mock,否则走真实接口(有真实接口的时候把.env的这个变量设为false)
}

总结：使用mock，mock/ndex.js把真实的请求通过url和type进行拦截，新建的mock文件夹下response下面的js文件来模拟单纯的数据格式，modules下面的js文件来进一步创建和真实接口返回一样的数据格式，.env文件中有个mock的开启标志在需要调用接口的页面进行判断若为true引入mock正常调用api里面的函数,mock会自动拦截，否则置位false走真实的接口

如果有疑问可以评论区提，大家共同讨论777777777