注:本文主要学习于vue-cli 本地开发mock数据使用方法,加上我自己的理解和实践。

实习了半年，一直觉得公司前后端的交互方式太麻烦了，很多时候前端都得根据后端的进度开发，不用说也知道，嗯，效率很低嘛。咋解决呢？

我想，前后端在开发之前一定要根据问题讨论需要的接口和数据格式，整理出api文档之后再同时开始各自的开发。我认为这样的开发流程才是正确、高效的。

那么问题来了，如果没有后端接口，前端怎么调试呢？

这就讲到今天的主角啦，mockjs。

mockjs的官网是这样说的：

生成随机数据，拦截 Ajax 请求
mockjs官网

mockjs的作用已经很明显了，就是给前端人员用来拦截ajax，造虚拟数据进行调试的。

mockjs的安装参见官网哦。
基本的用法如官网所示：

// 使用 Mock
var Mock = require('mockjs');
var data = Mock.mock({ 
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
   'list|1-10': [{ 
    // 属性 id 是一个自增数，起始值为 1，每次增 1 
    'id|+1': 1 
    }]
});
// 输出结果
console.log(JSON.stringify(data, null, 4))

这样就能得到一些基本的虚假数据。
数据的类型还包括图片、链接、姓名等，可以根据需要查阅mockjs官网。

但是得到假数据还不能满足我们的需求，这样做完的调试最后还是需要重新写请求与后端联调。mockjs拦截ajax的优点就有大显身手的地方啦！

怎么拦截ajax请求呢？具体的思路就是我们建一个服务器，把ajax请求发到这个服务器，服务器再根据请求返回模拟的数据。

我们使用json-server来创建一个完整的假REST API服务器，这样前端要做的仅需写一个json文件即可，完全不必有任何服务器和后端的知识。
json-server安装参考json-server官网。

• 我们首先创建一个vue项目

vue init webpack 项目名

• 然后安装项目$ npm install
• 安装mockjs$ npm install mockjs
• 安装json-server $ npm install -g json-server
• 项目根目录下创建mock文件夹
• mock文件夹下创建db.json文件，写入：

{
  "test1": [
    { "id": 1, "name": "test1", "author": "aoyi" }
  ],
  "test2": [
   { "id": 2, "name": "test2", "author": "aoyi" }
  ]
}

• 我们在package.json的scripts中添加命令:

"mock": "json-server --watch mock/db.json",
  "mockdev": "npm run mock & npm run dev"

这样我们使用npm run mock 就可以跑服务啦，访问 http://localhost:3000/就可以看到我们服务器内容。

localhost:3000

test1、test2和db就是我们可以访问的资源,例如在浏览器中访问 http://localhost:3000/db就可以得到相应的数据。

image.png

这样我们基本的完成了。但是涉及到数据量很大的情况，让我们手写恐怕是要死的吧。我们可以使用faker.js批量生成数据。

• $ npm install faker -g全局安装 faker
• mock 目录下创建 faker-data.js，内容如下:

module.exports = function () {
    var faker = require("faker");
    faker.locale = "zh_CN";
    var _ = require("lodash");
    return {
        book:_.times(14,function (n) {
            return {
                id:n,
                name:faker.random.word(),
                src:faker.random.image()
            }
        })
    }
}

• $ json-server mock/faker-data.js
• 在 json server 中使用 faker请求 http://localhost:3000/book 可以获取到随机生成的10组伪数据

image.png