前端根据接口数据自动生成api文件

简介

大家好,我是chenms

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

获取接口数据的url

yapi

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

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

apifox

1. 下载桌面端apifox

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

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

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

自动代码生成的页面展示

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

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

生成的文件如下

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

生成的文件如下

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

生成的文件如下

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

生成的文件如下

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

生成的文件如下

使用

1. 安装

npm i chenms_auto_create_file

2. 参数介绍

备注: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

注意:

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

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

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

---

formateInterfaceCb

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

注意:

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

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

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

---

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

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

注意:

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

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

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

---

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

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

注意:

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

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

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

---

formateFileNameCb

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

注意:

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

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

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

生成的文件名称

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

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

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

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

项目中使用

1. 在根目录下创建一个文件夹,如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')
  }
})

两个文件如下图所示

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

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

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

3. 在控制台运行对应的命令

npm run apits

npm run apijs

4. 上面的配置生成的文件夹及文件目录如下

接口测试数据

可以到

www.npmjs.com/package/che...

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

导入对应数据

yapi

apifox

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

gitee.com/chenmiaoson...

npm地址

www.npmjs.com/package/che...

注意点

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

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

yapi apifox

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

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

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