mockjs+vue使用小记 - 要一份黄焖鸡

mockjs+vue使用小记

使用mockjs唯一目的是快速完成前端项目，前端不需要再等后端数据，使用mock，来模拟吧~

它可以拦截ajax请求，并模拟返回你需要的数据。这才是真正的前后端分离啊

好了下面开始上实战了..

先安装

npm install mockjs --save-dev

新建data.js（模拟数据）

import Mock from \'mockjs\';
const data = Mock.mock({
   "data|0-3": [
    "浙A12222",
  ]
});
export {data}

新建mock.js引入数据并拦截请求

import Mock from \'mockjs\';
import {data} from \'./data/data\';
Mock.mock(\'/do\', \'post\', data);

 

建api.js封装axios请求

import axios from \'axios\'
import vue from \'vue\'
axios.defaults.headers = {
"Content-Type": "application/x-www-form-urlencoded"
}
function fetch(url, params) {
  return new Promise((resolve, reject) => {
      
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      })
  })
}
 
export default {
      getplate(url, params) {
            return fetch(url, params);
      },
}

然后在vue组件中调用

api.getplate(\'/do\', content)                    
  .then(res => {                    
   let allplate = res.data;
})

注意组建中请求地址应该与mock.js中地址相同。

 

 

大家还可以看下axios-mock-adapter，讲axios和vue结合，应该更好用一点。