前端数据模仿 Mock.js 学习条记
mock.js先容Mock.js是一款前端开辟中拦截Ajax请求再生成随机数据相应的工具，可以用来模仿服务器相应
[*]优点是：
[*]非常方便简单，无侵入性，基本覆盖常用的接口数据类型
[*]支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
[*]缺点是：
[*]不支持文件
[*]不是异步的
安装的话直接用npm install mockjs这条命令行即可
mockjs可以模仿前端请求后端返回数据的过程，那么在前端开辟过程中，我们就不必要等候后端写好接口就能写关于axios的代码来请求数据，当后端开辟好后直接移除mockjs即可不必要修改过多的代码，对于前端开辟来说是非常方便的
核心方法
Mock.mock(rurl?, rtype?, template|function(options))
[*]rurl：表示必要拦截的URL，可以是URL字符串或URL正则
[*]rtype：表示要拦截的Ajax请求类型，比方get、post、put请求等
[*]template：表示数据模板，可以是对象或者是字符串
[*]function：表示用于生成相应式数据的函数
同时mock也可以设置延时请求到数据：Mock.setup({ timeout : 400})，此中400是表示延迟400毫秒，如果400被'200-600'替换了，那么意思就是延迟200毫秒到600毫秒请求数据
数据生成规则
mock的语法规范包含两层规范：数据模板（DTD），数据占位符（DPD）
数据模板中的每个属性由三部分构成：属性名name、生成规则rule、属性值value
'name|rule' : value
属性名和生成规则之间用竖线 | 分割，生成规则是可选的，有7种格式：
'name|min-max' : value
'name|count' : value
'name|min-max.dmin-dmax' : value
'name|min-max.dcount : value
'name|count.dmin-dmax' : value
'name|count.dcount ' : value
'name|+step' : value
固然还有更多的写法来规定数据生成，具体可以找ai写或者看官方文档写就好了
基本利用
在项目src目次下创建mock目次，新建index.js文件
https://i-blog.csdnimg.cn/direct/8131da72cdf440cab8451663cb8f6ac8.png
然后在index.js文件中写入必要模仿生成的数据即可
示例：
https://i-blog.csdnimg.cn/direct/9e1ec4fc18664ae383ac846f4e8991d3.png
末了，我们必要在main.js内里引入我们写好的mock目次下的js文件，由于前面界说mock目次下js文件名字为index.js，以是会自动导入index.js，不必要写成 import './mock/index' 这样
https://i-blog.csdnimg.cn/direct/043aeab5401946048113fe47f3f272cb.png
然后在必要请求数据的组件中调用mock.js中模仿的数据接口，这时返回的response就是mock.js中用Mock.mock('url' ,data)中设置的data
https://i-blog.csdnimg.cn/direct/06f58585fb114badb755982de82c0278.png
注意：如果你还没有开辟后端接口，axios 请求的接口路径就是你在 Mock.js 中界说的路径。Mock.js 会拦截这些请求并返回模仿数据
参考
14.前端数据模仿MockJS_哔哩哔哩_bilibili
Mock.js 超全 超具体总结 保姆级别的教程_mockjs-CSDN博客
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]