基于swagger的前端自动化mock工具

3月的杭州，是花的海洋，自己种的郁金香也开花了～～～

KsgMock是一款前端自动生成mock工具，能够实现用户本地自定义mock能力，也能通过swagger一次生产所有接口的mock，其中也支持各种不同场景的配置。详细使用文档可以点击下面链接：

👉 vite-plugin-swagger-mock

ksgMock的由来

项目时间紧、业务复杂、任务重，大概所有人都会碰到这种项目，这种情况不会允许你有丝毫怠慢。所以前后端并行开发，在并行过程中有这样一种场景：后端数据服务还并未开发完成，我们却已经将所有页面重构及基本交互完成，此时我们不能就此等待后端的开发完成，这样是多么浪费生命。所以前端需要根据之前定义好的接口文档模拟mock数据，这样前后端才能真正的解耦。

恰好部门后端内部开始推广swagger， 基于springdoc可以快速构建swagger文档，而且对代码入侵性非常低。这甚得后端们喜欢，不用在手写接口文档，也不用在一个字段的对接口，文档变更也不需要反复沟通等。因此这就是KsgMock的来由之一。

KsgMock怎么用

ksgMock目前支持基于vite开发的项目，其他版本也正在陆续开发中...

1、首先安装ksgMock插件

npm i vite-plugin-swagger-mock --save-dev

2、在系统vite.config.ts配置文件中配置plugin，便拥有了ksgMock所有的能力

import { viteSwaggerMock } from "vite-plugin-swagger-mock";
export default () => {
  return {
    plugins: [
      viteSwaggerMock({
	// ksgMcok配置参数
      }),
    ],
  };
};

KsgMock能干什么

说了这么多，那么ksgMock到底能做什么。所谓纸上谈兵终则浅，在我们内部不少系统开始使用KsgMock去模拟数据，后端只需要提供给了我们Swagger文档，大批量的模拟数据全部由ksgMock自动完成，并且很完美的在项目中被调用，到后期前后端数据接口联调时，切换开关无缝对接。可以说KsgMock在这些项目的开发效率上起到了很关键的作用，减少了很多mock的成本，提高了人效。也解放了前端写mock悲痛的经历。下面看下ksgMock具体具备哪些能力。

1、支持本地编写mock

前端mock最主要的能力是能够支持本地自定义模拟各接口数据包括入参数，出参等，这也是KsgMock最基本的能力。因此我们定义了一套通用的mock数据结构：

{
    url: string //接口路径
    method: string // 请求方式
    desc: string // 接口描述
    params: [{type: "string", value: "taskName", required: false, desc: "任务名称"}] // 接口入参
    data: {code: 0, msg: 'success', data: []} // 接口出参
}

在项目中新建一个 mock.ts 文件，根据上述的数据结构依次编写各接口的mock文档，最后在使用ksgMock的时候配置docPath、docFileName指明 mock.ts 的路径、文件名即可，当启动项目的时候mock便生成了。

👉 可以参考example中的示例

2、支持mock文件的热更新

当然能够本地自定义mock数据是没啥问题，但不能写个接口就需要重启下服务，想必这也是非常糟糕的体验，因此在ksgMokc中实现了对于mock文件的热更新，这样我们就能开心的边写边调试接口了。

3、支持接口参数校验

一般后端都是强类型语言，在定义字段的时候都需要指明字段的类型，按照上述定义的数据结构，我们很容易拿到接口参数的类型以及是否必填等信息。当ksgMock拦截到项目中的接口时先进行参数的校验，如果参数校验通过则将data数据返回，否则返回参数校验之后的错误信息，保证了线上环境接口的统一。

4、支持swagger转为mock数据

这也是sgMock最重要的一个能力，通常让用户去手写一大堆的mock数据是十分麻烦的，像我们系统中多的几百个，要是一一手写，那工作量也是相当的大。因此后端给到前端swagger文档，ksgMock会将swagger文档里给出的信息变更为前端的mock数据，KsgMock可以自动化个过程，对swagger文档的数据进行抓取，并根据配置的docPath写入到系统项目中。ksgMock还支持以下能力：

• 支持用户自定义mockjs的规则。配置mockFunc设置string、integer、boolean的mockjs规则
• 对数组类型的返回值，支持配置arrayRandom可以设置随机生成数组的长度
• 支持接口返回的successCode、errorCode值
• 支持接口变动配置override每次重启服务都会重新根据swagger生成mock

当然ksgMock的能力还不止这些，详细的配置可以看文档api描述。

KsgMock的规划

目前ksgMock还是在前期实验阶段，可能也会有一些不为我们所知的bug，所以希望通过大家不断的去实践和完善，共同维护和发展。在项目中不断的去沉淀它的能力。后续我们还将会提供可用于Webpack配置的插件，让用户的高效方式变得更多元化。敬请期待呦～～