mock.js +axios +vue 简单模拟后台接口

npm安装

npm install mockjs //安装mock
npm install axios //安装axios

mock 构造数据规则

语法规范
Mock.js 的语法规范包括两部分：

数据模板定义规范（Data Template Definition，DTD）
数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

注意：

属性名 和 生成规则 之间用竖线 | 分隔。
生成规则 是可选的。
生成规则 有 7 种格式：
1. 'name|min-max': value
2. 'name|count': value
3. 'name|min-max.dmin-dmax': value
4. 'name|min-max.dcount': value
5. 'name|count.dmin-dmax': value
6. 'name|count.dcount': value
7. 'name|+step': value
生成规则 的含义需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型

mock.js常用 api

Mock.mock()
Mock.mock(url, type, data) 根据数据模板生成模拟数据
url URL 字符串或 URL 正则拦截请求的地址
type 拦截Axios类型 GET、POST
template 可以是对象或字符串生成数据的模板

控制台验证 Mock代码示例

mock 示例代码

1111.png

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))

测试项目实例

目录结构

3330808.png

mock-user.js

export const mockUser = {
    login: {
      api: '/api/mock/getUserInfo',
      method: 'post',
      enabled: true,
      data:{
        userName:'hello shadow',
        nickName:'我是mock返回数据！！'
      }
    }
  }

mock.js

import {mockUser} from './mock-user'

const mockList = [
  mockUser,
  // 在这个列表下面添加对应的
]
// -----这里可以添加其他mock请求配置------
const apiMockConfig = {
  mocks:[],
  mockEnabled:function(path){
    var result = false;
    this.mocks.forEach(item=>{
      if (item.api == path) {
        result = item.enabled;
      }
    });
    return result;
  }
};
mockList.forEach(configs=>{
  Object.keys(configs).forEach(key=>{
    apiMockConfig.mocks.push(configs[key]);
  });
});
export default apiMockConfig;

api.js

import apiMockConfig from './mock/mock'
const axios = require('axios');
const baseUrl = "http://192.168.2.176:12306";
const Mock = require('mockjs');
    apiMockConfig.mocks.forEach(config=>{
        if  (config.enabled) {
            Mock.mock(baseUrl + config.api,config.method, ()=>{
                return {
                    msg: 'ok',
                    code: '0',
                    success: true,
                    data: config.data
                }
            });
        }
    });
    

    function createAxios(type){
        let timeout = 20000; //统一的超时时间
        var token = "123456789";
     
        let applicationHeaderPayload = {
            'Content-Type': 'application/json; charset=utf-8',
            'token':token,
            'Accept': '*/*'
        }
        let applicationHeader = {
            'Content-Type': 'application/x-www-form-urlencoded', 
            'token':token,
            'Accept': '*/*'
        }; 
        let args = {}; //配置参数
        let axiosInstance; //请求实力
        switch(type){
            case "payload" :
                args = {
                    timeout,
                    "headers": applicationHeaderPayload
                };
                break;
            case "formData" :
                args = {
                    timeout,
                    "headers" : applicationHeader
                };
                break;
            default :
                break;
        }
        axiosInstance = axios.create(args);

        axiosInstance.interceptors.request.use (function (config) { //请求拦截器
            console.log("baseUrl+config.url = "+baseUrl+config.url)
            config.url = baseUrl+config.url;
            return config;
        }, function (error) {
            console.log("request error")
            return Promise.reject(error);
        });

        axiosInstance.interceptors.response.use(function (response) { //返回拦截器
            console.log("response---"+JSON.stringify(response))
            return handleSuccess(response);
        }, function (data) {
            console.log("response error--"+data)
            return handleError(data);
        });
        return axiosInstance;
    }

    function handleSuccess(response){ //处理正常返回
       
        let code = response.data.code;
        console.log("handleSuccess code ---"+code)
        if(code == 0){
            return Promise.resolve(response.data);
        }else{
            return Promise.reject(response);
        }
    }
    function handleError(response){ //处理失败返回
        if (response && response.response && response.response.status==401) { 
            return Promise.reject(response);
        }
        console.error("handleError--"+response);
        return Promise.reject(response);
    }
    
    //payload块
    const payload = createAxios("payload");
    //formdata块
    const formdata = createAxios("formData");
    
    const getUserInfo = () => {
        return payload.post("/api/mock/getUserInfo");
    }
    
    //todo 请求参数
    export default {
        payload,
        formdata,
        getUserInfo,
    }

vue获取接口数据

import api from "./api/apis"
  mockTest() {
        console.log("hello，mock测试")
        api.getUserInfo().then((res) => {
          console.log("获取成功---" + JSON.stringify(res))
          this.userInfo = res.data
        }).catch((e) => {
          console.log("获取失败---" + JSON.stringify(e))
        })
      }

返回数据

获取成功---{"msg":"ok","code":"0","success":true,"data":{"userName":"hello shadow","nickName":"我是mock返回数据！！"}}

22220.png

示例项目地址

webDemo