mockjs 入门
mockjs 真是个好东西。简单了解下用法。
官网
先直接上文档 Mock.js。文档中列出了 mockjs 可以模拟的数据类型,包括:
- string
- number
- bool
- array
- object
- guid
- id
- title
- paragraph
- image
- address
- date
- time
- url
- ip
- regexp
不要小看这个文档,你可以打开控制台,随意地试验这些方法。
示例
这里列举几个我用到的模拟数据。
模拟 title:
1 | > Mock.mock({'title': '@title(1)'}) |
模拟图片:
1 | > Mock.mock({'head': '@image()'}) |
模拟图片打开之后的效果如下:
语法
mockjs 的语法还是比较简单易懂的,感觉不必花时间专门研究。不过不妨找一批较全的示例,实在不记得怎么写时可以照着示例来写。这里直接贴上一个示例,它来自这里。
1 | // 使用 Mock |
其他模拟方式
以下是另外两个 mock 库,看起来更为强大。
- APIJSON/APIJSON: 🏆码云最有价值开源项目 🚀后端接口和文档自动化,前端(客户端) 定制返回 JSON 的数据和结构!🏆Gitee Most Valuable Project 🚀A JSON Transmission Protocol and an ORM Library for automatically providing APIs and Docs.
- parrot-mocker-web/README-zh.md at master · chinesedfan/parrot-mocker-web
AntDesign结合mockjs随机生成图片 提供了另外一种思路:上传一批图片到云端(保证名字有规律),再使用 mockjs 来拿到图片地址,从而实现在模拟自定义图片。
总结
mockjs 本身并不是特别有用,不过它结合 vue-admin-template 中的 mock-server,可以直接模拟线上接口,方便在后台尚未提供接口的情况下开始前端页面开发。这一点在某些情况下特别有用,如果事先后台能提供接口协议,保证模拟接口跟实际接口基本一致,生产力应该能大大提高。
vue-admin-template 中 mock-server 的用法见前一篇。