IMock - 接口模拟工具
🌟 核心特性
🚀 请求模拟
- 支持
GET /POST /PUT /DELETE 等 HTTP 方法
- 自定义响应状态码(200/401/500 等)
- 模拟请求头/响应头设置
🛠 快速开始
1. 首先在前端项目中设置代理
- 代理地址和端口目前在插件中是固定的,后期版本会开放灵活配置
"http://localhost:3000" 例如 vue 项目,在 vue.config.js
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
"/api": {
target: "http://localhost:3000",
changeOrigin: true,
pathRewrite: {
"^/api": "",
},
},
},
},
});
2. 开启 Mock 服务
- 打开插件后会发现有两个按钮, 点击配置 mock 按钮进行配置 mock 数据;
- 开启服务
- 配置好 Mock 数据后,需要打开服务,才能正常的调用 Mock 接口
- 开启服务按钮与插件底部状态栏中的开启/关闭服务是同步的,根据自己的喜好点哪里都可以;
3 配置 Mock 数据
- 总共有三个输入项(接口名,请求类型,响应接口);
- 接口名
- 不需要服务器地址 和 端口 以及问号后面的 参数
http://localhost:3000/page/getList?abc=666 // 只需要输入 /page/getList
- 请求类型
下拉自行选择
- 请求结果
- 请输入 json 格式的字符串,否则会提示格式错误
- 返回的是 json 对象
最后
- 这个是提交的第一个版本,请大家多提意见
- 后续会添加新的菜单,将支持新功能
注意
- 本插件用的 view 层用的是 CDN,
- 如果您的开发环境无法联网,插件将无法使用
- 这个问题将在下个版本中得到解决
| |