前端使用 easyMock 和 Mock.js 实现模拟数据

蔚落 2022-12-04 11:57 271阅读 0赞

通常的开发都是前后端分离的，而前端的小伙伴需要一些数据来开发页面，这时我们可以使用 mock 进行数据的模拟。

--------------------

使用的方法也很简单。

登录 easy-mock 官网 [https://www.easy-mock.com/login][https_www.easy-mock.com_login]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]  
注册自己的账号

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]  
点击创建之后的新项目

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]  
创建你需要的接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 4]  
这里可以使用 Mock.js 的规则填写，使得接口的创建更加方便快捷

#### Mock.js 官网 [http://mockjs.com/][http_mockjs.com] ####

例如这样填写

{ 
      "code": 0,
      "result": { 
        "page": 1,
        "page_size": 10,
        "total_count": 60,
        "page_count": 6,
        "item_list|10": [{ 
          "id|+1": 1,
          "name": "@city",
          "mode|1-2": 1,
          "op_mode|1-2": 1,
          "franchisee_id": 77,
          "franchisee_name": "松果白鹭",
          "city_admins|1-2": [{ 
            "user_name": "@cname",
            "user_id|+1": 10001
          }],
          "open_time": "@datetime",
          "sys_user_name": "@cname",
          "update_time": 1520476737000
        }]
      }
    }

具体的语法规范可以参照 Mock.js 官网 [https://github.com/nuysoft/Mock/wiki/Syntax-Specification][https_github.com_nuysoft_Mock_wiki_Syntax-Specification]

[https_www.easy-mock.com_login]: https://www.easy-mock.com/login
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4ef5f5e8bab24f348a7747ce8cbb8335.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/33d68661e4c24fb3a669cf74f3b1e0e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/9a51c9328f7d4569ae4be58863c00100.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/05c8c9a515884481bd7fc1efd516877d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/242f2c26d49749e686aec72357b88443.png
[http_mockjs.com]: http://mockjs.com/
[https_github.com_nuysoft_Mock_wiki_Syntax-Specification]: https://github.com/nuysoft/Mock/wiki/Syntax-Specification