美文网首页
试一试mockjs

试一试mockjs

作者: Aoyi_G | 来源:发表于2017-06-18 17:19 被阅读0次

    注:本文主要学习于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

    相关文章

      网友评论

          本文标题:试一试mockjs

          本文链接:https://www.haomeiwen.com/subject/htaiqxtx.html