推荐一个在线接口Mock工具fastmock

AdolphLWQ 发布于2019-08-26 13:29 / 3103人阅读

摘要：后端在层造假数据返回给前端。上面的方式中，不管哪一种方式，都会要求开发人员写一些跟项目本无任何关联的代码，第一个和第二个方式还会需要前端项目在本地引入不必要的文件。等到后端服务开发完成，前端再将请求地址替换回来进行联调测试即可。

如果想直接进入实战请猛戳这里fastmock线上地址www.fastmock.site

fastmock可以让你在没有后端程序的情况下能真实地在线模拟ajax请求，你可以用fatmock实现项目初期纯前端的效果演示，也可以用fastmock实现开发中的数据模拟从而实现前后端分离。如下面的接口

模拟一个用户列表https://www.fastmock.site/moc...

模拟各种特殊类型的数据https://www.fastmock.site/moc...

您可以直接在浏览器打开上面的链接或者用ajax请求查看返回的数据

在使用fastmock之前，你的团队实现数据模拟可能是下面的方案中的一种或者多种

本地手写数据模拟，在前端代码中产生一大堆的mock代码。

利用mockjs或者canjs的can-fixture实现ajax拦截，本地配置必要的json规则。

后端在Controller层造假数据返回给前端。

上面的方式中，不管哪一种方式，都会要求开发人员写一些跟项目本无任何关联的代码，第一个和第二个方式还会需要前端项目在本地引入不必要的js文件。比如下面的mock数据

// 产品配置
  {
    url: "/pms/product/list",
    on: true,
    type: "get",
    resp: Mock.mock({
      "body": {
        "currentPage": 1,
        "isMore": 0,
        "pageSize": 15,
        "resultList|10": [
          {
            "productNo": "11111",
            "productName|1": ["产品名称1", "产品名称2", "产品名称3", "产品名称4", "产品名称5"],
            "productType|1": ["1", "2", "3", "4", "5"],
            "status|1": ["1", "2"],
            "gmtCreate": "@DATETIME("yyyy-MM-dd HH:mm:ss")",
            "gmtModified": "@now("yyyy-MM-dd HH:mm:ss")",
            "createUserCode": "@name"
          }
        ],
        "startIndex": 0,
        "totalNum": 100,
        "totalPage": 1
      },
      "reCode": "0000",
      "reMsg": "成功",
      "success": true
    })
  },
  // 产品配置-贷款材料配置
  {
    url: "/pms/cfgLoanDoc/list",
    on: true,
    resp: Mock.mock({
      "body": {
        "currentPage": 1,
        "isMore": 0,
        "pageSize": 15,
        "resultList|10": [
          {
            "loanDocCode|+1": 1,
            "loanDocName": /[测试字体]{4,30}/
          }
        ],
        "startIndex": 0,
        "totalNum": 100,
        "totalPage": 1
      },
      "reCode": "0000",
      "reMsg": "成功",
      "success": true
    })
  }

上面的代码为mockjs的事例代码，更多mockjs相关资料参考链接mockjs文档

为此，我们将mock层独立出来，通过中间服务的形式在前端和后端服务之前建立一道围栏，使用fastmock，前端只需要修改自己的XHR请求地址，后端只需要在开发前和前端约定好接口文档即可。等到后端服务开发完成，前端再将XHR请求地址替换回来进行联调测试即可。

tip:当然，你也可以通过npm script不同命令加载不同配置文件的形式切换你的XHR地址，这里不作详细介绍。

还是不了解fastmock？让我们跟着教程一探究竟吧了解并开始使用fastmock

云服务器 GPU云服务器在线测试接口工具在线接口测试工具 fastmock 短信接口推荐

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

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

VueCli3.0中集成MockApi

摘要：缺点需要增加本地的代码量，以及需要配置实现拦截优点数据通过会更丰富。缺点修改内容沟通成本高，跟后端扯皮利用去模拟优点可控内容以及实现动态。三本地周边知识本地的思想就是利用完成。注意接口的和自己的接口不要冲突。 VueCli3.0中集成MockApi 一：使用场景哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？没办法啊，资本主义的XX嘴脸啊来吧，技术评审我俩把接口...

刘玉平 2019-08-26 13:59 评论0 收藏0
前端开发如何做好本地接口模拟

摘要：前端开发如何做好本地接口模拟之前有写过一篇本地化接口模拟前后端并行开发，讲到过本地接口模拟，但不太细致。有哪些途径本地接口模拟一般分为工具层面和代码层面。因为本地接口模拟功能主要是针对的返回值为格式的异步请求，所以这种方式主要用文件。前端开发如何做好本地接口模拟之前有写过一篇本地化接口模拟、前后端并行开发，讲到过本地接口模拟，但不太细致。这次细细的说说本地接口模拟。 1. 有什么...

ACb0y 2019-08-23 14:31 评论0 收藏0
浅谈前端mock

摘要：引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用方式来避免这个问题。可能会涉及到门技术，分别是服务端技术随机生成特定格式数据的技术请求转发请求拦截。引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用mock方式来避免这个问题。本人参考了大量文章，结合自己的经验，给出自己在mock上的一些理解。 1. 原理何为mock,我认为mock主要就是通...

elina 2019-08-23 15:24 评论0 收藏0
ApiPost与PostMan，你可以任选一款不错的接口管理工具

摘要：同时还有对应的返回值字段描述通过这个方法，可以随时随地的测试以及更新文档，简直是后端小伙伴的福音但是，不知道小伙伴们有没有发现一个问题，就是在生成接口文档的时候，还是需要自己填写参数描述。对于测试同学来说，这是一个非常不错的功能。我们都知道在一个团队中是由很多角色组成的，例如：业务、产品、...

crossoverJie 2021-09-29 09:34 评论0 收藏0