# mockcat

**Repository Path**: improvecoding/mockcat

## Basic Information

- **Project Name**: mockcat
- **Description**: Mockcat 是一个前后端分离开发的工具集。提供了Mock的接口定义、数据管理和接口测试，可记录文档历史，以及开发中常用的一些工具，还收藏了常用的工具网站。
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 44
- **Created**: 2023-01-12
- **Last Updated**: 2023-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Mockcat 开发工具集

## 项目简介

Mockcat是一款前端与后台分离开发的简易接口Mock数据工具集。提供了Mock数据的模块化管理，接口的定义和测试（支持JSON5/XML文档格式、[Mock.js](http://mockjs.com)的语法规则），Mock数据的操作日志，以及接口的Mock服务功能。另外，提供了开发中常用的工具，还收藏了一些工具类的网站。

在线示例地址：http://47.92.196.8:8181/

## 安装运行

1. 安装[Node.js](https://nodejs.org/zh-cn/)

2. 在控制台执行以下命令：

  > npm install

  > npm start

> 若运行压缩版，请将config.js中的debug置为false，然后执行`npm run build`，再执行`npm start`。

## 使用说明

**1. 添加Mock数据模块**

点击【添加模块】按钮可添加新的Mock数据模块。对于已添加的数据模块可以修改和删除。点击【版本历史】可以查看Mock数据修改的版本记录，点击【代理配置】（显示为端口号）可以配置Mock的端口与路由的URL（用于Mock数据时省略模块名，保持与开发的URL一致，例如：/=>/example/）。

![MockModule](app/images/mock-module.png)

**2. Mock数据文件编辑**

点击【MOCK数据编辑】页面中的模块名进入到Mock数据的编辑页面。Mock数据的存储使用的文件路径，与URL路径相对应，Mock数据的操作与文件操作相同。选择目录树的结点，可以添加、修改或删除结点，点击【导入】按钮，可批量或单个导入Mock数据、文件或文件夹。点击【导出】按钮，可以选择导出Query、入参和出参的POJO或Mock数据。点击【测试】可测试本地的Mock接口(类似于[Postman](https://www.getpostman.com/)，支持JSON5和XML的格式与注释)，点击【帮助】->【链接地址】可查看Mock数据或文件列表。

![MockEditor](app/images/mock-editor.png)

**3. Mock数据编辑器**

Mock数据目录只支持JSON和XML格式的数据，可以在JSON和XML数据中加入注释。一般会添加文件的头注释（对接口进行说明），也可以对字段进行注释（说明字段的含义）。*注：/\*\*/和<!---->注释不能嵌套，注释和数据编辑都可以使用快捷键操作，参照如下的快捷键列表。*

  3.1 全屏与查找替换

  ![MockFullscreen](app/images/mock-fullscreen.png)

  3.2 列表与编辑预览

  ![MockPreview](app/images/mock-preview.png)

  3.3 支持的快捷键列表

  ![ShortcutKey](app/images/shortcut-key.png)

**4. Mock接口测试**

存储到系统中的JSON和XML数据文件，可以用来测试本地的API接口。点击【测试】，弹出的测试Mock接口的对话框，会将模板中的URL、Method、Headers和入参直接填充到对应的输入框中，然后点击【发送】即可。首次的URL地址将会使用`http://127.0.0.1:8080`作为默认的服务器地址，可以手动修改为实际的API服务器地址，后续将会记录到Cookie中，不需要反复输入。若测试的接口需要登录认证，则需要先登录认证后再测试该接口。

![MockTest](app/images/mock-test.png)

**5. 数据的Mock服务**

开发过程中前端与后台开发都可协商修改接口数据结构，编辑好的Mock可以用于前端开发页面，也可用于后台测试。选择不同的目录结点，点击【帮助】->【链接地址】可查看Mock数据 *（可省略扩展名）*，如图所示。待后台开发完成后可将服务器地址切换到开发服务器进行调试了，可以在地址中添加`status`参数来指定返回的状态码。*注：编辑器对JSON和XML数据分别按JSON5和XML的标准进行了校验，只有符合标准才能保存和转换成Mock数据。*

![MockDirectory](app/images/mock-directory.png)

![MockData](app/images/mock-data.png)

## 其他工具

### 请求发送（HTTP）
发送HTTP请求，是一款网页版的用于测试HTTP请求的工具。

### 格式化（TEXT）
格式化JSON/XML/SQL等多种类型数据，并且可以校验一些数据结构的正确性。

### 对象推导（POJO）
根据JSON/XML/SQL建表语句的文本内容，推导出对应结构的JavaBean文件代码。

### 代码差异比较（CodeDiff）
基于ACE-Diff的代码差异比较器，支持差异内容高亮和差异内容的相互拷贝。

### 正则表达式（RegExp）
摘抄了百度百科关于正则表达式的知识点，可以参考和测试正则表达式。

### 表映射文件（MyBatis）
根据建表SQL语句和DAO/Model/Mapper模板，生成对应的MyBatis的映射文件。

### 日志参数匹配（SQL）
根据MyBatis的SQL日志，将Preparing与Parameters进行匹配和SQL格式化。

### 模板代码（Underscore.js）
基于Underscore.js模板语法，可以将JSON格式的数据填充到模板中，生成自定义的模板代码。

### 时间戳助手（Timestamp）
提供了近似标准的世界时区的时间，支持日期时间、不同时区与时间戳之间的相互转换。

### 电子表格（CSV）
网页版的CSV文件编辑器，支持类似于Excel工作表的基本操作、数据的导入与导出。

### 文件编辑器（Markdown）
网页版的Markdown文件编辑器，支持Markdown的基本语法、数学公式、流程图和代码高亮。

### 共享博客平台
一个简单的内部小型博客网站，可以用于记录、分享和交流的个人学习或技术笔记与博客文章。

### 工具网站收藏
收藏了一些开发中常用的工具网站。