Mock.js和Mock基础知识

Mock.js

学习目的
①开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据牵制与后端，前端页面无法很好的展示，效果不好展示，尤其是 使用 vue 的 v-for 或者 react 循环数据 的时候，各种不方便。

    ② 前后端联调的时候，出现问题要各处找，如果前端先把 模拟接口、 模拟数据 都处理好，到了联调的时候 ，出现问题，只要是按照约定的 数据格式 来规定 mock，那么前端的问题就会小一点，就不用依赖后端，使得 前端工程师 独立于 后端进行开发，更加自由。 

    ③ 特殊的格式，例如  IP, 随机数，图片，地址，需要去收集，尤其是前端使用图片的时候，要到处去 下载图片，非常麻烦。

    使用mock.js 就能 解决这些问题，而且它的优点不仅于此：

    1、前后端分离

        让前端工程师独立于后端进行开发。

    2、增加单元测试的真实性

        通过随机数据，模拟各种场景。

    3、开发无侵入

        不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

    4、用法简单

        符合直觉的接口。

    5、数据类型丰富

        支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

    6、方便扩展

        支持支持扩展更多数据类型，支持自定义函数和正则。

    7、在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。

    所以 学习 Mock.js ，就可以 更加自由， 独立 于后端 开发 前端。

Mock.js 介绍
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试

提供了以下模拟功能：

    ① 根据 数据模板 生成模拟数据

    ② 模拟 Ajax 请求，生成并返回模拟数据

    ③ 基于 HTML 模板生成模拟数据

    安装  npm install mockjs

Mock.js 语法
Mock.js 的语法规范包括 两部分：

    ① 数据模板定义规范  DTD

        数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

        属性名  和 生成规则  之间用竖线 | 分隔。

        生成规则 有 7 种格式：