前端開發數據mock神器 -- xl_mock

 

1、為什么要實現數據 mock 

 

　　要理解為什么要實現數據 mock，我們可以提供幾個場景來解釋，

　　1、現在的開發很多都是前后端分離的模式，前后端的工作是不同的，當我們前端界面已經完成，但是后端的接口遲遲不能提供

　　　 前端很多時候都會等接口。

　　2、測試人員想要你提供一份可以直接測試，自行修改后端接口，測試 UI 的時候。

　　3、后端的接口，不能提供一些匹配不到的場景的時候。

 

　　這個時候如果前端可以實現自己的一套 mock 數據，這里的問題都會迎刃而解，我們可以模擬真實的接口，提供我們自己需要的數據及其數據結構。

　　這樣，我們可以在后端未完成的情況下，完成測試，調試以及優化。

 

2、mock 數據的方案

 

　　說到前端開發，那么實現前端數據到 mock 是在前端構建中不可缺少到一個步驟，不管是在開發或者調試都是必不可少的。

　　那么我們要實現數據的 mock ，有哪些操作呢？其中最常規到方法就那么幾種：

　　例如：

　　1、引入 mock.js 實現請求攔截。

　　2、搭建一個屬於自己到 mock 服務器，模擬自己想要到數據及其數據結構。

　　3、搭建RAP 可視化到一個 mock 服務器

　　4、還有其他很多特別到手段....

　　

　　在這幾種方法中，都是利用了模擬數據，來實現前端的展示，提高前端開發效率以及開發節奏。

　　

　　xl_mock 介紹

 

　　xl_mock 是一個基於 mock.js 開發的一個可視化的數據 mock 的 npm 包。

　　它可以實現在你的項目中通過命令開啟一個本地數據 mock 服務器。

　　並且 mock 的數據類型會存在在項目中，以供合作開發。　　

　　

　　xl_mock 使用及其預覽

 

　　1、首先全局安裝 xl_mock

 

npm install -g xl_mock

 

　　在全局安裝，可以實現全局命令。

　　如果不在項目項目中安裝，則會開啟一個全局的 mock 服務器。這是不可取的。

 

　　2、在項目中添加 npm 包 xl_mock

 

yarn add xl_mock

　　

　　在項目中添加 xl_mock ,這樣開啟服務的時候只會在當前項目生效。

 

　　3、在項目開啟 mock 服務器

 

xl_mock start -p 2048

　　

　　這里開啟的項目的 mock 服務器，並且監聽的端口好是 2048 。

　　如果端口號被占用，會先停止端口號的進程，然后重新開啟。

 

 

　　首先，這里會在項目的根目錄生成一個 mock 目錄，用於存放數據。（ 如果存在 mock 目錄，則不會重新生成 ）

　　可以看到這里開啟的是一個本地服務器，並且打開了 http://127.0.0.1:2014/index.html

　　這里我們看到的是一個可視化，接口添加，接口修改，以及接口類型添加等。

 

　　4、添加一個接口

 

 

　　這里添加了一個 uesrInfo 接口

　　並且請求地址為 /get/userInfo

　　這里還可以進行方法的選擇，以及接口的描述，還有接口具體信息。

　　當我們點擊提交數據，接口的信息已經寫入了本地項目目錄下的 mock 文件夾內，以供提取。

 

　　5、接口驗證和調用

 

 

　　在這里，我是直接輸入接口地址到瀏覽器中驗證接口是否生效。

　　那么在項目中，我們如何調用呢？

　　我們可以判定一個 mock 環境，將請求地址都替換成 http://127.0.0.0:2048 , 實現接口的調用。。

 

　　xl_mock 相對於其他的優點：

 

　　相對於 mock.js ：

　　xl_mock 已經從項目中提出了，不需要進行接口請求攔截，使開發更接近於后端接口

　　xl_mock 提供了可視化的界面，這樣接口瀏覽更直觀

　　

　　相對於一般 mock 服務器：

　　不需要專門搭建 mock 服務器

　　在這里，我們可以更方便，更簡潔的完成一個 mock 功能

 　　

　　項目還在開發和完善之中，如果大家覺得有什么 bug 或者什么不合理的位置 ，盡情提出了，盡快優化和修改。。。

　　

　　博客：npm工具--mock服務器（ xl_mock ）

 

 

3、開發 xl_mock 知識梳理

　　　　

　　開發一個 xl_mock npm 包需要哪些知識呢？

　　這里列出來了基本的幾項：

　　1、mock.js    mock.js 的基本使用方法

　　2、創建一個自己的 npm 包

　　3、node 的相關知識  主要是命令行工具

 

4、mock.js 的介紹

 　　

　　這里我會簡單的介紹一下 mock.js ，具體想要了解可以瀏覽官網

      mock.js 官網

 

　　mock.js 安裝

 

　　普通直接引入：

直接在 html 中引入  <script src="http://mockjs.com/dist/mock.js"></script>;

　　

　　以模塊形式安裝

安裝: 
npm install mockjs --save-dev
yarn add mockjs

　　

　　

　　mock.js 實現 mock 數據的方法:

 

Mock.mock(template)

Mock.mock(rurl,function(options))

Mock.mock(rurl,rtype,template)

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

 

• template 表示數據的模版 ，Mock.mock(template) 這里，會根據模版返回數據及其數據結構

• rurl  mock.js 可以對請求進行攔截，這里就是要攔截的地址，攔截地址之后，根據函數或者模版返回需要的數據

• rtype 這個是攔截的請求類型

• function 這里的函數表示生成數據的函數，這里可以更直觀

　　

 

　　mock.js 模版的簡單介紹

 

　　定義數據模版的規則：　　

　　數據模版中每一個屬性由3個部分構成的：屬性的名稱，生成值的規則，以及屬性值

 

'name|rule': value

屬性名稱|生成值的規則 : 屬性值

　　

　　占位符的定義：

　　占位符是在屬性值的位置寫入帶有 @ 的字符串，並不會出現在最終的數據中，而是一個數據格式

　　格式：

@占位符
@占位符(參數 [, 參數])

　　

　　例子：

{
     name: '@cname',
　　  city: '@city(true)'
}

　　生成的數據

{
     name: '中文名稱',
　   city: '中國城市'
}

　　

　　mock.js 中的工具集

　　在數據模版中有占位符，對應的 Mock.Random 工具集也可以實現各種數據的生成

　　例如：

ar Random = Mock.Random;
Random.email()       // Random 中的函數生成數據       
// =>"[e-mail]"
Mock.mock('@EMAIL')  // mock 函數實現生成數據
// =>"[e-mail]"

　　

　　創建一個完成的模版：

 

{
    "users|1-2": [{   // 隨機生成1到2個數組元素
        'name': '@cname',  // 中文名稱
        'id|+1': 108,    // 屬性值自動加 1，初始值108
        'birthday': '@date("yyyy-MM-dd")',  // 日期
        'city': '@city(true)',   // 中國城市
     
    }]
}

　　

　　生成的數據：

{
　　users:[
　　　　{name:'xiaol',
　　　　 id:1,
　　　　 birthday:'2018-09-12',
　　　　 city:'北京'
　　　　}，
　　　　{name:'dal',
　　　　 id:2,
　　　　 birthday:'2014-09-12',
　　　　 city:'上海'
　　　　}，
　　]
}

　　

　　這里介紹 mock.js 的基本的操作和功能。

　　了解 mock.js 更多介紹可以去官網上面瀏覽下　

 

5、創建一個自己的 npm 包

　　創建一個自己的 npm 包，首先要知道如果創建

　　這里有一個簡單例子 ：如何開發一個自己的 npm 包

 　　

　　1、修改 package.json 

{
  "name": "xl_mock",
  "version": "1.0.5",
  "description": "用於創建 mock ，創建 mock 服務，生成mock 目錄...",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },



   // 主要修改，添加 命令屬性
  "bin": "./bin/xl_mock.js",



  "author": "xiaolong",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "chalk": "^2.4.1",
    "commander": "^2.17.1",
    "ejs": "^2.6.1",
    "express": "^4.16.3",
    "express-session": "^1.15.6",
    "forever": "^0.15.3",
    "kp": "^1.1.2",
    "mockjs": "^1.0.1-beta3",
    "opn": "^5.3.0",
    "shelljs": "^0.8.2",
    "yargs": "^12.0.1"
  }
}

　　

　　添加我們的命令入口  ./bin/xl_mock.js

 

　　2、命令入口文件修改

 

#!/usr/bin/env node

//  主要是在第一個行添加語言解析
//  這個告訴系統用 node 來解析該文件

　　

　　簡單介紹了 npm 開發主要兩個點

　　如果需要更詳細了解 npm 包開發。

　　可以瀏覽這個簡單教程 ： 如何開發一個自己的 npm 包

　　或者瀏覽官網 ： npm 官網

　　 

3、Node 相關工具和知識

　　 npm 是基於 node 開發的，所以我們必不可少的知識就是 node 的知識。

　　如 node 對文件的操作模塊 fs ， node 的進程管理 process ，子進程  child_precess

　　還有一些命令行工具：

　　chalk

　　chalk是一個顏色的插件。可以通過chalk.blue(‘hello world’)來改變顏色，

　　

const chalk = require('chalk');
const log = console.log;

// 改變文本在命令行中的顏色

// 這里會打印藍色的 Hello world
log(chalk.blue('Hello world!'));

// 打印藍色的 Hello  和 紅色的 ！
log(chalk.blue('Hello') + 'World' + chalk.red('!'));

　　

　　這個工具可以提高我們在命令操作時候的，命令行美觀。

 

　　commander

　　commander是一個輕巧的nodejs模塊，提供了用戶命令行輸入和參數解析強大功能。

　　這個工具主要是用來實現用戶在命令的交互。

 

　　commander 的特性：

　　記錄代碼，生成幫助文檔

　　合並短參數，記錄參數

　　實現各種選項

　　解析命令，並保存

　　簡單命令提示

 

 

　　commander 的API：

 

• Option(): 初始化自定義參數對象，設置“關鍵字”和“描述”

• Command(): 初始化命令行參數對象，直接獲得命令行輸入

• Command#command(): 定義一個命令名字

• Command#action(): 注冊一個callback函數

• Command#option(): 定義參數，需要設置“關鍵字”和“描述”，關鍵字包括“簡寫”和“全寫”兩部分，以”,”,”|”,”空格”做分隔。

• Command#parse(): 解析命令行參數argv

• Command#description(): 設置description值

• Command#usage(): 設置usage值

　　

　　案例：

program
    .version(package.version)
    .usage('[cmd] [options]')
    .option('-p', '配置端口號')
    .option('-d', '配置mock目錄名稱 ，默認 mock')
    .option('-x', '設置密碼')

// 創建一個 strt 的命令
program
    .command('start')
    .description('開啟mock服務器..')
    .action((path, options) => {
        start(argv)
    })
program
    .command('add <path>')
    .description('添加 mock 數據..')
    .action((path) => {
        opn(`http://127.0.0.1:${port}/index.html`,{app: 'google chrome'});
    })
program.parse(process.argv)

　　

　　在命令行中可以執行：

xl_mock start options

　　

　　這里會執行 start 命令中的相應操作

 

　　還有很多很用的命令行和node 的相關 npm 包

　　node 工具包 ：node工具 -- NPM 包

　　

 

4、項目簡單介紹

　　代碼開發和流程，這里知識簡單介紹。

　　如果想要具體了解，可以瀏覽我的代碼原件，后面發布 github 地址。

 

　　瀏覽項目介紹的時候最好對照的源碼看 ： 源碼github

 

    入口文件：

    主要有兩個功能 ： 一個是 start 開啟 mock 服務器，一個是添加 api 接口

    開啟 mock 服務器

 

program
    .version(package.version)
    .usage('[cmd] [options]')     .option('-p', '配置端口號')     .option('-d', '配置mock目錄名稱 ，默認 mock') program     .command('start')     .description('開啟mock服務器..')     .action((path, options) => {         start(argv)   // 調用服務文件開發 服務器 }) 

     打開瀏覽器添加 api 接口頁面

 

 

program
.command('add <path>') .description('添加 mock 數據..') .action((path) => {     opn(`http://127.0.0.1:${port}/index.html`,{app: 'google chrome'}); }) 

 

 

    開始 mock 服務器文件：

 

 

    步驟：

   1、將必要的模版文件復制到項目目錄 mock 文件夾中

        這樣就不會丟失 mock 的數據

   2、開發服務器，如果端口占用則殺掉端口進程，重新開啟

 

    服務器文件：

 

    主要功能：

    1、主頁，用於 添加/展示  接口及其接口分類

    2、添加接口分類的接口

    3、獲取某個分類下的接口

    4、添加接口

    5、獲取接口信息

    6、根據獲取地址得倒 mock 的數據

 

    主頁代碼：

 

    這里使用的  ejs  模版引擎，將分類和默認分類下的所有接口列表展示出來

 

    添加分類代碼：

 

    主要功能：

    添加分類

    1、將分類信息保存在 ./data/index.json 文件中。

    2、創建一個分類 json 用於以后添加該分類下的 api 接口提供

 

    獲取分類代碼：

 

    主要功能：

    1、獲取 index.json 下的數據

    2、獲取對應分類 api json 的 api 數據列表

 

    添加 api 接口代碼：

 

 

    主要功能：

    1、將接口添加到對應分類到 api json 中，便於調用和 mock 數據

    2、將接口信息添加到 index.json 中，在 mock 調用到時候，快速到定位 mock 模版

 

    獲取 api 數據 / 獲取 mock 數據代碼：

 

    這里主要是最重要是：

    將輸入的數據轉為 mock 數據，這里主要是 getMockData 方法。

 

 

5、xl_mock 用法

    1、全局安裝

    npm  install  -g  xl_mock

 

    2、項目安裝依賴

    yarn   add   xl_mock

 

    3、開啟 mock 服務器

    xl_mock  start  -p   3000

 

    4、訪問地址  http://127.0.0.0:3000/index.html

    項目目錄

 

 

　　代碼剛剛開發完成，如若有不足或者建議請留言討論.... 

　　

 　博客園小結巴巴： https://www.cnblogs.com/jiebba/p/9596707.html 

    XiaoLong's Blog