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

時間 2019-11-24

標籤前端開發數據 mock 神器简体版

原文原文鏈接

一、爲何要實現數據 mock

　　要理解爲何要實現數據 mock，咱們能夠提供幾個場景來解釋，javascript

　　一、如今的開發不少都是先後端分離的模式，先後端的工做是不一樣的，當咱們前端界面已經完成，可是後端的接口遲遲不能提供html

　　　前端不少時候都會等接口。前端

　　二、測試人員想要你提供一份能夠直接測試，自行修改後端接口，測試 UI 的時候。java

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

　　這個時候若是前端能夠實現本身的一套 mock 數據，這裏的問題都會迎刃而解，咱們能夠模擬真實的接口，提供咱們本身須要的數據及其數據結構。git

　　這樣，咱們能夠在後端未完成的狀況下，完成測試，調試以及優化。github

二、mock 數據的方案

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

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

　　例如：express

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

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

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

　　四、還有其餘不少特別到手段....

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

　　xl_mock 介紹

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

　　它能夠實如今你的項目中經過命令開啓一個本地數據 mock 服務器。

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

　　xl_mock 使用及其預覽

　　一、首先全局安裝 xl_mock

npm install -g xl_mock

　　在全局安裝，能夠實現全局命令。

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

　　二、在項目中添加 npm 包 xl_mock

yarn add xl_mock

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

　　三、在項目開啓 mock 服務器

xl_mock start -p 2048

　　這裏開啓的項目的 mock 服務器，而且監聽的端口好是 2048 。

　　若是端口號被佔用，會先中止端口號的進程，而後從新開啓。

　　首先，這裏會在項目的根目錄生成一個 mock 目錄，用於存放數據。（若是存在 mock 目錄，則不會從新生成）

　　能夠看到這裏開啓的是一個本地服務器，而且打開了 http://127.0.0.1:2014/index.html

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

　　四、添加一個接口

　　這裏添加了一個 uesrInfo 接口

　　而且請求地址爲 /get/userInfo

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

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

　　五、接口驗證和調用

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

　　那麼在項目中，咱們如何調用呢？

　　咱們能夠斷定一個 mock 環境，將請求地址都替換成 http://127.0.0.0:2048 , 實現接口的調用。。

　　xl_mock 相對於其餘的優勢：

　　相對於 mock.js ：

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

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

　　相對於通常 mock 服務器：

　　不須要專門搭建 mock 服務器

　　在這裏，咱們能夠更方便，更簡潔的完成一個 mock 功能

　　項目還在開發和完善之中，若是你們以爲有什麼 bug 或者什麼不合理的位置，盡情提出了，儘快優化和修改。。。

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

三、開發 xl_mock 知識梳理

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

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

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

　　二、建立一個本身的 npm 包

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

四、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 中的函數生成數據       
// =>"long.xiao@qq.com"
Mock.mock('@EMAIL')  // mock 函數實現生成數據
// =>"xiao.da@gil.org"

　　建立一個完成的模版：

{
    "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 更多介紹能夠去官網上面瀏覽下　

五、建立一個本身的 npm 包

　　建立一個本身的 npm 包，首先要知道若是建立

　　這裏有一個簡單例子：如何開發一個本身的 npm 包

　　一、修改 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

　　二、命令入口文件修改

#!/usr/bin/env node

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

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

　　若是須要更詳細瞭解 npm 包開發。

　　能夠瀏覽這個簡單教程：如何開發一個本身的 npm 包

　　或者瀏覽官網： npm 官網

三、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 包

四、項目簡單介紹

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

　　若是想要具體瞭解，能夠瀏覽個人代碼原件，後面發佈 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'}); })