WireMock UI 基于 Wiremock Admin API 开发,用于 Stub Mapping 数据的可视化管理。
本项目为前端项目,仅提供可视化数据管理功能,不提供 Wiremock 实例服务管理、用户管理等功能。
如有需要请使用官方的 Wiremock Cloud 服务,或自行开发。
使用步骤
- 启动一个 Wiremock 服务,参考 webhooks-and-callbacks。
- 访问 https://qadoc.cn/wiremock,添加一个项目,填写服务地址。
- 选择刚添加的项目,开始使用(项目数据存放在浏览器的 LocalStorage)。
推荐使用在线网站 https://qadoc.cn/wiremock
npm install
安装项目依赖。- 以开发模式启动项目:
npm run dev
。
npm install
安装项目依赖。- 生产环境打包:
npm run build
。 - 将打包后生成的 dist 目录下的文件部署到相应服务器下。这里以 Nginx 为例。
域名部署
vite.config.ts 基础路径配置。
base: './',
Nginx 配置。
location / {
root /home/wwwroot/wiremock_ui;
index index.html;
try_files $uri $uri/ index.html;
}
二级目录部署
vite.config.ts 中修改二级目录路径,这里是 wiremock。
base: '/wiremock',
Nginx 配置。
location ^~ /wiremock {
alias /home/wwwroot/wiremock_ui/;
index index.html;
try_files $uri $uri/ /wiremock/index.html;
}
推荐开发环境:VSCode + Vue Language Features (Volar) 插件。
- 以开发模式启动项目:
npm run dev
。 - 运行单元测试:
npm run test:unit
。
- feature:Stubs - 详情页 - request - JSON/XML/HTML 编辑器
- feature:Stubs - 详情页 - request - customMatcher
- feature:Stubs - 详情页 - response - transformers
- feature:Stubs - 详情页 - 表单校验
- feature:Stubs - 搜索 - 高级搜索
- feature:Stubs - Record
- feature:Stubs - Import
- feature:Stubs - 场景管理
- feature:Stubs - 文件管理
- feature:Logs - 日志详情页 - 表单形式展示
- feature:Logs - 搜索 - 高级搜索
- feature:Settings - 语言选择
- feature:Settings - Wiremock 全局设置
- feature:Settings - 关机
- feature:Settings - 在线/离线检测?
- fix:重构详情页渲染数据结构(分块:general/request/response/postserveactions)