Mock.js和EsayMock使用

Mock：生成随机数据，拦截 Ajax 请求。

随着互联网项目开发的发展，前后端分离已经成为了互联网项目开发的业界标准使用方式。

传统的前后端混合开发模式，虽然久经考验，到现在依然
还是能够支撑起应用的开发。但是放眼未来，社会分工更加精细化，前后端分离开发的精细化也是必然趋势。并且
前后端分离会为以后的大型分布式架构、微服务架构、多端化服务（多种客户端，例如：浏览器，安卓，IOS, 车载
终端等等）打下坚实的基础。

前后端分离开发的架构：

1. 前后端约定好API接口&数据&参数。
2. 前后端并行开发
   前端工程师只需要编写HTM页面，通过HTTP请求调用后端提供的接口服务即可。
   后端只要愉快的开发接口就行了。
3. 除了开发阶段分离、在运行期前后端资源也会进行分离部署。

Mock是用来解决什么问题的
问题：
前后端分离项目，前端和后端人员都是根据 API 文档进行开发项目的，不应该直接相互依待后端开发好接口后再进行测试，既然不依赖后端接口，那前端人员应该如何测试呢？

解决:
可以通过模拟数据生成器，通过一定规则 （API文档）生成模拟数据接口, 提供给前端人员进行测试。

安装Mock

首先使用之前我们需要先安装Mock
在命令提示符窗口，用 npm 安装 mockjs

npm install mockjs

安装完成后在新建一个.js文件，用来定义数据。

• 引入Mock

const Mock = require(‘mockjs’)

Mock的语法规则

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

1. 数据模板定义规范（Data Template Definition，DTD）
2. 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范

• 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
• 属性名 和 生成规则 之间用竖线 | 分隔。

'name|rule': value

• 生成规则是可选的，生成规则 有 7 种格式

• 生成规则 的 含义 需要依赖 属性值的类型 才能确。

• 属性值中可以含有 @占位符

  1. ‘name|min-max’: value
  2. ‘name|count’: value
  3. ‘name|min-max.dmin-dmax’: value
  4. ‘name|min-max.dcount’: value
  5. ‘name|count.dmin-dmax’: value
  6. ‘name|count.dcount’: value
  7. ‘name|+step’: value

Mock配置项使用

const data = Mock.mock({
    // 数组生成四个对选
    "testdata|4":[
        {
            // id自增
            "id|+1":0,
            "name":"永远滴神",          
            "count|5-10":0,                                  // 随机生成一个5-10之间的整数  后面的value只用来确定类型
            "count2|5-10.1-2":0,                             // 随机生成一个5-10之间的浮点数，包含一到两位小数  后面的value只用来确定类型
            "count3|5-10.1":0,                               // 随机生成一个5-10之间的浮点数，包含一位小数  后面的value只用来确定类
            "checked|1-2":true,                              // 随机生成一个布尔值，值为 value 的概率是 最小值 / (最小值 + 最大值)
            "user|2-3 ":{                                    // 随机抽取对象内2-3个属性
                name:"hello",
                sex:"男",
                age:20
            },
            // 随机生成身份证号  匹配的是正则表达式
            "id_card": /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,

            // 占位符  
            "status":"@Boolean",                            // 随机生成一个布尔值
            // 日期占位符   参数date  time  datetime
            "date":"@date('yyyy/MM/dd')",
            "time":"@time",
            "datetime":"@datetime('yyyy/MM/dd HH:mm:ss')",
            "img":"@image",                                 // 图像占位符
            // 文本占位符  
            'title': '@ctitle(3, 6)',                       // 随机3-6字 标题
            'content': '@csentence(8, 12)',                 // 随机 8-12字 内容
            // 名称占位符  中文的需要加上c  比如cname
            'first': '@cfirst',                             // 中文名
            'last': '@last',                                // 英文姓
            "e_name":"@name",                               //英文姓名
            // 网络占位符  可随机生成 URL 、域名、 IP 地址、邮件地址
            "url":"@url(protocol?, host?)",                 //随机生成url
            'domain': '@domain',                            // 随机生成域名
            'ip': '@ip',                                    // IP
            'email': '@email',                              // 邮箱地址

            // 地址占位符
            'area': '@region',                              // 区域
            'address': '@county(true)',                     // 省市'zipCode': '@zip' // 邮政编码
            'zipCode': '@zip'                               // 邮政编码
        }
    ]
})
export default data

EasyMock 基本使用

Easy Mock 是一个可视化，并且能快速生成模拟数据的服务。是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 Mock 服务 。

• 登录或注册(需要注意的是没有密码找回功能，一定要牢记密码)。
  
  登陆成功
  
  点击右下角加号创建项目
  

创建成功之后

进入项目，然后点击创建接口

左边使用Mock模拟数据，右边定义一些信息。

然后回到上一个页面，复制接口地址进行预览