>[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)