教你如何帮助前端同学快速生成API接口代码
最近我们团队开源的后端微服务框架go-zero增长势头比较迅猛,这篇文章我讲讲go-zero对前端团队的作用,并通过一个示例来给大家演示我们是怎么做的,希望能给后端的同学也可以帮助前端同学提高开发效率
首先,我们来看看正常怎么实现api接口:
1,后端给出(或经过协商给出)api定义文档
2,前端多端开发编写各自的api请求代码
3,单元测试,如果有的话
4,前后端都完成后,联调接口
然后,给大家讲讲我们团队是怎么做的:
1,后端(或经过协商)通过.api文件定义出接口
2,前端多端开发通过命令一键生成各自的接口实现
由于接口代码是统一生成的,所以无需单独做接口联调
下面我通过一个例子来给大家展示完整的过程:
从这里下载goctl可执行文件,并确保命令行可运行goctl命令:
https://github.com/tal-tech/goctl-plugins/releases
下载官方示例的api文件
地址:https://raw.githubusercontent.com/tal-tech/go-zero/master/example/bookstore/api/bookstore.api
type (
addReq struct {
book string `form:"book"`
price int64 `form:"price"`
}
addResp struct {
ok bool `json:"ok"`
}
)
type (
checkReq struct {
book string `form:"book"`
}
checkResp struct {
found bool `json:"found"`
price int64 `json:"price"`
}
)
service bookstore-api {
@server(
handler: AddHandler
)
get /add (addReq) returns (addResp)
@server(
handler: CheckHandler
)
get /check (checkReq) returns (checkResp)
}
生成代码
goctl api ts -api bookstore.api -dir ./bookstore -webapi axios
执行上述代码后会生成如下文件:
import webapi from "axios"
export interface AddReq {
}
export interface AddReqParams {
book: string
price: number
}
export interface AddResp {
ok: boolean
}
export interface CheckReq {
}
export interface CheckReqParams {
book: string
}
export interface CheckResp {
found: boolean
price: number
}
/**
* @description
* @param params
*/
export function add(params: AddReqParams) {
return webapi.get<AddResp>("/add", params)
}
/**
* @description
* @param params
*/
export function check(params: CheckReqParams) {
return webapi.get<CheckResp>("/check", params)
}
这个工具不仅仅支持生成ts客户端代码,根据需要可以生成java,dart客户端代码。
使用goctl有如下好处:
- 减少重复劳动。
- 降低一些由于前后端沟通问题导致的低级错误。
- 服务器更新了api,客户端重新生成代码后,编译阶段就能发现问题。
go-zero的github地址:https://github.com/tal-tech/go-zero
希望这篇文章能够给你带来一些帮助和启发,一颗小星星是你对我们最大的肯定和鼓励
教你如何帮助前端同学快速生成API接口代码的更多相关文章
- 亿级用户下的新浪微博平台架构 前端机(提供 API 接口服务),队列机(处理上行业务逻辑,主要是数据写入),存储(mc、mysql、mcq、redis 、HBase等)
https://mp.weixin.qq.com/s/f319mm6QsetwxntvSXpKxg 亿级用户下的新浪微博平台架构 炼数成金前沿推荐 2014-12-04 序言 新浪微博在2014年3月 ...
- spring boot使用swagger生成api接口文档
前言 在之前的文章中,使用mybatis-plus生成了对应的包,在此基础上,我们针对项目的api接口,添加swagger配置和注解,生成swagger接口文档 具体可以查看本站spring boot ...
- Swagger结合mustache模板生成后台接口代码、以及前后台建模代码
之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...
- 利用ShowDoc自动生成api接口文档
最近在做新项目,感觉写完一个接口 还要去再写一遍api文档 挺浪费时间的,所以借用ShowDoc的api开放功能 自动生成api文档. 首先 去 https://www.showdoc.cc/ 注册一 ...
- SpringBoot + Swagger2 自动生成API接口文档
spring-boot作为当前最为流行的Java web开发脚手架,相信越来越多的开发者会使用其来构建企业级的RESTFul API接口.这些接口不但会服务于传统的web端(b/s),也会服务于移动端 ...
- 怎么使用瓦特平台下面的“代码工厂”快速生成BS程序代码
这里说一下怎么使用瓦特平台下面的“代码工厂”快速生成程序代码 使用平台:windows+"visual studio 2010"+"SqlServer2000+" ...
- 如何在IDEA中自定义模板、快速生成完整的代码?
文章目录 1.修改现有的模板 2.自定义模板 3.在代码中测试自定义模板 1.修改现有的模板 打开设置面板- settings 2.自定义模板 选择定义模板组 选择创建模板 define 代表应用的范 ...
- Spring MVC学习总结(9)——Spring MVC整合swagger自动生成api接口文档
Swagger 号称:世界最流行的API框架,官网:http://swagger.io/,Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总 ...
- Spring Boot2配置Swagger2生成API接口文档
一.Swagger2介绍 前后端分离开发模式中,api文档是最好的沟通方式. Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务. 及时性 (接 ...
随机推荐
- SpringCloud实战 | 第四篇:SpringCloud整合Gateway实现API网关
一. 前言 微服务实战系列是基于开源微服务项目 有来商城youlai-mall 版本升级为背景来开展的,本篇则是讲述API网关使用Gateway替代Zuul,有兴趣的朋友可以进去给个star,非常感谢 ...
- LevelDb 101学习
转自http://www.cnblogs.com/haippy/archive/2011/12/04/2276064.html LevelDb日知录之一:LevelDb 101 说起LevelDb也许 ...
- Hadoop演进与Hadoop生态
1.了解对比Hadoop不同版本的特性,可以用图表的形式呈现. (1)0.20.0~0.20.2: Hadoop的0.20分支非常稳定,虽然看起来有些落后,但是经过生产环境考验,是 Hadoop历史上 ...
- Spark Job-Stage-Task实例理解
Spark Job-Stage-Task实例理解 基于一个word count的简单例子理解Job.Stage.Task的关系,以及各自产生的方式和对并行.分区等的联系: 相关概念 Job:Job是由 ...
- Redis中LIST列表的相关命令
Redis中LIST列表的相关命令 添加 lpush 将一个或多个value插入到key的表头,如果存在多个value,那么各个value按从左到右的顺序依次插入表头 插入表头:意味着新插入的值在最前 ...
- 面试题总结:可能是全网最好的MySQL重要知识点
标题有点标题党的意思,但希望你在看了文章之后不会有这个想法--这篇文章是作者对之前总结的 MySQL 知识点做了完善后的产物,可以用来回顾MySQL基础知识以及备战MySQL常见面试问题. 什么是My ...
- 新手学习Python第三方包库pip安装失败总结
这篇文章纯原创,是之前自己学习使用pyhton时遇到的问题,故在此记录一下. 问题与需求:用python下载第三方库或包的时候出错怎么办? 方法有一下三种,可以解决大部分的问题. 1.在cmd命令控制 ...
- Vue 组件的基础介绍
1.组件定义 1.定义组件并引用 2.父组件向子组件传值 3.子组件向父组件传值 # 组件间传值:vuex (https://www.cnblogs.com/xiaonq/p/9697921.html ...
- Layman CSS3+H5实现上下垂直居中的几种主要方法
方法1:通过 translate 移位来实现 H5+CSS3: <div style="width: 100%; height: 100%; margin:0; padding: 0; ...
- 01 sublime text3下配置c/c++ 的编译运行环境
安装mingw,在线安装经常出问题,推荐离线安装 参考: https://blog.csdn.net/qq_34432960/article/details/106124496?utm_medium= ...