mockjs 在项目中vue项目中使用

一、为什么要使用mockjs

总结起来就是在后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接口返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。

二、在vue的项目中怎么去使用mockjs

1、下载mockjs

npm install mockjs --save

2、使用mockjs

2.1在项目目录中新建mock/mockServer.js  模拟服务端

 1 import Mock from 'mockjs'
 2 const swipes = [
 3   {
 4     imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556531040198&di=c6dabc6bb5c6524f9b77ceded00d1fce&imgtype=0&src=http%3A%2F%2Fi3.hexun.com%2F2019-04-28%2F196992413.jpg"
 5   },
 6   {
 7     imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556531040180&di=0feae9ec159834591880d72c34137235&imgtype=0&src=http%3A%2F%2Fm1080.com%2Fupimg%2Fzyzp1%2F145186.jpg"
 8   },
 9   {
10     imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556531040164&di=b228224bb92c8baa6fbfa1ac6d31398c&imgtype=0&src=http%3A%2F%2Fimg.smzy.com%2Fimges%2F2017%2F0510%2F20170510101016609.jpg"
11   }
12 ];
13 const patients =[
14   {
15     id:'1',
16     title:'张大爷',
17     label:'男',
18     path:'/patient',
19     imgUrl:'../../static/images/20170622131955_h4eZS.thumb.700_0.jpeg'
20   },
21   {
22     id:'2',
23     title:'李大爷',
24     label:'男',
25     path:'/patient',
26     imgUrl:'../../static/images/20170622131955_h4eZS.thumb.700_0.jpeg'
27   },
28   {
29     id:'3',
30     title:'张奶奶',
31     label:'女',
32     path:'/patient',
33     imgUrl:'../../static/images/20170622131955_h4eZS.thumb.700_0.jpeg'
34   },
35   {
36     id:'4',
37     title:'李大爷',
38     label:'男',
39     path:'/patient',
40     imgUrl:'../../static/images/20170622131955_h4eZS.thumb.700_0.jpeg'
41   },
42   {
43     id:'5',
44     title:'王奶奶',
45     label:'女',
46     path:'/patient',
47     imgUrl:'../../static/images/20170622131955_h4eZS.thumb.700_0.jpeg'
48   }
49 ];
50 Mock.mock('/swipes',swipes);
51 Mock.mock('/patients',patients);
52 Mock.mock("/patient", "post", (options)=>{
53   const jsonObj = eval('(' + options.body + ')');
54   const patient = patients.filter(p=>p.id == jsonObj.pid);
55   return patient[0];
56 });

View Code