>[success] # MOCK 數據模擬 ~~~ 1.在開發過程中，可能會前端的進度大于后臺，此時雖然可以根據定義的接口數據格式進行開發，但是 想嘗試數據真實效果最笨的方式就是通過數據寫死，當然也可以利用'Mock' 來模擬數據 ~~~ >[info] ## 關于mock ~~~ 1.mockjs官方自己的描述'生成隨機數據，攔截 Ajax 請求',官方的形容 1.1.前后端分離讓前端攻城師獨立于后端進行開發。 1.2.增加單元測試的真實性通過隨機數據，模擬各種場景。 1.3.開發無侵入不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應數據。 1.4.用法簡單符合直覺的接口。 1.5.數據類型豐富支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。 1.6.方便擴展支持支持擴展更多數據類型，支持自定義函數和正則。 ~~~ >[info] ## 安裝 ~~~ 1.npm install mockjs ~~~ >[info] ## 使用 ~~~ var Mock = require('mockjs') // import Mock from "mockjs" // 使用形式是 Mock.mock( requestUrl?, requestType?, template|function(options) ) // 使用的形式能組合的結果 Mock.mock( template| function(options) ) Mock.mock( requestUrl, template ) Mock.mock( requestUrl, requestType, template ) Mock.mock( requestUrl, requestType, function(options) ) 參數介紹： 'requestUrl': 要攔截的URL，字符串或正則表達式 'equestType': 要攔截的請求類型，get/post/put/delete/options... 'template': 數據模板 'function(options)'：生成響應數據的函數，options --> { url, type, body } ~~~ >[info] ##### 關于模板 ~~~ 1.Mock是可以真實性通過隨機數據，模擬各種場景，達到這種場景mock 提供了'數據模板定義規范' 可以理解按照某種規則快速生成想要數據數據格式 2.這種格式的構成由3部分組成: '屬性名|生成規則：屬性值' ~~~ >[danger] ##### 舉個例子 ~~~ var Mock = require('mockjs') // import Mock from "mockjs" const a = Mock.mock({ "str|2": "hello world", }); // 打印結果 { "str": "hello worldhello world" } ~~~ >[danger] ##### 使用 * Mock 根據提供的模板生成格式數據 ~~~ const a = Mock.mock({ "str|2": "hello world", }); ~~~ * 使用攔截 ~~~ // 正則/\/getUserInfo/ Mock.mock("http://localhost:3000/getUserInfo", (opt) => { return { str: "hello world", }; }); Mock.mock("http://localhost:3000/getUserInfo", (opt) => { return Mock.mock({ "str|2": "hello world", }); }); Mock.mock("http://localhost:3000/getUserInfo",'get' { "str|2-4": "hello world", }); ~~~ >[info] ## 我在vue 中實踐 ~~~ 1.創建可一個'mock' 文件夾，'mock' 文件的結構目錄我是放在和src 同級，還需要在'main.js' 導入一下mock ~~~  * mock/index.js ~~~ import Mock from "mockjs"; import { getUserInfo } from "./response/userInfo"; // 正則/\/getUserInfo/ Mock.mock("http://localhost:3000/getUserInfo", getUserInfo); export default Mock; ~~~ * mock/response/userInfo.js ~~~ export const getUserInfo = (opts) => { console.log(opts); return { name: "user", }; }; ~~~ * src/main.js ~~~ if (process.env.NODE_ENV !== 'production') require('../mock') ~~~ >[info] ## 更詳細的用法參考 [鏈接](https://github.com/lison16/vue-cource/blob/mock/src/mock/mock.doc.md)