前后端真正分离，网线被拔，也能请求数据（mock.js）

高璐发布于2019-05-23 13:53 / 3143人阅读

摘要：六使用扩展很多时候，服务器都有定义固定的返回值，如为则表示该请求有效。

做了一回标题党（别吐槽，说的大实话，真的可以不用后台，就能拿数据，快！，向下看...）一、mock.js 是什么？

官网机票

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

二、安装方式

JS_CDN:

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

踩坑注意：

mock.js 的拦截地址，需要与请求地址保持一直，不然无法拦截请求

mock.js 拦截的请求，不会出现在 network 请求列表中。

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

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

超融合服务器混合云前后端分离前后端分离开发 js前后端分离框架前后端不分离 jsp

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6966.html

前后端开发分离之Mock

摘要：为了使得前端减轻对后端的依赖，在后端功能尚未实现的情况下保证前端进度的开发，我们一般会手动进行一些数据模拟，即假数据。覆盖拦截请求，目前内置支持。序有时候我们开发一般会分为前后端，前端负责数据显示和UI交互，后端负责数据IO等等。因此造成前端对后端有严重依赖，使得前端的开发进度普遍滞后于后端。为了使得前端减轻对后端的依赖，在后端功能尚未实现的情况下保证前端进度的开发，我们一般会手...

phpmatt 2019-08-21 17:49 评论0 收藏0
前后端开发分离之Mock

摘要：为了使得前端减轻对后端的依赖，在后端功能尚未实现的情况下保证前端进度的开发，我们一般会手动进行一些数据模拟，即假数据。覆盖拦截请求，目前内置支持。序有时候我们开发一般会分为前后端，前端负责数据显示和UI交互，后端负责数据IO等等。因此造成前端对后端有严重依赖，使得前端的开发进度普遍滞后于后端。为了使得前端减轻对后端的依赖，在后端功能尚未实现的情况下保证前端进度的开发，我们一般会手...

tyheist 2019-05-29 17:03 评论0 收藏0
前后分离的总结

摘要：如何去解决这些问题前后端分离大部分的互联网公司都分成了前端团队和后端团队。方案一采用架构业界很多公司会采用，单页应用的架构，这种架构是天然的前后端分离的。方案二淘宝的大前端方案中途岛上图是淘宝基于的前后端分离分层，以及的职责范围。我们遇到了什么问题？ 1.前端无法调试后端未完成的 API：如果后端同学还没有完成 API 开发，那么前端同学就不能对这个 API 进行开发。之前我们都是在...

enrecul101 2019-08-26 11:56 评论0 收藏0
丁香园开源接口管理系统

摘要：致力于解决前后端开发协作过程中出现的各类问题，提高开发效率，对接口做统一管理，同时也能为后续的迭代维护提供更便捷的方式。丁香园也将努力持续的做技术输出产品输出，为开源社区做出自己的一份力量。 API Mocker 先贴上项目地址：DXY-F2E/api-mocker 随着web发展，前后端分离的演进，网页的交互变的越来越复杂。在项目开发过程中，前后端并行开发时，在涉及到接口的部分，总是...

mingde 2019-08-22 11:08 评论0 收藏0
用gulp+mock实现前后端分离

摘要：当然需要的工具不只有这些，其他的一些可选工具还有文件压缩压缩时用到的文件重命名检查一般编辑器自带校验提示工具等等，具体根据项目需要安装。 gulp 前端自动化构建工具需要配置nodejs环境, 利用npm安装全局gulp,安装后可以输入gulp指令。 npm install gulp -g 创建项目目录、初始化npm包、gulp npm init gulp init 下载gul...

dailybird 2019-08-20 18:08 评论0 收藏0