ok,我们需要的mock终于来了,开心吗?我反正很开心,因为之前我不会,现在由我分享,哈哈哈,不多说,next
mock是啥玩意?
- 生成随机数据,拦截 Ajax 请求
为什么需要mock这玩意?
前端的页面编写速度要快于后台的接口编写速率,为了减小联调时间,把重要的流程走完,之后之间换一个接口,进行小范围的修改即可,之前的时候,我们也是用假的数据,json文件的形式,这种数据假的不能再假,太不灵活了,而且还需要切换url。后来,前端工程师终于受不了,自己编写了mock,拦截客户端的ajax请求,直接给自己传数据。
—》你看,用户量还行吧
安装mock
- 如果是写原生页面,直接在bootcdn找
https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock.js
- 如果是组件开发或其他直接可以下载插件
npm install mockjs --save-dev
// 第一步:引入mockjs
import Mock from 'mockjs'
//第二步,引入全局的main.js中
import './assets/js/mock'
//第三步 制作mockjs模拟数据
Mock.mock('/userList',{
"userList|10":[
{
"id":"@id",
"name":"@name(true)", //英文名,中文是cname first是名,last是姓
"age":"@integer(20,30)",
"image":"@image(100x100,red,Mark)",
"email":"@email",
"birthday":"@date",
"city":"@city(true)",
"gender":"@integer(0,1)",
"image":"@image(100x100,#232323,Mark)"
}
]
})
Mark:如果我们看不懂@XX表示啥意思,别急,后面会讲到,如果你很着急,
我现在先给你show一下,进入mockjs的原生代码,走起
// 第四步:使用此接口数据
getUserList(){
this.$ax