欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-10 10:47:26
...

这里开始都是通过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:

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**文件中中加入代码,路径根据自己目录作调整。前端使用mockjs模拟接口返回数据
④ 在组件中引用并请求。

  • 在组件中引用 import api from '@/axios/request';
  • 在组件中发出请求
api.post('/api/data', {}).then(data => {
	console.log(data);
 }).catch(data => {
 });

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

相关标签: vue json