前端Mock工具

1.安装mockjs

npm install mockjs -D
或
yarn add  mockjs -D    //  -D可加可不加,看自己的需求

2.如图,mock生成随机数据，拦截 Ajax 请求

3.在用axios发送请求时

如果使用mock的话就不要用baseURL,将它注释了

import AX from 'axios'

const axios = AX.create({
  timeout:8000
 // baseURL:''    
})

export default axios

4.使用mockjs

在创建mockjs配置时,先在main.js或者mian.ts中设置

要引入之后才能使用

import './mock/mock'

mock.js

import Mock from 'mockjs'   //引入Mock

Mock.mock('/app/login', 'get', () => {        //   /app/login  自定义的请求地址   get自定义请求方式

   // @cname 随机中文名
  // 'age|18-35'   随机年龄在18-35岁之间
  // 'gender|1'  三个里面随机一个
  // @city  随机城市名

  let list = { name: '@cname', 'age|18-35': 25, 'gender|1': ['男', '女', '嬲', '女男女'],
   'education|1': ['文盲', '半文盲', '研究生', '导师', '教授'],
    city: '@city', imgurl: "@image('300×300','#f50','#666','Mock.js')" }

  生成后端数据,声明的变量名要用return返回
  let arr = Mock.mock({
    'listuser|200': [list]
  })

  return arr
})

使用时和日常开发一样的写法

import axios from '@/utils/http'

export const $_login = ()=>axios.get('/app/login')

添加一个小提示:

如图:提示找不到mockjs模块

npm i --save-dev @types/mockjs