mock--模拟数据

ok,我们需要的mock终于来了,开心吗?我反正很开心,因为之前我不会,现在由我分享,哈哈哈,不多说,next

mock是啥玩意?

  • 生成随机数据,拦截 Ajax 请求

为什么需要mock这玩意?

前端的页面编写速度要快于后台的接口编写速率,为了减小联调时间,把重要的流程走完,之后之间换一个接口,进行小范围的修改即可,之前的时候,我们也是用假的数据,json文件的形式,这种数据假的不能再假,太不灵活了,而且还需要切换url。后来,前端工程师终于受不了,自己编写了mock,拦截客户端的ajax请求,直接给自己传数据。

—》你看,用户量还行吧
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E31FcFk7-1578238608561)(images/screenshot_1578231012015.png)]

安装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
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值