mockjs 使用简介

在前后端分离的开发模式中，数据需要通过 http 请求异步从服务器端获取，也就是前端开发需要依赖后端接口，如果不能时时保证数据获取通畅，就会造成开发阻塞。这时前端需要一种方式可以来模拟数据请求，从而更多的掌握主动权独立开发项目，mockjs 可以以无侵入的方式拦截 ajax 请求，通过模拟服务器端响应来返回数据

安装与引用

// node 安装
npm install mockjs

// 引入 mockjs 模块
import Mock from 'mockjs' 

基础用法

/**
 * @method Mock.mock(rurl, template) 
 * @param [String] curl 拦截的请求url
 * @param [Object] template 生成数据的模板
 */

Mock.mock('hello.php', {
    'list|1-5': [{
        name: '@name',
        email: '@email',
        createTime: '@date'
    }]
})

$.ajax({
    url: 'hello.php',
    dataType: 'json'
}).done(function(data, status, jqXHR) {
    $('
').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})
 
 
模块化引用
 
 
// 定义并导出 mock 模块
import Mock from 'mockjs';

export default Mock.mock('hello.php', {
    'list|1-5': [{
        'id|+1': 1,
        'email': '@EMAIL',
        'regexp3': /\d{5,10}/
    }]
});
 
 
//  引入定义好的模块
import data from './mock';

axios.get('hello.php')
  .then(function (response) {
    console.log(response);
  })
 
 
JSRUN
 
 
 
  
 Mock.mock(rurl, template) 方法表示拦截 ajax 请求 'hello.php'，通过模板生成模拟数据返回
 
  
 list|1-5 表示随机生成属性名为 list 的数据 1-5条， 管道符号 | 左侧表示属性名，右侧表示生成规则
 
  
 @name 表示随机生成 name 值， @ 表示占位符，引用的是 Mock.Random 中的方法
 
 
 
 
Mockjs 语法规范由数据模板定义规范和数据占位符定义规范组成，在官网的 示例文档 中提供了丰富的模板定义方法，可点击查看
 
 
mock server
 
 
Mockjs 实现的原理是对 XHR 对象的拦截，属于 js 拦截，并没有通过浏览器发出请求，所以一般会碰到以下问题。
 
 
 
  
虽然是无侵入式，如果要打包上线，需要把 mockjs 删除
 
  
无法在浏览器调试工具里查看请求链接和请求参数
 
  
无法调试反向代理，处理跨域问题
 
 
 
 
为了处理以上问题，引入集成了 mockjs 的 mock server工具 easy-mock，注册并登录 easy-mock 官网后，会有一个演示项目提供参考，参考演示项目可以轻松创建自己的项目，如下图
 
 
 
  
 
   
  
   
 
  
 
  

    hello.gif 
  
 
 
 
 
创建项目后可以基于当前项目创建请求接口，如下图，创建一个 url 为 \user的 get 请求，会生成接口为 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/user 的完整地址，点击 用户列表 可查看返回数据，由于 easy-mock 内部集成了 mockjs，所以在生成数据时可以采用mockjs数据模板来生成，把基础用法中的数据生成模板粘贴过来，可以生成相同数据
 
 
 
 
  
 
   
  
   
 
  
 
  

    user.gif 
  
 
 
 
 
 
 
设置代理解决跨域
 
 
浏览器限制跨域访问，所以要访问到接口数据，还需要解决跨域问题，通过 Nginx 解决跨域我在另外一片文章有讨论过，点击可以可查，下面主要介绍下通过 webpack-dev-server 设置代理
 
 
// 通过 ajax 请求 user 接口 
axios.get('/proxy/user')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

 
 
// webpack-dev-server 配置
devServer: {
    proxy: {
      '/proxy/*': {
          target: 'https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello',
          changeOrigin: true,
          pathRewrite: {
              '^/proxy': ''
          }
        }
    }
  }

 
 
假设本地请求的根路径为 http://localhost:8080，通过 ajax 请求 用户列表 的完整接口为 http://localhost:8080/proxy/user，webpack-dev-server 通过代理方式将请求转发到我们在 easy-mock 中定义的接口 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/proxy/user，此时接口地址中多了个代理标志 /proxy, 通过配置参数 pathRewrite: {'^/proxy': ' '} 将 /proxy 去掉即可。