前端自动生成接口ts代码

小鱼儿 2023-10-08 23:05 22阅读 0赞

umijs : [https://www.npmjs.com/package/@umijs/openapi][https_www.npmjs.com_package_umijs_openapi]

## 1.安装插件 ##

npm i --save-dev @umijs/openapi

## 2.在项目根目录新建 openapi.config.ts ##

const {
         generateService } = require('@umijs/openapi')
    
    generateService({
        
      schemaPath: 'http://petstore.swagger.io/v2/swagger.json',
      serversPath: './servers',
    })

![image.png][]

**拿到后端swagger文档的地址**  
![image.png][image.png 1]

## 3.添加并运行脚本 ##

*  在 package.json 的 script 中添加 api: “openapi”: “ts-node openapi.config.ts”,
 *  生成api
    
     *  npm run openapi

![image.png][image.png 2]

执行之后会生成包含了后端所有接口的请求、实体类类型的ts文件  
不过因为他是基于umi框架的，使用的是**他们封装的axios**，我们需要手动修改成自己封装的axios就行了  
![image.png][image.png 3]  
![image.png][image.png 4]

[https_www.npmjs.com_package_umijs_openapi]: https://www.npmjs.com/package/@umijs/openapi
[image.png]: https://img-blog.csdnimg.cn/img_convert/33218bbad444c06b9396f370af2dceff.png#averageHue=#938b59&clientId=uedf6caae-b176-4&from=paste&height=357&id=u925a7b9a&name=image.png&originHeight=535&originWidth=1920&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=88924&status=done&style=none&taskId=u1f94f703-4ba4-4ec2-ae6a-1559ae614c5&title=&width=1280
[image.png 1]: https://img-blog.csdnimg.cn/img_convert/595bff15f8fd084a416f78141dcae293.png#averageHue=#f9f7f5&clientId=uedf6caae-b176-4&from=paste&height=655&id=u78607544&name=image.png&originHeight=983&originWidth=1920&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=497346&status=done&style=none&taskId=u421d3cdf-1a6e-497e-b69f-4f67ef0fef5&title=&width=1280
[image.png 2]: https://img-blog.csdnimg.cn/img_convert/2e2476138b7699733d024bbb1175ddc0.png#averageHue=#5e6949&clientId=uedf6caae-b176-4&from=paste&height=481&id=u43993190&name=image.png&originHeight=722&originWidth=1920&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=192308&status=done&style=none&taskId=u2a5cfc1a-0160-4e51-b20d-607dd00091b&title=&width=1280
[image.png 3]: https://img-blog.csdnimg.cn/img_convert/a38c9e3808c32ce4a694e3dde2f55142.png#averageHue=#6e6948&clientId=uedf6caae-b176-4&from=paste&height=557&id=udcf4b409&name=image.png&originHeight=836&originWidth=1920&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=167752&status=done&style=none&taskId=ufc9c4420-34ab-426f-83a3-f80506fe5d7&title=&width=1280
[image.png 4]: https://img-blog.csdnimg.cn/img_convert/9e10c26e3ec795e98cd506fdd3bd79db.png#averageHue=#2c2c2b&clientId=uedf6caae-b176-4&from=paste&height=409&id=u6e7b0645&name=image.png&originHeight=614&originWidth=1121&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=77489&status=done&style=none&taskId=u8bfbcea1-3c83-47ba-adc6-d70b8a3ea4f&title=&width=747.3333333333334