推薦一個在線接口Mock工具fastmock

AdolphLWQ 發布于2019-08-26 13:29 / 3178人閱讀

摘要：后端在層造假數據返回給前端。上面的方式中，不管哪一種方式，都會要求開發人員寫一些跟項目本無任何關聯的代碼，第一個和第二個方式還會需要前端項目在本地引入不必要的文件。等到后端服務開發完成，前端再將請求地址替換回來進行聯調測試即可。

如果想直接進入實戰請猛戳這里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 短信接口推薦

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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