mockjs 在項目中vue項目中使用

一、為什么要使用mockjs

總結起來就是在后端接口沒有開發完成之前，前端可以用已有的接口文檔，在真實的請求上攔截ajax，並根據mockjs的mock數據的規則，模擬真實接口返回的數據，並將隨機的模擬數據返回參與相應的數據交互處理，這樣真正實現了前后台的分離開發。

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

1、下載mockjs

npm install mockjs --save

2、使用mockjs

2.1在項目目錄中新建mock/mockServer.js  模擬服務端

import Mock from 'mockjs'
const swipes = [
  {
    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"
  },
  {
    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"
  },
  {
    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"
  }
];
const patients =[
  {
    id:'1',
    title:'張大爺',
    label:'男',
    path:'/patient',
    imgUrl:'../../static/images/20170622131955_h4eZS.thumb.700_0.jpeg'
  },
  {
    id:'2',
    title:'李大爺',
    label:'男',
    path:'/patient',
    imgUrl:'../../static/images/20170622131955_h4eZS.thumb.700_0.jpeg'
  },
  {
    id:'3',
    title:'張奶奶',
    label:'女',
    path:'/patient',
    imgUrl:'../../static/images/20170622131955_h4eZS.thumb.700_0.jpeg'
  },
  {
    id:'4',
    title:'李大爺',
    label:'男',
    path:'/patient',
    imgUrl:'../../static/images/20170622131955_h4eZS.thumb.700_0.jpeg'
  },
  {
    id:'5',
    title:'王奶奶',
    label:'女',
    path:'/patient',
    imgUrl:'../../static/images/20170622131955_h4eZS.thumb.700_0.jpeg'
  }
];
Mock.mock('/swipes',swipes);
Mock.mock('/patients',patients);
Mock.mock("/patient", "post", (options)=>{
  const jsonObj = eval('(' + options.body + ')');
  const patient = patients.filter(p=>p.id == jsonObj.pid);
  return patient[0];
});

2.2在main.js項目全局文件中引入mockServer

 import './mock/mockServer' //加載mockServer 

2.3前端發送ajax去請求mockServer 的 數據

/*
ajax請求函數模塊
返回值: promise對象(異步返回的數據是: response.data)
 */
import axios from 'axios'
export default function ajax (url, data={}, type='GET') {

  return new Promise(function (resolve, reject) {
    // 執行異步ajax請求
    let promise
    if (type === 'GET') {
      // 准備url query參數數據
      let dataStr = '' //數據拼接字符串
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if (dataStr !== '') {
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      }
      // 發送get請求
      promise = axios.get(url)
    } else {
      // 發送post請求
      promise = axios.post(url, data)
    }
    promise.then(function (response) {
      // 成功了調用resolve()
      resolve(response.data)
    }).catch(function (error) {
      //失敗了調用reject()
      reject(error)
    })
  })
}

/*
包含n個接口請求函數的模塊
函數的返回值: promise對象
 */
import ajax from './ajax';

//1、獲取swipe的圖片列表
export const reqSwipes = ()=>ajax(`/swipes`,);

//2、獲取所有病人信息列表
export const reqPatients = ()=>ajax(`/patients`);

//3、根據pid獲取病人信息
export const reqPatientByPid = (pid)=>ajax(`/patient`,{pid},"POST");