2021-05-23

mock的使用方法

在前端日常开发过程中，我们会遇到后端接口尚未提供的时候，此时要想前端开发能够正常进行就可以用mock来模拟后端接口返回的数据，大家一起来学习一下mock的用法吧

1. 依赖安装

执行命令npm install mockjs 来安装依赖

2. 编辑mock.js文件

然后建一个mock的文件夹里面存放index文件，在index文件里我们引入mock

//引入mock
import Mock from 'mockjs'
//伪造数据
const data = {
    'id': '123445',
    'name': 'get',
    'age|1-10': 1,
    'email': '@email'
}
//拦截ajax请求，传参第一个是url地址，第二个是传参方式，第三个是返回的数据
Mock.mock('123445','get', res=>{
    return data
})
export default Mock

3. mock在组件中使用

我们可以将mockjs引入main.js,这样就不用每个用到的组件都引入

import Mock from '@/mock'
new Vue({
  router,
  store,
   Mock,
  render: h => h(App)
}).$mount('#app')

这样我们正常发送ajax请求就好了

    getinfoByPost() {
      axios.get("123445").then((res) => {
        console.log(res.data);
      });
    },

这样我们就能拿到我们返回的数据了