mock使用场景
mock：假的
mock数据的含义是：真的假数据
- 真的：符合接口规范要求的。
- 假数据：数据是人为创建出来的，不是真正的业务数据。
什么时候需要mock？
后端接口的开发速度跟不上前端的进度， 而前端要实现业务还必须依赖数据，前端为了保证开发进度就需要自己mock数据 ，保证业务能正常开发
mock的实现方式
- 本地启mock服务器：
- 自己用express写接口
- 本地用专门的mock服务
- 线上的mock服务器
- https://www.fastmock.site/
项目中的mock功能
目标
写一个获取新闻列表的接口。url： /news/getList
思路
分析现有的代码功能，仿写一个。
目前已有的接口：http://localhost:9528/dev-api/vue-admin-template/table/list
创建mock文件
在mock目录下创建一个news.js文件
写入news.js的内容如下
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13module.exports = [ { url: '/news/getList', type: 'get', response: config => { return { code: 20000, data: ['第一条新闻', '第二条新闻', '第三条新闻'] } } } ]
引用mock文件
在mock/index.js中，引入news.js
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13const Mock = require('mockjs') const { param2Obj } = require('./utils') const user = require('./user') const table = require('./table') + const news = require('./news') const mocks = [ ...user, ...table, + ...news ]
重启项目
调用mock接口
由于上面写的是get类型的接口，可以直接通过在地址栏中写：http://localhost:9528/dev-api/news/getList 来访问。
在项目中的组件中正常使用ajax发请求即可，或者采用测试工具来做测试
小结
-
mock是在前端中就是表示实现真接口&假数据；
-
一般在开发阶段时使用，上线之后就不会用了；
最后
以上就是忧郁裙子最近收集整理的关于什么是mock数据？的全部内容，更多相关什么是mock数据内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复