a tool for automating generate entity page code by swagger

Install

npm install swagger-to-code --save-dev
// 也可以 npm install -g swagger-to-code

Usage

1. package.json 添加启动命令,并运行命令 clone:swagconf 生成 swagger-to-code-config 配置文件

"clone:swagconf": "clone-swag-config-cli --repoUrl https://github.com/wqs576222103/swagger-to-code-config.git --branchName main --outputPath ./static/swagger-to-code-config",
"gen:request": "gen-request-cli -path ./static/swagger-to-code-config",
"gen:page": "gen-page-cli -path ./static/swagger-to-code-config",
"gen:entity": "npm run clone:swagconf & npm run gen:page & npm run gen:request"

添加的命令的解释：

npm run clone:swagconf 拉取指定仓库指定分支模板到本地指定目录

npm run gen:request 生成请求方法

npm run gen:page 生成模板页面、模板相关路由

2. 在 swagger-to-code-config 目录下，根据实际情况修改配置。

   2.1 修改配置文件 config.js、pageConfig.js、requestConfig.js、swaggerConfig.js。如果不清楚修改哪些，可搜索 “TODO:修改”关键字定位到需要修改的地方

   2.2 修改第一步 config 配置文件所关联路径的路由模板如 route.ts、请求模板 request.js。

   2.3 将想要生成的页面，拷贝到配置文件关联的模板 template/page 目录下,删除 template/page/index.html。将拷贝的代码文件依次修改为 ejs 模板。

   2.4 修改路由入口文件，（可选：添加导入注释和使用注释，之后会自动导入生成的路由文件）

 // swagger-to-code import-route-start

// swagger-to-code import-route-end

...

  // swagger-to-code use-route-start

  // swagger-to-code use-route-end

3. 运行命令

   npm run gen:entity

命令运行成功后，即可查看根据 swagger 生成的页面

FAQ

1. Q: 搜索框、表单项默认是 input，如何支持 select、time

   A: 请在模板中根据字段的 description，来针对性的渲染对应的组件

2. Q: 应该如何自定义页面、自定义添加 api 的匹配项

   A: 自定义页面，可在./swagger-to-code-config/template 目录下新建 newPage 文件，编写自己的模板，并修改 pageConfig.template.page.rootPath 指向 newPage

   自定义添加 api，可在./swagger-to-code-config/config.js，在 config.apiConfigs 新增对象，并配置 test 匹配方法，formatReqParams、formatResParams 转换方法

TODO

• 可通过命令行快速集成工具到项目中
• 支持 ts 配置声明
• 与根据 swagger 生成的 mock 数据结合，在联调之前进行模拟数据开发