前要

目前的代码生成器基本上是基于数据库表格来生成对应的前后台代码，好处是前后台一次性搞定．但实际开发中，很多的业务是需要连表的，所以这种情况来说，根据接口直接生成前代码，就免除了与后台接字段的时间，也免除了很复制操作．

由此，我生出编写根据接口生成前端代码生成器的想法． 因为我司api文档有两种，前端又有vue2+element 和 vue3+ant+ts两种框架，由此，扩展出三种代码生成器．

思路

前端代码生成器，简单的说：

　第一步，通过接口文档获取接口的入参＼出参，并将这入参\出参格式化成特定JSON

　第二步，根据自己的项目，结合表格、表单组件，抽离出代码模板

　第三步，通过第一二步的JSON、代码模板，生成vue、JS以及路由文件

简介

本项目采用puppeteer对接口文档网页读取，获得接口链接、入参、出参等，并记录半生成特定格式的json．

技术方案

获接口文档中接口的入参＼出参，我采用爬虫框架puppeteer来获取，根据获得的入参\出参，结合代码模板，生成实际放入工程的增删改查文件，做到增删改查基本不用再码代码．同时支持审核等表格操作

通过fs.writeFile来生成文件

说明

目前项目中只给了根据接口生成vue2+element的代码．代码是根据特定组件生成的． 因项目是为了配合公司的接口文档，生成公司的后台管理网站，定制化较高，所以此项目对于其他朋友来说，可做参考，也可能过修改模板来实现自己工程的代码生成．如其他交流，可以联系我．

表格、表单组件见项目中组件目录，这个需要全局引入．见components目录

另有生成vue3+typescript+ant的代码，暂未公布．

组件说明

后台管理系统大部分是由表格＋表单的页面，而表格＼表单要一个个去写，特别是还有自己的样式要求的情况，需要添加class之类的蛮麻烦，有时候一个拼写错误＼复制的时候没注意，就可能要找半天，看起来麻烦，本人更喜欢配置型的代码，所有站在高人的肩膀上，改出这个表格、表单组件．不喜勿喷．

配置说明

scale的配置

// 适用于scale的配置
export const config = {
  href: 'http://xxx.cn/',
  serverName: 'AdminStoreContractService',
  pages: [{
    filePath: 'promotionNew',     // 列表＼新＼修页面所在路径
    chunkName: 'base', // chunkName 用于路由中 require.ensure 打包参数
    list: { // 列表
      fileName: 'pn-list', // 列表文件名字
      name: '列表', // 菜单名
      apiName: 'listStoreContract',  // 列表接口名
      exportFile: { // 导出 [非必填]
        apiUrl: '',
        downFileName: ''
      }
    },
    modify: { // (修改＼新增)  [非必填]
      fileName: 'modify',  // 页面名
      apiName: 'saveStoreContract',  // 接口名
      detailApi: 'getStoreContractById', // 查看详情接口名 (用于查看详情、编辑)
      hasEdit: true
    },
    opts: [ // 表格行操作
      {
        apiName: 'modifyStoreContractStatus', // 接口
        confrimMsg: '确认审核该记录', // 如果没有确认信息，则直接请求
        text: '审核'
      }
    ]
  }]
}
复制代码

swagger api 的配置

// 适用于swagger api 的配置
export const swaggerConfig = {
  href: 'http://xxx.com',
  serverName: 'mini-new-promotion-service',
  baseUrl: '/promotion-new/manager/',
  pages: [{
    filePath: 'promotionNew',     // 列表＼新＼修页面所在路径
    chunkName: 'base', // chunkName 用于路由中 require.ensure 打包参数
    list: { // 列表
      fileName: 'pn-list', // 列表文件名字
      name: '列表', // 菜单名
      apiName: 'getPromotionList',  // 列表接口名
      exportFile: { // 导出 [非必填]
        apiUrl: '',
        downFileName: ''
      }
    },
    modify: { // (修改＼新增)  [非必填]
      fileName: 'modify',  // 页面名
      apiName: 'savePromotion',  // 接口名
      detailApi: 'promotionDetail', // 查看详情接口名 (用于查看详情、编辑)
      hasEdit: true
    },
    opts: [ // 表格行操作
      {
        apiName: 'updPromotionConfigStatus', // 接口
        confrimMsg: '确认审核该记录', // 如果没有确认信息，则直接请求
        text: '审核'
      }
    ]
  }]
}
复制代码

代码生成命令

　 目前本项目支持两种api文档，　第一种支持swagger api；第二种支持scale[这种用户比较少]

执行命令前，请在config.ts/swaggerConfig.ts中将配置修改好，如配置好需要生成的代码的网址

• swagger的代码命令

yarn run scr
复制代码

• scale的代码命令

yarn run start
复制代码

生成的文件：

废话不多说，上代码：

https://gitee.com/myreborns/curd

复制代码

生成器持续更新中，欢迎各位小伙伴交流，如果好用，给个赞．

scale\swagger对比