vue项目集成mock.js

-

mockjs是用来拦截请求，模拟数据的，使前端不用等待后端出接口，就可以模拟接口来开发业务

mockjs官网：http://mockjs.com/

安装：

npm install mockjs

在src目录下创建mock文件夹

 

 mock/index.ts

import Mock, { Random } from 'mockjs'
Random.first()
Mock.mock('/mock/job', 'get', {
  code: 200,
  'data|5': [{
    'id|1-10': 1,
    'name': '@first', // 模拟名称
    'age|20-30': 20,
    'job':'工作'
  }]
})

使用ts，引入第三方库时，会报错，没有声明类型；

需要在声明文件 .d.ts文件中声明模块：如在shims-vue.d.ts中

declare module 'mockjs'

在main.ts中引入

import '@/mock/index'

 

写一个接口：

export function getJob(data: any):any {
  return http({
    url: '/mock/job',
    method: 'GET',
    params: data
  })
}

页面中调用

getJob({}).then((res:any) => {
         data.jobs = res.data;
       })

 

-