vue2 mock数据

mockjs 作用：生成随机数据，拦截 Ajax 请求
目的：很多时候前端开发页面的过程中，后端的接口并没有写好，这个时候需要前端自己定义接口及接口的返回数据的结构体，这个时候就需要用到mock数据,有了mock接口之后，前端就像是有完整的后端一样，等待后端接口开发完成之后，前端就直接将 请求的地址切换到后端服务器就可以无缝切换接口的服务了。
市场：目前市场上mock 大概分为两类：在线mock 网站 本地项目中进行mock 【中大型项目中一般都是使用本地mock 】
官网链接：http://mockjs.com/

1 安装 插件

yarn add axios mockjs 
或 
npm i axios mockjs

　　

2 通过json数据 模拟拦截接口

• 创建json文件 src/mock/goodsList.json

{
    "code":200,
    "data":[
        {"title":"小米12Pro","price":3400},
        {"title":"华为mete 50","price":3666.66},
        {"title":"oppo xxx","price":3100},
        {"title":"vivo xxx","price":2600},
        {"title":"一加 11Pro","price":4100}
    ]
}

　　

• 使用mock 拦截接口请求，并返回json数据 src/mock/mockServer.js

//导入mockjs 
import Mock from 'mockjs'

// 导入json 数据
import goodsList from './goodsList.json'


// 拦截接口 返回mock的数据
Mock.mock('/goods/list',goodsList)

　　

• 在main.js 中导入 mock接口拦截文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入mock接口的拦截
import '@/mock/mockServer.js'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

　　

• 组件中调用接口

<script>
import axios from 'axios';
export default {
  created() {
     axios.get('/goods/list').then(res=>{
      console.log(res);
     })
  }
}
</script>

　　

3 高级mock规则自动生成数据

• 拦截接口设置：src/mock/mockServer.js

//导入mockjs 
import Mock from 'mockjs'

// 导入json 数据
import goodsList from './goodsList.json'


// 拦截接口 返回mock数据
Mock.mock('/goods/list',goodsList)


// 拦截接口，返回mock快速生成批量数据
Mock.mock('/users/list','get',{
    code:0,
    msg:'获取成功',
    data:{
          // 生成十个如下格式的数据
    'list|10': [
        {
          'id|+1': 1, // 数字从当前数开始依次 +1
          'age|18-40': 20, // 年龄为18-40之间的随机数字
          'sex|1': ['男', '女'], // 性别是数组中随机的一个
          name: '@cname', // 名字为随机中文名字
          email: '@email', // 随机邮箱
          isShow: '@boolean', // 随机获取boolean值
        },
      ]
    }
})

　　

• 测试接口

import axios from 'axios';
export default {
  created() {

    axios.get('/users/list').then(res=>{
      console.log(res);
    })
  }
}