Mockjs基本使用

node

# npm安装
npm install mockjs
# yarn安装 推荐
yarn add mockjs

使用

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

vue

使用步骤

• 定义数据结构
• 设置mock服务器
• 封装 axios
• 使用

定义数据结构

定义好要模拟数据的基本json结构，结构中可以使用mock提供的语法随机输出数据

# banners.json
[
    {
        "id":"1",
        "imgUrl":"/images/banner1.jpg"
    },
    {
        "id":"2",
        "imgUrl":"/images/banner2.jpg"
    },
    {
        "id":"3",
        "imgUrl":"/images/banner3.jpg"
    },
    {
        "id":"4",
        "imgUrl":"/images/banner4.jpg"
    }
]

设置mock服务器

让mock模拟出接口，axios请求往模拟出的接口里发

// mockServer
import Mock from 'mockjs';
import banners from  './banners.json'; // 接口返回的数据

// 设置接口请求路径
Mock.mock('/mock/banners',{ 
    code:200,
    data:banners
});

封装 axios

封装好发往mock服务器的请求拦截器和响应拦截器

// mockAjax.js
import axios from "axios";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

// 配置进度条
NProgress.configure({ showSpinner: false });

// 创建一个Axios实例
const service = axios.create({
  baseURL: '/mock', // 设置基础url
  timeout: 30000,
});

// 设置请求拦截器，添加基础路径
service.interceptors.request.use((config) => {
  // 请求进度条
  NProgress.start();
  return config;
});
// 设置响应拦截器，处理返回数据
service.interceptors.response.use(
  (response) => {
    // 隐藏进度条
    NProgress.done();
    if (response.data.code === 200) {
      return response.data;
    } else {
      return Promise.reject(response.message);
    }
  },
  (error) => {
    NProgress.done();
    // console.log(error);
    alert(`请求出错${error.message}`||`未知错误`);
    return Promise.reject(error);
  }
);
// 将实例暴露出去
export default service;

使用

import mockAjax from './mockAjax';

export const reqBanners = () => mockAjax('/banners');

requBannners().then(
	value => value,
    error => error
);