使用流程

  1. npm install mockjs
  2. src/mock/index.js 导入mock并定义拦截接口 ```javascript //ts时 error找不到模块. 需要在shims-vue.d.ts中声明以下 import Mock from ‘mockjs’

//拦截ajax访问接口/mock/Job Mock.mock(‘/mock/Job’, ‘get’, { //表示返回五条数据 ‘data|5’: [{ id: ‘1’, name: ‘dasd’ }] })

  2. 3. main.ts 导入 `import './mock/index'`
  3. 3. axios设置 + 调用
  4. ```javascript
  5. import axios from 'axios'
  6. //定义http
  7. const $http = axios.create({
  8.   //设置baseUrl为/mock,调用时拼接上/Job
  9.   baseURL: '/mock',
  10.   timeout: 5000
  11. })
  13. //定义接口
  14. export const getJob = (data: any): any => {
  15.   return $http({
  16.     url: '/Job',
  17.     method: 'get',
  18.     params: data
  19.   })
  20. }
  22. //组件调用
  23. import {getJob} from '../http/job'
  24. onMounted(()=>{
  25.   getJob({}).then((res:any)=>{
  26.     console.log(res);
  27.   })
  28. })
  1. 此时访问”/mock/Job”就会被拦截并返回{}中的数据

    手写模拟mock

    image.png