mockjs+vue使用小记

Posted 2020-10-31 要一份黄焖鸡

使用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结合，应该更好用一点。