前端使用mockjs模拟接口返回数据

这里开始都是通过mockjs模拟请求返回数据，返回方式这里说自己遇到的两种，一是mock模拟产生随机数据返回，二是读取本地json文件返回。

一、初始化好vue项目之后，执行命令安装依赖包。
初始化项目 vue init webpack mockjs
安装依赖包 npm install mockjs --save-dev
安装依赖包 npm install axios --save

二、封装axios，文件为request.js，根据自己的需要去修改里面的代码。

import axios from 'axios';
import Vue from 'vue';
// 环境的切换
if (process.env.NODE_ENV === 'development') { // 开发环境
  axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV === 'debug') { // debug
  axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV === 'production') { // 线上
  axios.defaults.baseURL = '/main';
}
// 请求超时时间
axios.defaults.timeout = 300000;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
// 请求拦截器
axios.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    return Promise.error(error);
  });
// 响应拦截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      if (response.data.returnCode < 0) {
        Vue.prototype.$message({
          message: response.data.returnMsg,
          type: 'warning'
        });
        return Promise.reject(response);
      } else {
        return Promise.resolve(response);
      }
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是200的情况
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 404请求不存在
        case 404:
          Vue.prototype.$message({
            message: '网络请求不存在',
            type: 'warning'
          });
          break;
        default:
          Vue.prototype.$message({
            message: error.response.data.returnMsg,
            type: 'warning'
          });
      }
    } else {
      Vue.prototype.$message({
        message: '网络请求超时！',
        type: 'warning'
      });
    }
    return Promise.reject(error);
  }
);
export default {
  /**
   * get方法，对应get请求
   * @param {String} url [请求的url地址]
   * @param {Object} params [请求时携带的参数]
   * @param {Boolean} loadingFlag [是否需要显示遮罩层]
   * @param {Object} headers  请求相关参数设置
   */
  get(url, params, loadingFlag, headers) {
    headers = headers || {};
    let loadingInstance = '';
    /* 如果 loadingFlag 为对象将赋值给 requestObj */
    if (typeof loadingFlag == 'object') {
      headers = loadingFlag;
      loadingFlag = false;
    }
    if (loadingFlag) {
      loadingInstance = Vue.prototype.$loading({
        lock: true,
        text: '请求处理中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    }
    return new Promise((resolve, reject) => {
      axios.get(url, {
          params: params,
          headers: headers
        })
        .then(res => {
          if (loadingInstance != '') {
            loadingInstance.close();
          }
          resolve(res.data);
        })
        .catch(err => {
          if (loadingInstance != '') {
            loadingInstance.close();
          }
          reject(err.data);
        });
    });
  },
  /**
   * post方法，对应post请求
   * @param {String} url [请求的url地址]
   * @param {Object} params [请求时携带的参数]
   * @param {Boolean} loadingFlag [是否需要显示遮罩层]
   * @param {Object} headers  请求相关参数设置
   */
  post(url, params, loadingFlag, headers) {
    headers = headers || {};
    let loadingInstance = '';
    /* 如果 loadingFlag 为对象将赋值给 requestObj */
    if (typeof loadingFlag == 'object') {
      headers = loadingFlag;
      loadingFlag = false;
    }
    if (loadingFlag) {
      loadingInstance = Vue.prototype.$loading({
        lock: true,
        text: '请求处理中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    }
    return new Promise((resolve, reject) => {
      axios.post(url, params, {
          headers: headers
        })
        .then(res => {
          if (loadingInstance != '') {
            loadingInstance.close();
          }
          resolve(res.data);
        })
        .catch(err => {
          if (loadingInstance != '') {
            loadingInstance.close();
          }
          reject(err.data);
        });
    });
  }
};

三、前面步骤都是一样的，后面开始mock数据并使用。

3.1 先说第一种直接mock产生随机数据并使用。

① 生成mock.js文件，具体的mock使用请参照官方文档https://github.com/nuysoft/Mock/wiki/Getting-Started，代码如下：

// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// 获取 mock.Random 对象
const data = Mock.mock({
  "success": true,
  "message": "操作成功！",
  "code": 0,
  "result|10": [{  // 生成10条数据
    "id|+1": 1,   // id递增1
    "roleName|1": ["测试角色1", "测试角色2", "测试角色3", "测试角色4", "测试角色5"],  // 数组内随机一个值
    "roleCode": "100010",
    "description": null,
    "createBy": "jeecg",
    "createTime": "2019-10-30 19:50:56",
    "updateBy": null,
    "updateTime": null
  }],
  "timestamp": 1573456699794
});
// Mock.mock( url, post/get , 返回的数据)；
/** 登录 */
Mock.mock('/api/data', 'post', data)

② 在main.js内加入以下代码引入mock.js，路径根据自己的文件目录调整:

require('./mock.js')

③ 在组件中引用并发出请求：

在组件中引用 import api from '@/axios/request';
在组件中发出请求

api.post('/api/data', {}).then(data => {
	console.log(data);
 }).catch(data => {
 });

至此已经可以成功打印你mock产生的数据。

3.2 第二种模拟数据读取json文件作为返回数据。
① 准备json文件，data.json。

{
  "returnCode": 0,
  "returnMsg": "操作成功",
  "data": [{
      "name": "一一",
      "id": 1
    }]
}

② 模拟接口并读取数据。
文件mock.js:

扫描二维码关注公众号，回复： 15667876 查看本文章

const Mock = require('mockjs'); // mockjs 导入依赖模块
const util = require('./util'); // 自定义工具模块
// 返回一个函数
module.exports = function (app) {
  // 监听http请求
  app.post('/api/data', function (rep, res) {
      console.log('-----');
    // 每次响应请求时读取mock data的json文件
    // util.getJsonFile方法定义了如何读取json文件并解析成数据对象
    let json = util.getJsonFile('./data/data.json');
    // 将json传入 Mock.mock 方法中，生成的数据返回给浏览器
    res.json(Mock.mock(json));
  });
};

文件util.js:

const fs = require('fs'); // 引入文件系统模块
const path = require('path'); // 引入path模块

module.exports = {
  // 读取json文件
  getJsonFile: function (filePath) {
    // 读取指定json文件
    let json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8');
    // 解析并返回
    return JSON.parse(json);
  }
};

③ 在**webpack.dev.conf.js**文件中中加入代码，路径根据自己目录作调整。在这里插入图片描述
④ 在组件中引用并请求。

在组件中引用 import api from '@/axios/request';
在组件中发出请求

api.post('/api/data', {}).then(data => {
	console.log(data);
 }).catch(data => {
 });

至此已经可以成功打印data.json中数据。

前端使用mockjs模拟接口返回数据

猜你喜欢