< Back

Vue4.0使用mock

之前的版本好像是在根目录下搞个static目录啥的来使用mock，这个版本好像不能这样用了。

  • 先安装

npm install mockjs axios

npm install axios-mock-adapter --save-dev

  • 建一个放数据的文件

比如：src/mock/data/index.js

// import Mock from 'mockjs'
let homeData = {
  city: '北京',
  swiperList: [
    { id: '0001', imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201911/1d8faa9f4d49b77ca1e61e2b478260f7.jpg_750x200_25cf76e2.jpg' },
    { id: '0002', imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201912/37c4edf7c033ada7b61a1f9d0acffd08.jpg_750x200_3223c943.jpg' },
    { id: '0003', imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201912/d6df0db510d7b9aaa3d9ce4cffafeca1.jpg_750x200_abb38f14.jpg' }
  ]
}

export {
  homeData
}

这是个简单做法，官网上提供了一些Mock的方法来生成数据。

  • 建一个处理请求的文件

比如：src/mock/index.js

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
// import Mock from 'mockjs'
import {
  homeData
} from './data'
export default {
  start () {
    let mock = new MockAdapter(axios) // 创建 MockAdapter 实例
    mock.onGet('/homeData').reply(config => { //  config 指 前台传过来的值
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            homeData
          }])
        }, 200)
      })
    })
  }
}

这个大概就相当于服务器处理请求的文件吧

  • 建一个前端的api文件

    将api统一放这个文件，方便管理。比如src/api/api.js

    import axios from 'axios'
export const getHomeData = params => {
  return axios.get(`/homeData`, {
    params: params
  })
}

  • 使用

    import { getHomeData } from '@/api/api'
export default {
  created () { 
    getHomeData().then(res => {
      console.log(res)
    })
  }
}

参考：