mock的基本使用

mock部分

• 1、下载mock npm install mockjs
• 2、准备json数据（在mock）文件下创建相应的json文件
• 3、把mock数据需要的图片放到public文件下，【public文件夹在打包的时候，会相应的把资源原封不动的打包到dist文件夹】
• 4、创建mock文件夹下面创建mockServe.js文件通过mockjs插件实现模拟

import Mock from 'mockjs'
// 把json数据引入进来
// webpack 默认对外暴露的资源:图片 json数据格式
import banner from './banner.json'   //这是你创建的json文件
import floor from './floor.json'
// 需要两个参数,第一个是请求的地址,第二个参数是请求数据
Mock.mock('/mock/banner', { code: 200, data: banner })

• 5、mockServe.js在入口文件中引用(main.js)

import '@/mock/mockServe.js'

接口部分

• 在src的Api文件夹下面创建mockAjax.js文件

import axios from 'axios'
const requests = axios.create({
  baseURl: '/mock',
  timeout: 5000,
})

• 在src的Api文件夹下面创建index.js文件

// 所有的api接口进行统一管理
import mockRequests from './mockAjax'

export const reqGetBannerList = () => {
  return mockRequests({ url: '/mock/banner', method: 'get' })
}

使用

import { reqGetBannerList } from '@/APi'
async getBannerList() {
    const result = await reqGetBannerList()
    console.log(result.data)
  },