Vue 使用typescript, 优雅的调用swagger API
Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务,后端集成下Swagger,然后就可以提供一个在线文档地址给前端同学。
前端如何优雅的调用呢?
入门版
根据文档,用axios自动来调用
// 应用管理相关接口
import axios from '../interceptors.js'
// 获取应用列表
export const getList = (data) => {
return axios({
url: '/app/list?sort=createdDate,desc',
method: 'get',
params: data
})
}
这里的问题是,有多少个接口,你就要编写多少个函数,且数据结构需要查看文档获取。
进阶版本
使用typescript,编写API,通过Type定义数据结构,进行约束。
问题: 还是需要手写
优雅版本
swagger 其实是一个json-schema描述文档,我们可以基于此,自动生成。
很早之前,写过一个插件 generator-swagger-2-t, 简单的实现了将swagger生成typescript api。
今天,笔者对这个做了升级,方便支持后端返回的泛型数据结构。
安装
需要同时安装 Yeoman 和 -swagger-2-ts
npm install -g generator-swagger-2-ts
然后cd到你的工作目录,执行:
yo swagger-2-ts
按提示
- 输入swagger-ui 地址,例如http://192.168.86.8:8051/swagger-ui.html
- 可选生成js 或者 typescript
- 可以自定义生成的api class名称、api文件名
- API 支持泛型
也可以通过命令行直接传递参数
yo swagger-2-ts --swaggerUrl=http://localhost:8080/swagger-ui.html --className=API --type=typescript --outputFile=api.ts
- swaggerUrl: swagger ui url swaggerui地址
- className: API class name 类名
- type: typescript or javascipt
- outputFile: api 文件保存路径
生成代码demo:
export type AccountUserInfo = {
disableTime?: string
isDisable?: number
lastLoginIp?: string
lastLoginPlace?: string
lastLoginTime?: string
openId?: string
}
export type BasePayloadResponse = {
data?: object
desc?: string
retcode?: string
}
/**
* User Account Controller
* @class UserAccountAPI
*/
export class UserAccountAPI {
/**
* changeUserState
* @method
* @name UserAccountAPI#changeUserState
* @param accountUserInfo - accountUserInfo
* @param $domain API域名,没有指定则使用构造函数指定的
*/
changeUserState(parameters: {
'accountUserInfo': AccountUserInfo,
$queryParameters?: any,
$domain?: string
}): Promise<AxiosResponse<BasePayloadResponse>> {
let config: AxiosRequestConfig = {
baseURL: parameters.$domain || this.$defaultDomain,
url: '/userAccount/changeUserState',
method: 'PUT'
}
config.headers = {}
config.params = {}
config.headers[ 'Accept' ] = '*/*'
config.headers[ 'Content-Type' ] = 'application/json'
config.data = parameters.accountUserInfo
return axios.request(config)
}
_UserAccountAPI: UserAccountAPI = null;
/**
* 获取 User Account Controller API
* return @class UserAccountAPI
*/
getUserAccountAPI(): UserAccountAPI {
if (!this._UserAccountAPI) {
this._UserAccountAPI = new UserAccountAPI(this.$defaultDomain)
}
return this._UserAccountAPI
}
}
/**
* 管理系统接口描述
* @class API
*/
export class API {
/**
* API构造函数
* @param domain API域名
*/
constructor(domain?: string) {
this.$defaultDomain = domain || 'http://localhost:8080'
}
}
使用
import { API } from './http/api/manageApi'
// in main.ts
let api = new API("/api/")
api.getUserAccountAPI().changeUserState({
isDisable: 1
openId: 'open id'
})
Vue中最佳实践
main.ts 全局定义
import { API } from './http/api/manageApi'
Vue.prototype.$manageApi = new API('/api/')
增加.d.ts
增加types文件,方便使用智能提示
import { API } from '@/http/api/manageApi'
import { MarkAPI } from '@/http/api/mark-center-api'
declare module "vue/types/vue" {
interface Vue {
$manageApi: API
$markApi: MarkAPI
}
}
实际使用
现在可以在vue里直接调用了。
this.$manageApi
.getUserAccountAPI().changeUserState({isDisable: 1, openId: 'open id'})
开源地址
https://github.com/jadepeng/generator-swagger-2-ts
欢迎star!
作者:Jadepeng
出处:jqpeng的技术记事本--http://www.cnblogs.com/xiaoqi
您的支持是对博主最大的鼓励,感谢您的认真阅读。
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
Vue 使用typescript, 优雅的调用swagger API的更多相关文章
- 如何更优雅地对接第三方API
本文所有示例完整代码地址:https://github.com/yu-linfeng/BlogRepositories/tree/master/repositories/third 我们在日常开发过程 ...
- 开源小工具 - swagger API访问代码生成器(js/typescript)
现在流行前后端分离,后端通常会使用swagger生成api文档,提供给前端的同事来调用,一般前端是查看这个文档,根据文档说明编写调用代码.其实,swagger已经提供了足够多的描述信息,我们可以基于s ...
- vue 服务代理 调用第三方api
项目中前期需要调用第三方API来获取汇率.因为直接调用会有跨域的问题,所以使用来服务代理. 在config配置代理可以这样写: 而调用接口就可以这样写: 坑:配置完成后一直报500,开始怀疑人生.最后 ...
- 如何优雅的使用Fegin去构造通用的服务调用的API
第一步: 创建一个公共的API服务:命名为api(根据自己实际情况进行命名) <?xml version="1.0" encoding="UTF-8"?& ...
- SpringBoot 优雅整合Swagger Api 自动生成文档
前言 一个好的可持续交付的项目,项目说明,和接口文档是必不可少的,swagger api 就可以帮我们很容易自动生成api 文档,不需要单独额外的去写,无侵入式,方便快捷大大减少前后端的沟通方便查找和 ...
- 一句代码,更加优雅的调用KVO和通知
来源:wazrx 链接:http://www.jianshu.com/p/70b2503d5fd1 写在前面 每次使用KVO和通知我就觉得是一件麻烦的事情,即便谈不上麻烦,也可说是不方便吧,对于KVO ...
- Swagger API文档集中化注册管理
接口文档是前后端开发对接时很重要的一个组件.手动编写接口文档既费时,又存在文档不能随代码及时更新的问题,因此产生了像swagger这样的自动生成接口文档的框架.swagger文档一般是随项目代码生成与 ...
- Swagger API文档
Swagger API文档集中化注册管理 接口文档是前后端开发对接时很重要的一个组件.手动编写接口文档既费时,又存在文档不能随代码及时更新的问题,因此产生了像swagger这样的自动生成接口文档的 ...
- Vue Cli3 TypeScript 搭建工程
Vue Cli3出来也一段时间了,我想尝试下Vue结合TypeScript搭建个工程,感受下Vue下用TS...网上有一篇讲的非常详细的教程 vue-cli3.0 搭建项目模版教程(ts+vuex+ ...
随机推荐
- [Qt]执行cmd命令
要加 /c 参数 QProcess p; p.start("cmd", QStringList()<<"/c"<<"ping ...
- 标准库sys
sys模块的主要函数介绍,结合官方文档说明和实例.This module provides access to some variables used or maintained by the int ...
- 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
为什么80%的码农都做不了架构师?>>> 摘要: 近日,阿里云宣布高性能时间序列数据库 (High-Performance Time Series Database , 简称 H ...
- 洛谷P3018 [USACO11MAR]树装饰Tree Decoration
洛谷P3018 [USACO11MAR]树装饰Tree Decoration树形DP 因为要求最小,我们就贪心地用每个子树中的最小cost来支付就行了 #include <bits/stdc++ ...
- 思维+模拟--POJ 1013 Counterfeit Dollar
Sally Jones has a dozen Voyageur silver dollars. However, only eleven of the coins are true silver d ...
- web安全笔记
判断网站是否伪静态 把.html后缀即可或者加.php?id=99 例子:33_99.html 去掉.html和_变成33.php?id=99 即可判断是否伪静态 判断网站是否在win或者linu ...
- 应用开发实践之关系型数据库(以MySql为例)小结
本文主要是对目前工作中使用到的DB相关知识点的总结,应用开发了解到以下深度基本足以应对日常需求,再深入下去更偏向于DB本身的理论.调优和运维实践. 不在本文重点关注讨论的内容(可能会提到一些): 具体 ...
- 03_CSS入门和高级技巧(1)
上节课知识的复习 插入图片,页面中能够插入的图片类型:jpg.jpeg.bmp.png.gif:不能的psd.fw. 语法: <img src="路径" alt=" ...
- MySQL 入门(3):事务隔离
摘要 在这一篇内容中,我将从事务是什么开始,聊一聊事务的必要性. 然后,介绍一下在InnoDB中,四种不同级别的事务隔离,能解决什么问题,以及会带来什么问题. 最后,我会介绍一下InnoDB解决高并发 ...
- SAP ME31K SUBOBJECT_NOT_FOUND
SUBOBJECT_NOT_FOUND 在使用BAPI:BAPI_CONTRACT_CREATE创建协议时报错, 错误位置在此处,子对象没找到 GOOGLE到相关解决方案 事务代码:SLG0 新增对象 ...