一、为什么要使用mockjs
总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模拟数据返回参与相应的数据交互处理,这样真正实现了前后台的分离开发。
二、在vue的项目中怎么去使用mockjs
1、下载mockjs
npm install mockjs --save
2、使用mockjs
2.1在项目目录中新建mock/mockServer.js 模拟服务端
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 });
2.2在main.js项目全局文件中引入mockServer
1 import './mock/mockServer' //加载mockServer
2.3前端发送ajax去请求mockServer 的 数据
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 /* 2 ajax请求函数模块 3 返回值: promise对象(异步返回的数据是: response.data) 4 */ 5 import axios from 'axios' 6 export default function ajax (url, data={}, type='GET') { 7 8 return new Promise(function (resolve, reject) { 9 // 执行异步ajax请求 10 let promise 11 if (type === 'GET') { 12 // 准备url query参数数据 13 let dataStr = '' //数据拼接字符串 14 Object.keys(data).forEach(key => { 15 dataStr += key + '=' + data[key] + '&' 16 }) 17 if (dataStr !== '') { 18 dataStr = dataStr.substring(0, dataStr.lastIndexOf('&')) 19 url = url + '?' + dataStr 20 } 21 // 发送get请求 22 promise = axios.get(url) 23 } else { 24 // 发送post请求 25 promise = axios.post(url, data) 26 } 27 promise.then(function (response) { 28 // 成功了调用resolve() 29 resolve(response.data) 30 }).catch(function (error) { 31 //失败了调用reject() 32 reject(error) 33 }) 34 }) 35 }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 /* 2 包含n个接口请求函数的模块 3 函数的返回值: promise对象 4 */ 5 import ajax from './ajax'; 6 7 //1、获取swipe的图片列表 8 export const reqSwipes = ()=>ajax(`/swipes`,); 9 10 //2、获取所有病人信息列表 11 export const reqPatients = ()=>ajax(`/patients`); 12 13 //3、根据pid获取病人信息 14 export const reqPatientByPid = (pid)=>ajax(`/patient`,{pid},"POST");