可視化mockjs - JavaShuo

前言

Mock就是用一個虛擬的對象（Mock 對象）來建立以便測試的測試方法。html

隨着WEB技術的發展，先後端分離架構變得廣泛起來，可是問題也隨之而來，文檔零散、不規範。而且常常碰到例如參數的新增、變更。這就致使了後端工程師須要耗費大量的時間維護接口文檔
前端的開發工做依賴於後端提供的接口數據，可是後端接口每每沒有那麼快就能夠開發完成。這就致使了前端在「等」數據。
上述的狀況就會致使工做效率低下，溝通成本增長。接口管理平臺的需求就日趨強烈

因此這也促進了mock的出現和發展前端

說說本身使用mock的變化

1.原地模擬數據

直接在頁面data裏面聲明或者外部文件聲明而後引入 vue

優勢：這樣相應頁面就會有佔位數據，有個直觀的感受git

缺點：數據寫死，不會變化，也不是從接口獲取後期待對接的工做量仍是很高，並且前期成本也不低github

2.接口聲明return數據

這裏其實和第一種沒什麼區別，在接口定義的地方返回數據。只是起到佔位的做用，非要和第一個對比，只是增長了接口簡單聲明，爲後面對接少了一點點工做量，其實後面對接，仍是有不少工做要作。json

3.使用mock.js

其實較早接觸mock.js 最近才知道YApi 直接模擬相應接口返回，接口名也能夠自定義，數據類型也能夠自定義隨意改動等等好處在下一步慢慢體會直接使用引入mockjs而後使用後端

const ResultUtil = require('../_util/resultUtil');
const Mock = require('mockjs');
// 公告管理
const dataList = Mock.mock({
  'rows|12': [
    {
      demoId: '@id',
      demoTitle: '@ctitle(3,10)',
      demoCnte: '<h2 style="text-align: center;">公告</h2><p>測試測試，內容內容。</p>',
      'demoMan|1': ['張三', '李四'],
      demoTime: '@datetime',
      'demoStatusText|1': ['生效', '未生效'],
      'demoStatus|1': ['1', '2'],

      'demoRole|1': ['1', '2'],
      'demoRoleText|1': ['專家', '社會監督員'],
      'demoMethod|1': ['1', '2'],
      'demoMethodText|1': ['PC', '微信'],
      demoFileList: [
        {
          archiveFor: 'xls',
          archiveId: 107,
          archiveName: '任務管理病案審覈專家意見模板.xls',
          bizId: 'ZJYY0001',
          cldArchiveId: '557',
          crteTime: 1606443355672,
          crterId: '0',
          crterName: '超級管理員',
          fileBase64: null,
          matId: '1303',
          rid: '557',
          updtTime: 1606443355672,
          valiFlag: null,
        },
      ],
    },
  ],
});
// 操做歷史
const hisList = Mock.mock({
  'rows|32': [
    {
      hisId: '@id',
      hisResult: '@ctitle(3,40)',
      'hisName|1': ['張三', '李四'],
      hisTime: '@datetime',
      'hisTypeStatusText|1': ['生效', '未生效'],
      'hisTypeStatus|1': ['1', '2'],
      'opterRoleText|1': ['專家', '社會監督員'],
    },
  ],
});

module.exports = {
  // 查詢列表
  'GET /demo/getList 500': ({ query }) => {
    const { pageNo = 1, pageSize = 10 } = query;
    const dataListItems = dataList.rows;
    const pageData = ResultUtil.pagination(pageNo, pageSize, dataListItems);
    return ResultUtil.pageSuccess(pageData, dataListItems.length);
  },
  // 查詢詳情
  'GET /demo/detail 500': ({ query }) => {
    const { demoId = '' } = query;
    const dataListItems = dataList.rows;
    const index = dataListItems.findIndex((item) => item.demoId === demoId);
    return ResultUtil.success(dataListItems[index !== -1 ? index : 0]);
  },
  //   查詢歷史記錄
  'GET /demo/getHistory 500': ({ query }) => {
    const { pageNo = 1, pageSize = 10 } = query;
    const dataListItems = hisList.rows;
    const pageData = ResultUtil.pagination(pageNo, pageSize, dataListItems);
    return ResultUtil.pageSuccess(pageData, dataListItems.length);
  },
};

複製代碼

這樣的話在項目中就能夠像調用接口而後去模擬隨機生成數組，mockjs很強大不少api我也沒搞懂，具體詳情官網奉上 mock官方文檔和項目地址api

這樣的作法也是我以前的作法我在使用的時候就在想能不能更簡單的去配置相似rap2或者easy-mock大搜車這樣可視化操做。若是你是團隊多人我也建議在這樣的網站上拉個團隊建個倉庫多人協調工做數組

那我我的玩玩接下來介紹本文重點-一個本地化的可視化配置的mock項目瀏覽器

項目介紹

一個基於mockjs、vue二、koa實現一個本地化的可視化配置的服務項目(本文大篇幅介紹，也是本文最想表達的項目詳情)

在線項目地址

在線mock界面地址

PS:這裏臨時加點內容： 不少人說在線新增成功後接口會報錯這是由於服務慢了一步，因此須要刷新一下頁面。那我這裏的建議是你本地把server文件的項目安裝依賴而後本地跑起來，界面右上角換成你本地跑起來的服務地址，這樣體驗更佳(還沒想到這個解決辦法大佬們要是知道能夠告訴我一下我嘗試一下)。

服務接口地址http://1.14.164.222:6868+模塊名+接口名(如：http://1.14.164.222.cn:6868/user/test2) user模塊下test2接口配置：在線測試：

瀏覽器直接訪問：

源碼地址：

歡迎star！謝謝star！

PS:我這服務器只供在線小測試和練手使用(隨時可能關閉)

1.項目結構

一個page是ui界面的項目一個server是本地接口服務項目

2.項目運行

首先page和server都要安裝依賴先把服務跑起來而後再跑page

// 命令1
cd page
yarn 
yarn run serve
// 命令2
cd server
yarn 
yarn run serve

複製代碼

3.項目使用

這是跑起來的ui界面你在這能夠去添加各類模塊和接口，而後自定義返回類型添加成功能夠直接瀏覽器測試或者點測試接口也能夠在項目中使用注意點：若是你接口有參數之類是要相應填寫的

使用的話知道操做後就特別的流暢方便一開始上手可能須要摸清一下用法

4.server服務項目重點

簡單說說server文件(服務)的項目

運行

yarn install: 安裝依賴
yarn serve: 運行項目

自定義 mock 口訪問(用於項目開發前端模擬接口使用)

本地項目運行成功後，接口訪問格式爲本地 ip 或者localhost+ 端口(統一爲 6868)+ 所屬模塊的接口前綴(pathName)+ 所訪問接口的接口地址(url)

例如，訪問接口前綴爲 user 的模塊下的 add 接口，訪問地址以下：

http://localhost:6868/user/add
複製代碼

UI 界面操做接口(用於 UI 界面操做)

相關接口可見接口文檔.md 文件，接口訪問格式爲本地 ip 或者localhost+ 端口(統一爲 6868)+ 接口名稱(如‘/section/createSection’)

例如，訪問建立模塊接口，訪問地址以下：

http://localhost:6868/section/createSection
複製代碼

主要目錄結構說明

├── public                --存放接口生成的靜態數據
├── README.md             --項目說明文件
├── 接口文檔.md             --接口說明文件
├── 接口測試用例.md         --接口測試用例說明文件
├── index.ts              --服務啓動文件
├── logger.ts             --日誌處理文件
├── server.ts             --服務主要處理文件
├── src                   --項目代碼目錄
├──── api                 --路由相關處理目錄
├──── config               --環境配置目錄
├──── controller          --接口參數校驗目錄
├──── enum                --常量目錄
├──── service             --接口具體操做處理目錄
├──── types               --相關參數的 interface 定義 目錄
├──── utils               --工具方法目錄
├──── validate            --接口參數校驗方法目錄
複製代碼

5.主要實現邏輯

分爲模塊相關接口和模塊下接口相關操做的接口

模塊相關接口實現

新增模塊： public/sectionList 下新建以 pathName 命名的 json 文件（如下簡稱「模塊 json 文件」），寫入提交的模塊相關信息；同時 public/下新建以 pathName 命名的文件夾（如下簡稱「模塊接口文件夾」），用以存放該模塊下的接口；
修改模塊：修改模塊 json 文件，對比舊的 pathName，如不同，須要將模塊 json 文件重命名以及模塊接口文件夾以新的 pathName 重命名；
獲取模塊詳情：找到模塊 json 文件，讀取文件內容；
刪除模塊：刪除模塊 json 文件和模塊接口文件夾(文件夾下的全部文件也需刪除)；
獲取帶分頁的模塊列表：獲取 public/sectionList 文件夾下的全部 json 文件個數及內容，拼接爲帶 list 和 total 的對象返回。

接口相關接口實現

新增接口：根據 pathName 找到對應的模塊接口文件夾，建立以 url 命名的 json 文件（如下簡稱「接口 json 文件」），寫入提交的接口相關信息；
修改接口：修改接口 json 文件，對比舊的 url，如不同，須要將接口 json 文件以新的 url 重命名；
獲取接口詳情：找到接口 json 文件，讀取文件內容；
刪除接口：刪除接口 json 文件；
獲取帶分頁的接口列表：獲取模塊接口文件夾下的全部 json 文件個數及內容，拼接爲帶 list 和 total 的對象返回。

自定義 mock 接口實現

讀取接口 json 文件數據，獲取請求參數和響應內容參數。第一步，校驗請求的必填參數是否有提交，其次校驗提交的參數類型是否正確。第二步，在第一步成功的基礎上，對響應內容的數據進行處理，處理爲 mock 可接收的對象，而後經過 mock，模擬數據返回。

6.serve接口文檔

server的幾個接口是重點好比增長模塊增長接口刪除接口等等因此放出一些接口文檔

(1) 接口返回成功示例

{
  success: true  // 主要經過這個字段去判斷成功或者失敗
  message: "新增成功"
  data: {list: [,…], total: 2}
  code: 200
}
複製代碼

(2) 接口返回失敗示例

{
  success: false
  data: null
  message: "child "url" fails because ["url" is required]"
  code: 400
}
複製代碼

新增模塊接口 post 方式 /section/createSection

{
  "name": "模塊1", // 模塊名稱-必填
  "pathName": "user", // 建立的文件夾名稱以及調用接口須要加的前綴-必填且只能是英文(頁面就叫接口前綴吧),每一個模塊的pathName惟一
  "description": "模塊介紹" // 接口描述可選
}
複製代碼

詳情模塊接口 post 方式 /section/getSectionDetail

{
  "pathName": "user" // pathName-必填
}
複製代碼

更新模塊接口 post 方式 /section/updateSection

{
  "id": 123, // id-必填
  "name": "模塊1", // 模塊名稱-必填
  "pathName": "user", // 必填
  "description": "模塊介紹" // 接口描述可選
}
複製代碼

刪除模塊接口 post 方式 /section/deleteSection

{
  "pathName": "user" // pathName-必填
}
複製代碼

獲取模塊列表 post 方式 /section/getSectionList

{
  "page": 1, // 當前頁數可選
  "size": 2, // 每頁顯示條數可選
  "isPage": true // 必填，表示是否分頁，true分頁、false不分頁
}
複製代碼

新增接口 post 方式 /interface/createData

// 提交參數
{
  "pathName": "user", // 所屬模塊的模塊pathName必填
  "name": "示例接口", // 接口名必填
  "url": "/createJson", // 接口地址必填
  "method": "GET", // 接口請求方式可選，默認"POST"
  "status": 200, // 狀態碼可選，默認200
  "description": "描述" // 接口描述可選
}
複製代碼

詳情接口 post 方式 /interface/getDetailData

{
  "pathName": "user", // 所屬模塊的模塊pathName必填
  "url": "/createJson" // 接口地址必填
}
複製代碼

修改接口 post 方式 /interface/updateData （參數必填項還未所有肯定）

{
  "pathName": "user", // 所屬模塊的pathName必填
  "id": 123, // 所更改的接口id--必填
  "name": "示例接口", // 接口名--必填
  "url": "/createJson", // 接口地址--必填
  "method": "GET", // 接口請求方式--必填
  "status": 200, // 狀態碼--必填
  "description": "描述" // 接口描述
  // 自定義請求參數
  "request": [
      {
        "id": 100,
        "parentId": -1,
        "name": "name", // 字段名
        "required": true, // 是否爲必填項
        "type": "String", // 字段類型
        "rule": "", // 生成規則
        "value": "", // 初始值
        "description": "數組屬性示例" // 字段描述
      },
    ],
  // 自定義返回內容
    "response": [
      {
        "id": 6,
        "parentId": -1,
        "name": "數組", // 字段名
        "required": true, // 是否爲必填項
        "type": "Array", // 字段類型
        "rule": "1-2", // 生成規則
        "value": "", // 初始值
        "description": "數組屬性示例" // 字段描述
      },
      {
        "id": 11,
        "parentId": 6,
        "name": "子元素1", // 字段名
        "required": true, // 是否爲必填項
        "type": "Array", // 字段類型
        "rule": "1-2", // 生成規則
        "value": "@cname", // 初始值
        "description": "數組一級子元素" // 字段描述
      },
    ]
}
複製代碼

刪除接口 post 方式 /interface/deleteData

{
   "pathName": "user", // 所屬模塊的模塊pathName必填
   "url": "/createJson" // 接口地址必填
}

10. 獲取接口列表，帶分頁 post 方式 /interface/getDataList

```json
{
   "pathName": "user",
  "page": 1, // 當前頁數
  "size": 2, // 每頁顯示條數
  "isPage": true // 必填，表示是否分頁，true分頁、false不分頁
}
複製代碼

小結

總感受看的人和點讚的很少，仔細想一想是純文字輸出你們可能不愛看，因此提供了在線測試地址給你們測試，不知道能不能多一些人觀看

不一樣平臺的mock服務有不一樣的優缺點，固然若是個人文章對你有幫助我也是很開心的選最適合你的或者最容易上手的反正就是結合你本身的需求去選擇。這裏推薦YApi。簡單上手，儘可能減小學習成本。Yapi這點比較好。簡單的使用甚至不須要了解mock.js的api.直接配置便可。開源程度社區活躍度較高，且保持bug的修復與功能完善.

結束語

其實最近一直在練習怎麼取分享知識和寫好文章。這兩點我如今都作的不怎麼好也許是掌握不深因此不知道怎樣去表達知識點和分享精彩吸引人的內容。若是能堅持寫博客記錄一下本身使用的技術之類對我來講也是一種進步孰能生巧！

點關注不迷路！你那麼帥(漂亮)，都看到這了，動手點個贊鼓勵一下做者吧，謝謝！

點贊，點贊，點贊！很是謝謝！

參考連接

PS:別問我爲何把好連接放後面(放前面大家還能看完個人文章嘛) 要是以爲不錯，點個贊哦