网站首页 > 技术文章 正文
最近我们团队开源的后端微服务框架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
希望这篇文章能够给你带来一些帮助和启发,一颗小星星是你对我们最大的肯定和鼓励
好未来技术
猜你喜欢
- 2024-10-12 php 给app 或前端封装api 接口——json格式
- 2024-10-12 前端基础:vue中Axios的封装和API接口的管理
- 2024-10-12 Vue项目中实现用户登录及token验证
- 2024-10-12 前端开发:TypeScript 接口与泛型 接口使用泛型
- 2024-10-12 Java实战系列-前端VUE代码开发及接口流程设计(1)
- 2024-10-12 你还不了解typescript中接口和类型别名的用法区别?本文帮你总结
- 2024-10-12 前端开发:JavaScript API应用程序编程接口
- 2024-10-12 Java 中间的接口还可以这样用,你知道吗?
- 2024-10-12 Web前端接口画中画(Picture-in-Picture)介绍
- 2024-10-12 vue 项目接口管理 vue3接口
你 发表评论:
欢迎- 05-10如何优化数据库和前端之间的交互?
- 05-10前端代码优化小秘籍(前端优化24条建议)
- 05-10VS Code当中的15个神仙插件,值得收藏
- 05-10如何自己开发一个Google浏览器插件?
- 05-10前端流行框架Vue3教程:14. 组件传递Props效验
- 05-10吃了一年的SU,最好用的插件都在这了
- 05-10前端必看!这款神器让网站界面告别千篇一律
- 05-10程序员请收好:10个非常有用的 Visual Studio Code 插件
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端懒加载 (45)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle查询数据库 (45)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)