mock--fastMock

Mock

mock js 可以拦截 axios 请求
生成随机数据 不走后台 API 接口
当去掉 mock 时 又可以 走 后台API
这一过程 改动 非常小 可以推动 项目 进

main.js 导入 使用 后台接口完善后 将 main.js 中导入 注释即可
如果 需要 注释 部分 mock 只需要 找到 mock–index.js 注释相应 函数即可

1 安装

npm i mockjs

2 配置 – 新建 mock文件夹–index.js

import Mock from 'mockjs'
import qs from 'qs'

// mock的配置
Mock.setup({
  // 随机延时500-1000毫秒 模拟网络延迟  发送接口的时间 控制在 500-1000
  timeout: '500-1000'
})

拦截请求，
第一个参数：url，使用正则去匹配(前面有baseURL) 正则// 转译–>//my/test/
第二个参数：请求方式 – 小写 get 大写无法拦截
第三个参数：return 生成数据的函数

Mock.mock(/\/my\/test/, 'get', () => {
  return { msg: '请求测试接口成功', result: [] }
})

@ 规则  要参考文档
 Mock.mock('@id')           单条数据
 Mock.mock({id:'@id'})      多条数据
 
 	"result|200": [
			{
				id: '@id',
				name: '@cname',
				addr: '@county(true)',
				age: '@integer(18,60)',
				birth: '@date()',
				sex: '@integer(0,1)',
			},
       ],

 模拟 API  参数 使用第三个参数  config =>{
    config-->调用接口时  参数
    config.url
    qs node 自带包 无需安装 可以处理  字符串解析
    将字符串' name='ww',age=18 ' parse 为对象

 }

Mock.mock(/\/member\/collect/, 'get', config => {
	const queryStr = config.url.substring(config.url.lastIndexOf('?') + 1)
	const { collectType, page, pageSize } = qs.parse(queryStr)
	const items = []
	for (let index = 0; index < pageSize; index++) {
		const item = Mock.mock({
			id: '@id', // 随机 id
			name: '@ctitle(10,20)', // 随机中文 10-20
			desc: '@ctitle(4,10)', // 随机中文 4-10
			price: '@float(100,200,2,2)', // 数字100-200的随机数，小数点的位数最小值与最大值都为2
			// http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_7.jpg
			picture: `http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_${Mock.mock(
				'@integer(1,8)'
			)}.jpg`,
		})
		items.push(item)
	}
	return {
		msg: '请求测试接口成功',
		result: {
			items,
			collectType: +collectType,
			page: +page,
			pageSize: +pageSize,
		},
	}
})

FastMock

fast mock main.js无需导入 直接在线调用 API

同 调用 后台 API 一致 结合 config.js 是否开启 线上 mock

https://www.fastmock.site/#/

账号密码

2 创建项目--接口基础路径   一般定义一个 标识  /api
3 新增接口
4 左侧 定义接口    右侧 遮罩层 定义接口数据
5 分为
baseURL--接口根地址
接口地址--/home/tableData
6 axios 正常调用即可
7 上线  替换  baseURL 即可