mock--模拟数据

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