前后端真正分离,网线被拔,也能请求数据(mock.js)

做了一回标题党 (别吐槽,说的大实话,真的可以不用后台,就能拿数据,快!,向下看...)

一、mock.js 是什么?

官网机票 

简单的描述一下, mock.js 可以在后台接口没有更新时,来本地模拟数据达到测试界面功能的一个很方便的工具库,mock.js 可以拦截ajax 请求, 重指向并返回你定义的模板数据。更多细节,可查看官网。


二、安装方式

    JS_CDN:  

<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>复制代码

   Yarn:

yarn add mockjs复制代码

  其它安装方式可看官网


三、简易使用教程

Mock.mock()

@parmas rul {string} 拦截请求url 地址,需要与请求地址保持一直,不然无法拦截请求
@params rtype {string} 请求方式,如果不传该参数,则post/get请求均可获得匹配数据,
                       注意该字段需要全部小写,否则无法匹配。
@params template {*} 默认数据 (最终请求返回结果)
@params function {function} options 为请求的数据,可在下面查看示例,这里不解释了,
                            该函数结束需要return ,return 数据则为最终请求结果,
                            可根据options的参数,处理不同的逻辑复制代码

1. Mock.mock( template )

2. Mock.mock( rurl, template )

3. Mock.mock( rurl, function( options ) )

4. Mock.mock( rurl, rtype, template )

5. Mock.mock( rurl, rtype, function( options ) )

列举基本的使用,更多细节描述,可查看官网。 


Mock.setup()

Mock.setup({
    timeout: 400 // 设置超时时间
})
Mock.setup({
    timeout: '300 - 6000' // 区间随机超时时间
})
目前官网列举的就一个参数 timout (ajax 的请求超时时间)
复制代码


  • Mock.Random (该功能较多,只列举部分常用的) 

  var Random = Mock.Random //声明随机函数对象var randomEmail = Random.email() //随机生成邮箱
var randomBoolean = Random.boolean() //随机生成布尔值
var randomBase64Img = Random.dataImage() //随机生成图片BASE 64 数据
var randomUrl = Random.url() //随机生成Url 地址
var randomIp = Random.ip() //随机生成ip 地址
var randomColor = Random.color() //随机生成布尔值
/**
 @params size {String} 需要生成的图片尺寸 ('600 X 300')
 @params background {String} 生成图片的背景色 默认白色 (RBG)
 @params text {String} 生成图片的中间文字 默认为图片尺寸
 @params format {Sting} 生成图片的格式 默认为png(可选:jpg/png/gif)
*/
Random.image()
Random.image( size )
Random.image( size, background )
Random.image( size, background, text )
Random.image( size, background, foreground, text )
Random.image( size, background, foreground, format, text )

官方的随机支持功能很强大,也很全, 部分随机函数可支持传参,可定义适合场景的随机数据,因为
功能太多了,无法一一列举,可到官网寻找合适自己的。 复制代码

官方支持随机数据:复制代码


四、js 中的示例

let random = Mock.Random // 随机函数

// 测试 get
Mock.mock('/get','get',{id: random.id(), name: 'GET', email: random.email()})

// 测试 post
Mock.mock('/post','post',{id: random.id(), name: 'POST', email: random.email()})

// 测试自定义模板
Mock.mock('/template','post', function (option) {
  console.log('我是自定义函数请求参数:', option)
  let data = {id: 1, name: 'Template',image: random.image()}
  return data
})

  testRequest('/get', 'GET') // 测试Get 请求
  testRequest('/post', 'POST') // 测试Post 请求
  testRequest('/template', 'POST', {key: 'Test Params'}) // 测试Post 请求

  /**
   * @Description: Mock 测试请求
   */
  function testRequest (url, type,data = {}) {
    let baseUrl = ''
    $.ajax({
      url: baseUrl + url,
      type: type,
      data: data,
      dataType: 'json',
      success: res => {
        console.log(res)
      },
    })
  }复制代码


五、Vue 中的使用

==> mock/index.js 

import Mock from 'mockjs'

// 测试 get
Mock.mock('/get','get',{id: 1, name: 'GET'})

// 测试 post
Mock.mock('/post','post',{id: 1, name: 'POST'})

// 测试自定义模板
Mock.mock('/template','post', function (option) {
  console.log('我是自定义函数请求参数:', option)
  let data = {id: 1, name: 'Template'}
  return data
})


==> main.js  // 在main.js 的代码里引用模拟数据文件
*****
import './mock/index.js'
*****

import axios form 'axios'

// 测试get 请求
axios.get('/get').then(res => { console.log(res) }
// 测试post 请求
axios.post('/post').then(res => { console.log(res) }
// 测试自定义模板请求
axios.post('/post', {key: 'Test Params'}).then(res => { console.log(res) }
复制代码

踩坑注意:

  1.  mock.js 的拦截地址,需要与请求地址保持一直,不然无法拦截请求
  2.  mock.js 拦截的请求,不会出现在 network 请求列表中。
  3.  mock.js  Mock.mock(..rtype)  rtype参数注意该字段需要全部小写,否则无法匹配。


六、使用扩展

很多时候,服务器都有定义固定的返回值,如code 为0 则表示该请求有效。那么我们可以封装一个函数,每次返回数据前都调用函数,来格式化服务器固定的返回模板。

/**
 * @Description: 格式化mock 返回数据
 * @param data {*}  请求数据结果
 * @param code {number} 请求状态值
 * @param msg {Sting} 请求状态消息
*/
function formattingData (data, code = 0,msg) {
  return {
    data: data,
    code: code,
    msg: msg || (code === 0 ? '请求成功' : '请求失败')
  }
}

 // 测试 get
 Mock.mock('/get','get',formattingData({id: 1, name: 'GET'}))
 // 测试 get 请求失败
 Mock.mock('/get/err','get',formattingData(undefined,1))复制代码



对吧,没骗你吧(手动滑稽),如果觉得可以,请把你敲键盘的速度给我点个赞吧。