mock 的基本认识与生成方法

什么是 mock

mock 翻译过来叫做模拟的意思，那么在前端里面指的是前端自己使用一定的方式去模拟生成一些测试数据。

为什么要学习 mock

现在很多的 web 项目都是前后端完全分离的项目，后端负责提供数据，前端通过请求api 接口获取数据。然而前后端开发的进度是不一样的，所以在我们没有后端给我们的数据，而我们有需要数据的时候，我们用可以自己模拟数据，到时候只要把接口改一下就好了

为什么要前后端分离

• 以前的项目都是前端写好静态页面，然后把静态页面给后端，后端通过模板引擎把数据进行填充，然后返回给用户查看。(express + express-art-template 实现 ssr： 服务器端渲染)

• 现在的项目更多的是前后端分离，然后前端请求后台的接口，然后在客户端实现bsr（客户端渲染）（√）

• 主要现在是处于移动互联网的时代，多端应用特别的多，例如：普通的PC网页、手机的M站（移动站）、其他的联合项目、公众号、小程序、苹果APP、安卓APP，这些都是属于前端应用，每个应用都应该有自己的数据，但是一般来说这些端的数据都是一样的，没必要给每个项目单独的提供一套数据，我们可以只提供一套数据，然后供多端使用。出现这种前后端分离的项目。后端只负责提供数据接口，前端负责调用接口获取数据，然后在渲染数据。分工明确，开发效率也会提高

前后端分离有优缺点？

优点：

1. 便于维护（提供一个数据仓库）。
2. 开发效率提高
3. 便于扩充

弊端：
有些业务对 SEO（搜索引擎） 不怎么友好，因为这些数据都是在后台，并不是在页面上的，所以搜索起来会不容易

如何使用 mock ?（如何自己去模拟出来数据，尽可能模拟出比较真实的数据）

1：mockjs.com 网站提供一个 mock.js 库，专业的提供各种模拟数据
2：http://rap2.taobao.org/account/login 网站（平台），提供一个可视化的界面，然后让我们模拟数据。
3： jsonplaceholder 网站，提供很多的模拟数据的接口
4： json-server npm 包可以管理模拟数据
5： https://cnodejs.org/ 网站 nodejs中文社区
6：juhe.cn 网站提供常见的接口

mock 使用1：mock.js 库

mock.js 既然是一个库，那就意味着我们需要去下载并且引入才能使用
我们可以去他们的官网上学习他们的使用方法：http://mockjs.com（在这里我们只是用了一些里面的方法，如果想知道更多，可以去官网上查看）
接下来我们就去学习一下怎么使用它
第一步： 下载mock.js

第二步 ： 引入

var Mock = require('mockjs');

第三步： 使用方法

//mock方法的参数是一个对象，一般叫做数据模板（Mockjs 会根据这个模板来生成模拟数据）
var data = Mock.mock({
     // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
                 'id|+1': 1
    }]
 })
 console.log(data);//会生成1-10个不等的数据

接下来我们用 mockjs 生成一下我们的用户信息

var Mock = require('mockjs');

var data;
var res = [ ];
//因为如果直接在 list 后面写10的话，虽然会生成十个数据，但是是、全部都是一样的，所以我们用了一个循环，并定义了一个数组来接收，这样就能等到十组不一样的数据了
for(var i = 1; i <= 10; i ++){
    data = Mock.mock({
        'list|1': [{
            'id|': i,
            'username': Mock.Random.cname(),//随机生成一个中文名
            'birthday': Mock.Random.date('yyyy-MM-dd'),//随机生成一个这样格式的日期
            'isGender': Mock.Random.boolean(),//随机生成一个 boolean 值
            'adress': Mock.Random.county(true),//随机生成一个甘肃省 白银市 会宁县 这样格式的地址
            'infos': Mock.Random.paragraph( 4, 8 ),//随机生成几句话
            'avatar': Mock.Random.image( '240x400' )
        }]
    })
    res.push(data);
}

console.log(res);

我们在控制台上运行一下，就能得到我们所需要的数据，我们用 mockjs 生成数据主要是为了能够在后台没给我们数据之前自己测试，现在数据有了，接下去我们就是要把数据通过接口提供出来 ----》 最后前端通过接口请求数据

mock 使用2：http://rap2.taobao.org 网站

是一个可视化生成 mock 数据的方法，可以根据上面的提示一步一步来，就可以生成我们所需要的工具了

mock 使用3：可以使用第三方直接提供的数据

http://jsonplaceholder.typicode.com/：这个网站里面提供了不同类型的数据给我们使用
进入官网---->在当前页面上往下看有个 Resources---->下面就是一系列我们需要的模拟数据（users，posts等）---->点进去里面我们就可以看到很多数据----->在我们需要数据的时候只要访问这个接口地址就行（最好的一点就是，它已经帮我们解决了跨域的问题，所以我们可以在其他域访问这个数据）
并且我们还可以进行操作，如根据 id 获取详情，这要在地址栏加上 /id 即可，它机会显示 id 为多少的那一条数据
http://jsonplaceholder.typicode.com/posts/1

全局查询：在地址后面拼接 ?q=关键字，它就会显示所有包含了这个关键字的数据
http://jsonplaceholder.typicode.com/posts?q=architecto

分页：在地址后面拼接 ?_page=1&_limit=2(第几页 每页几条数据)
http://jsonplaceholder.typicode.com/posts?_page=2&_limit=2

排序：在地址后面拼接?_order=desc(降序)/asc(升序)&_sort=id(按那个属性排)
http://jsonplaceholder.typicode.com/posts?_order=desc&_sort=id

mock 使用4：json-server

mockjs ：可以构建非常丰富的字段，但是却需要有后台编程

jsonplaceholder：这个网站不需要我们进行任何的编程，就可以获取到数据，可以快速的实现这些排序、分页的这样功能，但它的数据字段都是固定好的，使用的时候有一定的局限

那有没有一种方法可以兼顾上面有种好处的方法呢，那就是： json-server

json-server：是一个 npm 管理的包，可以给前端提供mock的功能。

如何使用

1：首先他是一个 npm 管理的包，我们就需要下载它，可以全局安装**

				npm install -g json-server

当上面的包安装后，会提供一个 json-server 的全局命令，基于该命令，我们就可以快速的mock数据

2：使用 json-server 命令，使用之前，需要提供一个 .json 结尾的数据模板。（mock.json）

{
  "news": [
    {
      "id": 1,
      "name": "lili",
      "title": "哈哈哈哈哈"
    },
    {
      "id": 2,
      "name": "xiaoxiao",
      "title": "嘿嘿嘿嘿嘿嘿"
    },
    {
      "id": 3,
      "name": "nono",
      "title": "嘻嘻嘻嘻嘻嘻"
    },
    {
      "id": 4
    },
    {
      "id": 5
    },
    {
      "name": "aaaa",
      "title": "哈哈哈哈哈",
      "id": 6
    }
  ]
}

3:使用 json-server 命令启动一个端口服务

成功之后他会告诉你接口的地址，我们只需要访问这个接口的地址，就能获取到数据了，并且接口的使用完全等同于 jsonplaceholder（它也能进行分页，查询等功能）

访问地址：
localhost:3000/news