mock功能-了解mock的作用及使用场景
目标
了解mock的作用及使用场景；
mock使用场景
mock：假的
前端程序员提到的mock数据的含义是：真的假数据
真的：符合接口规范要求的。
假数据：数据是人为创建出来的，不是真正的业务数据。
什么时候需要mock？
后端接口的开发速度跟不上前端的进度， 而前端要实现业务还必须依赖数据，前端为了保证开发进度就需要自己mock数据 ，保证业务能正常开发
mock的实现方式
本地启mock服务器：
自己用express写接口本地用专门的mock服务
线上的mock服务器
fastmock 在线接口 Mock 平台
小结
mock 的功能是真的假数据；
可以在本地自己写接口，也可以采用web接口；
mock功能-使用项目中的mock功能
目标
写一个获取新闻列表的接口。url： /news/getList
思路
分析现有的代码功能，仿写一个。
目前已有的接口：http://localhost:9528/dev-api/vue-admin-template/table/list
创建mock文件
在mock目录下创建一个news.js文件
仿照table.js的写法，写入news.js的内容如下
module.exports = [
{
url: '/news/getList',
type: 'get',
response: config => {
return {
code: 20000,
data: ['第一条新闻', '第二条新闻', '第三条新闻']
}
}
}
]
引用mock文件
在mock/index.js中，引入news.js
const 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（修改两个文件）
目标
移除mock：由于我们本项目有配套的后端接口，所以不需要用到模拟数据，这里将mock部分删除掉。
两步
注释掉mock数据的代码 （1）main.js中删除（或注释）mock部分的功能 （2）vue.config.js中删除（或注释）掉
before: require('./mock/mock-server.js')
2.删除src/mock文件夹
注意
由于修改了vue.config.js需要重启项目
由于删除了mock功能，项目中原来的ajax请求会报404错误
推荐阅读
您阅读本篇文章共花了：
发表评论