松哥splitman的微博，前端接口数据自动生成API实操分享

简介

大家好,我是chenms

这是一个根据yapi或者自动生成api文件的工具插件,主要逻辑是根据yapi或者接口工具拿到接口数据,然后根据返回的数据通过的把对应的接口数据进行整合写入到项目的文件夹内

获取接口数据的url

yapi

登录yapi切换到设置栏然后点击生成 ts services
拿到下面json里的remoteUrl字段

这个字段的值主要是用来生成所有的接口数据的

apifox

下载桌面端apifox

打开自己的接口目录如下图,点击加号小图标右边的三个点小图标调出项目预览

在项目预览页面点击立即生成按钮,如下图

4.如下图,画红框的地址就是生成接口数据的url

自动代码生成的页面展示

该插件提供了createApiTs、createApiJs、createInterface、 createStoreTs、createStoreJs等方法

createApiJs根据数据生成对应的接口的js文件及代码

生成的文件如下

createApiTs根据数据生成对应的接口的ts文件及代码

生成的文件如下

createInterface根据数据生成对应的接口返回数据的ts类型

生成的文件如下

createStoreJs根据数据生成对应的pinia的js文件

生成的文件如下

createStoreTs根据数据生成对应的pinia的js文件

生成的文件如下

使用

安装

npm i chenms_auto_create_file

参数介绍

备注:hostname、port、path这三个参数主要由接口工具那边获取,上面有介绍怎么拿到接口的url

例如:

yapi

接口的url为:

http://39.106.196.57:3000/api/open/plugin/export-full?type=json&pid=150&status=all&token=9e5b30f82c324b31b4826cd54593a608a7301326e0e65e8948b313cc02808980

那么

hostname: 39.106.196.57
port: 3000
path: /api/open/plugin/export-full?type=json&pid=150&status=all&token=9e5b30f82c324b31b4826cd54593a608a7301326e0e65e8948b313cc02808980

apifox

接口的url为

http://127.0.0.1:4523/export/openapi?projectId=3440180&specialPurpose=openapi-generator

那么

hostname: http://127.0.0.1
port: 4523
path: /export/openapi?projectId=3440180&specialPurpose=openapi-generator

参数

hostname

获取接口数据的host
类型:string
默认值:
例子: 39.106.196.57

port

获取接口数据的端口号
类型:string
默认值:
例子: 4523

path

获取接口数据的path
类型:string
默认值:
例子: /export/openapi?projectId=3440180&specialPurpose=openapi-generator

createPath

生成文件要放置的目录
类型:string
默认值:
例子: path.resolve(__dirname, ../src/api)

apiPrefix(生成pinia文件才会用到的参数)

导入api目录的前缀
类型:string
默认值:
例子: @/api

如下图,这个参数是用来取api文件的路径前缀的

interfacePrefix

导入interface目录的前缀
类型:string
默认值:
例子: @/interface

topTemplate

头部需要引入的
类型:string
默认值:
例子: import request from @/service/index

如下图,设置这个参数,那么这个参数的值会写入到各个文件的最上方

excludeList

不自动生成接口的url,这个字段主要用来过滤不想生成接口的url
类型: array
默认值: []
例子: [/time/list]

isDelExcessiveFile(生成pinia文件才会用到的参数)

是否要删除生成pinia文件夹里非自动生成的文件
类型:boolean
默认值: false
例子: false

如下图假设aaa.js是非自动生成的文件,如果参数设置为true的话,运行生成命令的话会自动把aaa.js文件去掉

回调

formatePathCb

对url进行处理的回调
不设置的话会默认返回小驼峰, 如:参数path为 /my/list/detailed的接口会默认返回 myListDetailed

注意:

这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置
如果直接返回pathTitle也会返回默认设置
因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里
所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成

formatePathCb: (pathTitle) = { return pathTitle.replace( /(/|-|_)/g , )}

如下图,上面回调设置会生成对应的函数名称,也就是函数名称是根据上面pathTitle写的正则规则去生成的名字,上面写什么样的规则就会生成什么样的名称

formateInterfaceCb

对interface进行处理
不设置的话会默认返回 I${pathTitle} 也就是处理后的path前面加I

注意:

这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置
如果直接返回pathTitle也会返回默认设置
因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里
所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成

formateInterfaceCb: ( pathTitle ) = { return `I ${pathTitle} 123` }

如下图,上面回调设置会生成对应的ts文件名称

formateStateCb(生成pinia文件才会用到的回调)

对pinia的state里的数据字段进行处理
不设置的话会默认返回 ${pathTitle}Data 也就是处理后的path前面加Data

注意:

这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置
如果直接返回pathTitle也会返回默认设置
因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里
所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成

formateStateCb: ( pathTitle ) = { return ` ${pathTitle} Datt` }

复制代码

formateStateCb: (pathTitle) = { return `${pathTitle}Datt` }

如下图,上面回调设置会生成对应的ts文件名称

formateActionCb(生成pinia文件才会用到的回调)

对pinia的action里的数据字段进行处理
不设置的话会默认返回 ${pathTitle}Api 也就是处理后的path前面加Api

注意:

这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置
如果直接返回pathTitle也会返回默认设置
因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里
所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成

formateActionCb: ( pathTitle ) = { return ` ${pathTitle} Api456` }

如下图,上面回调设置会生成对应的ts文件名称

formateFileNameCb

对生成的文件名称进行处理
不设置的话会默认返回 ${pathTitle}名称

注意:

这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置
如果直接返回pathTitle也会返回默认设置
因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里
所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成

formateFileNameCb: (pathTitle) = { return pathTitle.split( -- )[ 1 ]}

如下图是apifox文件名称包含有中文跟英文,通过上面的回调设置可以把中文跟英文以--分割开,然后取后面那个当作文件名,这个到时候具体看后端文件名称怎么命名的,可以通过这个回调去自定义文件名称

生成的文件名称

formateApiBodyCb(生成api文件才会用到的回调)

对生成的api里的body进行处理

formateApiBodyCb: ( item, pathTitle ) = { return `request. ${item.method.toLowerCase()} (" ${item.path} ", data);` }

如下图,上面回调设置会生成对应的接口请求

项目中使用

在根目录下创建一个文件夹,如expand,然后在文件夹里创建文件,如createJs.js

如果项目是用js写的,可以编写如下配置

const { createApiJs, createStoreJs } = require ( chenms_auto_create_file ) const path = require ( path ) // 公共的参数 const commonJson = { // yapi接口文档的配置 // hostname: 39.106.196.57, // port: 3000, // path: /api/open/plugin/export-full?type=json&pid=130&status=all&token=9e5b30f82c324b31b4826cd54593a608a7301326e0e65e8948b313cc02808980, // apifox接口文档的配置 hostname : 127.0.0.1 , port : 4523 , path : /export/openapi?projectId=3440180&specialPurpose=openapi-generator , interfaceType : apifox , // 导入interface目录的前缀 interfacePrefix : @/interface , // 不自动生成接口的url,这个字段主要用来过滤不想生成接口的url,默认是空数组 excludeList : [ /time/list ], // 对url进行处理的回调 // 不设置的话会默认返回小驼峰, 如:参数path为 /my/list/detailed的接口会默认返回 myListDetailed // 注意:1.这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置 // 2.如果直接返回pathTitle也会返回默认设置 // 因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里, // 所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成 formatePathCb : ( pathTitle ) = { return pathTitle.replace( /(/|-|_)/g , ) }, // 对生成的文件名称进行处理 // 不设置的话会默认返回 `${pathTitle}`名称 // 注意:1.这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置 // 2.如果直接返回pathTitle也会返回默认设置 // 因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里, // 所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成 formateFileNameCb : ( pathTitle ) = { return pathTitle.split( -- )[ 1 ] }} // 生成pinia的函数 createStoreJs({ config : { ...commonJson, // 生成文件要放置的目录 createPath : path.resolve(__dirname, ../src/store ), // 导入api目录的前缀 apiPrefix : @/api , // 头部需要引入的 // 这边会让对应的文件内容跟这个模板里的内容做比较,如果有存在了头部就不会再引入,不存在才引入 topTemplate : `` , // 是否要删除生成pinia文件夹里非自动生成的文件 isDelExcessiveFile : false , // 对pinia的state里的数据字段进行处理 // 不设置的话会默认返回 `${pathTitle}Data` 也就是处理后的path前面加Data // 注意:1.这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置 // 2.如果直接返回pathTitle也会返回默认设置 // 因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里, // 所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成 formateStateCb : ( pathTitle ) = { return ` ${pathTitle} Datt` }, // 对pinia的action里的数据字段进行处理 // 不设置的话会默认返回 `${pathTitle}Api` 也就是处理后的path前面加Api // 注意:1.这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置 // 2.如果直接返回pathTitle也会返回默认设置 // 因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里, // 所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成 formateActionCb : ( pathTitle ) = { return ` ${pathTitle} Api123` } }}) // 生成api的函数 createApiJs({ config : { ...commonJson, // 生成文件要放置的目录 createPath : path.resolve(__dirname, ../src/api ), // 头部需要引入的 // 这边会让对应的文件内容跟这个模板里的内容做比较,如果有存在了头部就不会再引入,不存在才引入 topTemplate : `import request from @/service/index` , // 对生成的api里的body进行处理 // eslint-disable-next-line no-unused-vars formateApiBodyCb : ( item ) = { return `request. ${item.method.toLowerCase()} (" ${item.path} ", data);` } }})

如果项目是用ts写的,可以编写如下配置

const { createApiTs, createStoreTs, createInterface } = require ( chenms_auto_create_file ) const path = require ( path ) // 公共的参数 const commonJson = { // yapi接口文档的配置 hostname : 39.106.196.57 , port : 3000 , path : /api/open/plugin/export-full?type=json&pid=130&status=all&token=9e5b30f82c324b31b4826cd54593a608a7301326e0e65e8948b313cc02808980 , // apifox接口文档的配置 // hostname: 127.0.0.1, // port: 4523, // path: /export/openapi?projectId=1787425&specialPurpose=openapi-generator, // method: GET, interfaceType : yapi , // 导入interface目录的前缀 interfacePrefix : @/interface , // 不自动生成接口的url,这个字段主要用来过滤不想生成接口的url excludeList : [ /time/list ], // 对url进行处理的回调 // 不设置的话会默认返回小驼峰, 如:参数path为 /my/list/detailed的接口会默认返回 myListDetailed // 注意:1.这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置 // 2.如果直接返回pathTitle也会返回默认设置 // 因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里, // 所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成 formatePathCb : ( pathTitle ) = { return pathTitle.replace( /(/|-|_)/g , ) }, // 对interface进行处理 // 不设置的话会默认返回 `I${pathTitle}` 也就是处理后的path前面加I // 注意:1.这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置 // 2.如果直接返回pathTitle也会返回默认设置 // 因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里, // 所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成 formateInterfaceCb : ( pathTitle ) = { return `I ${pathTitle} 56` }, // 对生成的文件名称进行处理 // 不设置的话会默认返回 `${pathTitle}`名称 // 注意:1.这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置 // 2.如果直接返回pathTitle也会返回默认设置 // 因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里, // 所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成 formateFileNameCb : ( pathTitle ) = { return pathTitle.split( /[()]/g )[ 1 ] }} // 生成pinia的函数 createStoreTs({ config : { ...commonJson, // 生成文件要放置的目录 createPath : path.resolve(__dirname, ../src/store ), // 导入api目录的前缀 apiPrefix : @/api , // 头部需要引入的 // 这边会让对应的文件内容跟这个模板里的内容做比较,如果有存在了头部就不会再引入,不存在才引入 topTemplate : `` , // 是否要删除生成pinia文件夹里非自动生成的文件 isDelExcessiveFile : false , // 对pinia的state里的数据字段进行处理 // 不设置的话会默认返回 `${pathTitle}Data` 也就是处理后的path前面加Data // 注意:1.这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置 // 2.如果直接返回pathTitle也会返回默认设置 // 因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里, // 所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成 formateStateCb : ( pathTitle ) = { return ` ${pathTitle} Datt` }, // 对pinia的action里的数据字段进行处理 // 不设置的话会默认返回 `${pathTitle}Api` 也就是处理后的path前面加Api // 注意:1.这个function的返回值只能是字符串,如果返回其他类型的则会返回默认设置 // 2.如果直接返回pathTitle也会返回默认设置 // 因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里, // 所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成 formateActionCb : ( pathTitle ) = { return ` ${pathTitle} Api123` } }}) // 生成api的函数 createApiTs({ config : { ...commonJson, // 生成文件要放置的目录 createPath : path.resolve(__dirname, ../src/api ), // 头部需要引入的 // 这边会让对应的文件内容跟这个模板里的内容做比较,如果有存在了头部就不会再引入,不存在才引入 topTemplate : `import request from @/service/home` , // 对生成的api里的body进行处理 // eslint-disable-next-line no-unused-vars formateApiBodyCb : ( item, pathTitle ) = { // pathTitle参数较好不要做任何处理,因为pathTitle的规则是根据公共参数中formateInterfaceCb回调来生成的 return `request. ${item.method.toLowerCase()} ${pathTitle} (" ${item.path} ", data);` } }}) // 生成interface的函数 createInterface({ config : { ...commonJson, // 生成文件要放置的目录 createPath : path.resolve(__dirname, ../src/interface ) }})

两个文件如下图所示

在根目录的package.json中的scripts添加如下代码

"scripts" : { "apijs" : "node expand/createJs.js && prettier --write ." , "apits" : "node expand/createTs.js && prettier --write ." }

项目中有配置的可以加&&后面的代码,这样生成的文件就会根据规则自动格式化

在控制台运行对应的命令

npm run apits

npm run apijs

接口测试数据

可以到

gitee.com/chenmiaoson…

测试项目的中json文件夹里拿

导入对应数据

yapi

apifox

示例项目地址(可以把它下载下来运行看看自动生成文件的效果)

gitee.com/chenmiaoson…

npm地址

www.npmjs.com//che…

注意点

如果interfaceType参数设置为apifox执行自动生成文件的命令的时候出现problem with request: connect ECONNREFUSED 127.0.0.1:4523那说明是因为没有打开客户端apifox,打开即可

根据接口返回的数据自动生成interface文件,这一步我们是有跟后端商量把接口返回的示例数据放在备注里,如下图

yapi

apifox

然后再拿到数据根据后端写的示例自动生成接口文件,生成的文件如下图

所以使用要使用此插件去生成interface文件的话,你们也要跟你们的后端先商量好把接口返回的数据放在备注里面,不然可能会报错

因为生成pinia相关文件之后,再次生成的话并不会直接把新的覆盖到旧的去,只会比较新旧差异,然后再把有差异的添加到旧的文件里,所以这个设置完之后尽量不要再修改了,除非pinia文件还未生成,不然很多参数设置都跟pinia生成的文件内容相关联,如果重新再设置其他规则的话就很有可能会对不上

作者：_松哥链接：https://juejin.cn/post/72989756

简介

获取接口数据的url

yapi

apifox

自动代码生成的页面展示

使用

参数

hostname

port

path

createPath

apiPrefix(生成pinia文件才会用到的参数)

interfacePrefix

topTemplate

excludeList

isDelExcessiveFile(生成pinia文件才会用到的参数)

回调

formatePathCb

formateInterfaceCb

formateStateCb(生成pinia文件才会用到的回调)

formateActionCb(生成pinia文件才会用到的回调)

formateFileNameCb

formateApiBodyCb(生成api文件才会用到的回调)

项目中使用

接口测试数据

示例项目地址(可以把它下载下来运行看看自动生成文件的效果)

npm地址

注意点

相关文章