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 中的函數生成資料
// =>"[email protected]"
Mock.mock('@EMAIL') // mock 函數實作生成資料
// =>"[email protected]"
建立一個完成的模版：
{
"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 官網
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