⑴ 如何处理好前后端分离的 API 问题
意义很大,但是你的问题本身认识有偏差。
对于前后端分离,认识上有个误区,那就是很多人自称:老早就分离了,全AJAX,使用Angular或者什么什么就可以了。
这个说法是不合适的,打个比方,别人问的是“如何解决家禽把蛋生在水草边的问题?”,但实际上人家养的是鸭子,答题的却是养鸡的,所以回答“不让去水边就行了”,这显然不在点子上。
这两年业界说的前后端分离,是限于偏展示类的系统(用A代替),而不是应用、管控类Web项目(用B代替),在B类项目里,前后端是天然分离的,对此,除了少部分后端开发人员,基本所有人的认识都是一致的。上一段中这样回答的人一般都是只做B类项目,在B类项目里,前后端分离是共识,不需要讨论。
那么,剩下的问题就是讨论A类项目的前后端分离了。这个问题的核心在什么地方呢,在于模板的与数据结合的位置,以及,模板的控制权在谁手里。经过这两年的讨论,基本上我们可以达成的共识就是:模板应当由前端人员去控制,主要原因有两方面:
- 性能优化(尤其是外部资源的管理与发布,请求合并等等)
- 协作的顺畅性(已形成模板的界面片段的返工等问题)
那么,模板到底应该在什么地方跟数据结合?
这个问题就比较折腾了,有部分人尝试像B类项目那样,使用js模板,然后在浏览器端执行,这是存在一些问题的,比如说seo不友好,首屏性能不够,尤其对于首页DOM量很大的电商类网站,差距很明显。
所以还是得把主要的模板放在服务端来执行。在这个过程中,阿里作了一些尝试,那就是引入Node层,在这一层把模板与数据进行合成,然后浏览器拿到的就是生成好的HTML了,但也不是所有HTML都是这么生成好的,还是会有一些内容等到了浏览器之后,再用js去加载和生成。
⑵ 还在发愁写API文档推荐一款阿里腾讯都在用的API管理神器
作为一个前后端分离模式开发的团队,我们经常会看到这样的场景:前端开发和后端开发在一起热烈的讨论“你这接口参数怎么又变了?”,“接口怎么又不通了?”,“稍等,我调试下”,“你再试试..."。
那能不能写好接口文档,大家都按文档来开发?很难,因为写文档、维护文档比较麻烦,而且费时,还会经常出现 API 更新了,但文档还是旧的,各种同步不一致的情况,从而耽搁彼此的时间。
之前我们团队也遇到了同样的问题,那么作为研发团队的负责人,我是如何带领团队解决这个问题的呢?
方法其实很简单,如果能做到让写文档/维护文档这件事情的短期收益就能远高于付出的成本,那么所有问题都能迎刃而解,开发人员就会非常乐意去写接口文档。
要做到写文档和及时维护文档的短期收益就能远高于付出的成本,无非两个方向:
鉴于此,我们设想如果有一款工具做到以下这些是不是就非常爽了?
总结下来,我们需要的就是这么一款工具:
为此,我们几乎尝遍了市面上所有相关的工具,但是很遗憾,没有找到合适的。
于是,我们自己实现了一个Postman + Swagger + RAP + JMeter
这个工具就是 Apifox,经常很长一段时间不断更新迭代后,我们基本上完全实现了最初的设想则兆,几乎完美解决了最开始遇到的所有问题,在公司内部大受欢迎。并且也形成了我们自己的最佳实践。
没错,现在我们已经将Apifox产品化对外服务了,你们团队也可以直接使用Apifox了。
官网:www.apifox.cn
Apifox = Postman + Swagger + Mock + JMeter
Apifox 是 API 文档孙胡租、API 调试、API Mock、API 自动化测试一体化协作平台。
通过一套系统、一份数据,解决多个系统之间的数据同步问题。只要定义好接口文档,接口调试、数据 Mock、接口测试就可以直接使用,无需再次定义;接口文档和接口开发调试使用同一个工具,接口调试完成后即可保证和接口文档定义完全一致。高效、及时、准确!
节省研发团队的每一分钟!
如果你认为 Apifox 只做了数据打通,来提升研发团队的效率,那就错了。Apifox 还做了非常多的创新,来提升开发人员的效率。
通常一个接口会有多种情况用例,比如 正确用例做胡 参数错误用例 数据为空用例 不同数据状态用例。定义接口的时候定义好这些不同状态的用例,接口调试的时候直接运行,非常高效。
可以独立定义数据模型,接口定义时可以直接引用数据模型,数据模型之间也可以相互引用。同样的数据结构,只需要定义一次即可多处使用;修改的时候只需要修改一处,多处实时更新,避免不一致。
使用 Apifox 调试接口的时候,系统会根据接口文档里的定义,自动校验返回的数据结构是否正确,无需通过肉眼识别,也无需手动写断言脚本检测,非常高效!
Apifox 自动校验数据结构
设置断言:
Apifox 设置断言
运行后,查看断言结果:
先放一张图对比下 Apifox 和其他同类工具 零配置 mock 出来的数据效果:
Apifox Mock 数据结果对比同类工具
可以看出 Apifox 零配置 Mock 出来的数据和真实情况是非常接近的,前端开发可以直接使用,而无需再手动写 mock 规则。
“Apifox 如何做到高效率、零配置生成非常人性化的 mock 数据”
Apifox 项目可“在线分享” API 文档,分享出去的 API 文档可设置为公开或需要密码访问,非常方便与外部团队协作。
体验地址:https://www.apipark.cn/s/ce387612-cfdb-478a-b604-b96d1dbc511b/http/5041285
根据接口模型定义,自动生成各种语言/框架(如 TypeScript、Java、Go、Swift、ObjectiveC、Kotlin、Dart、C++、C#、Rust 等)的业务代码(如 Model、Controller、单元测试代码等)和接口请求代码。目前 Apifox 支持 130 种语言及框架的代码自动生成。
更重要的是:你可以通过自定义代码模板来生成符合自己团队的架构规范的代码,满足各种个性化的需求。
接口调试
Apifox 多种主题色可选
⑶ 如何写好API接口文档
日常项目开发的过程中,接口文档是必不可少的。后端工程师与前端工程师之间需要接口文档来定义数据传输协议、系统对外暴露接口需要文档来说明、系统之间相互调用需要文档来记录接口协议等等。对于一个完整的项目,接口文档是至关重要的。那我们如何写好一份接口文档呢?今天就让我们说一说接口文档几个重要的要素。
1、接口概述
接口概述主要说明本接口文档涉及到的业务功能点,面向的阅读对象以及接口文档主要包括哪些业务的接口,可以让读者有一个直观的认识。如:本文档定义脊前了中台系统面向外部接入方的数据协议接口,主要包括:用户注册接口、同步用告野档户、授权认证等接口。适合阅读的对象为接入中台开发者或者外部合作方。这样的一段描述,对于阅读者来说可以对整个接口文档有一个大概的认识。
2、权限说明
有的接口调用需要授权认证,在这部分需要进行说明。如果接口只是基于分配的token认证,那文档需要说明token的获取方式。如果接口需要进行签名认证,需要在这里说明签名的具体方法,:
sign参数的生成规则要具体说明,最好能示例说明,如:
这样接入方可以验证自己的签名方式是否正确。
3、编码方式
接口的请求过程中可能由于编码导致乱码,所以,接口必须约定编码方式,参考以下写法:
4、请求说明
接口文档的请求说明中主要说明接口请求的域名以及请求的数据格式:袜乱如
5、接口列表
接口列表是接口文档的主要内容,这部分内容需要列出所有的接口名称、接口地址、接口的请求方式、接口的请求参数以及响应格式。在接口的请求参数中我们需要说明每个参数的含义、类型以及是否必须等属性。对于接口响应结果,如果有业务字段,也需要进行说明。下面是一个比较完整的示例:
6、状态码说明
接口的响应体一般都会带有响应的状态码,例如成功、失败等。状态码有助于接入方进行接口调用状态的判断。如:
接口文档如果能体现出以上几个要素,那可以算是一个完整的接口文档,对于接入方来说可以很好的阅读理解。
⑷ 如何有效减少前端与后端沟通上的成本,提高案件处理效率
以下是几种有效减少前端与后端沟通成本,提高案件处理效率的方法:
1. 建立袜袭坦明确的需求文档:在开始项目之前建立一个完整、详细和清晰的需求文档,该文档应该包含所有需要的功能、数据字段和交互细节。这样可以帮助前端和后端人员了解和约定项目范围和目标,并减少因为误解或变更而产生的沟通成本。
2. 使禅高用标准化的接口和协议:前后端人员约定并使用符合行业标准的接口和协议,如RESTful API等,就能降低各自开发时的沟通成本,提高项目的效率。
3. 实现敏捷开发:采用敏捷开发方法,可以加快迭代速度,及时检查和解决问题,减少对前后端人员之间的沟通需求。
4. 协同工具:使用协同工具,如JIRA、Trello等,可以帮助前后端人员更好地沟通、跟进和管告桐理项目状态。
5. 建立经验库:建立经验库,保存以前的开发过程和经验,以便参考和学习,从而减少重复的交流和沟通成本。
通过以上的方法,前端和后端团队之间的沟通和协作可以更加高效、快速和精准。
⑸ 如何在前端网页中调用第三方地图API,实现网页中显示地图信息
这里以调用高德地图和网络地图为例,简单介绍一下前端姿昌网页中如何调用第三方地图API,主要内容如下:
调用高德地图API
1.首先,需要注册高德地图开发者,这个是使用API的前提,只有正常登陆,创建应用,生成专属的Key值,才能正常调用地图,注册的话,直接到官网上注册就行,需要输入以下信息,按照提示一步一步往下走就行,如下:
2.注册成功后,登陆平台,点击右上角的“控制台”,进入用户管理界面,依次点击“应用管理”->“我的应用”,就会跳转到应用管理界面,点击右上角的“创建应用”,弹出对话框,输入应用名称和类型,如下:
3.创建成功后,在当前的应该管理页面就可以看到刚才创建的应用,接着就是为应用添加key值,这个直接点击应用右边的“+”号就行,如下,我们是网页中引入,所以选择“Web端(JSAPI)”,通过JS引入前端网页:
key值添加成功后,就会在当前应用下列出来,如下,这里需要记住这个字符串,后面的代码中要用到:
4.最后就是编写前端测试代码了,基本思路先创建一个div容器,然后通过JSAPI引入地图到这个容器中就行,如下,非常简单,key参数传入上面的字符串就行:
用浏览器打开这个html文件,效果如下,已经成功引入高德地图:
调用网络地图API
1.首先,也是注册网络地图开发者,这个直接到掘册游官网上注册就行,或者直接使用网络账号登陆,点击右上角判销的“控制台”,进入用户界面,接着点击“创建应用”按钮,弹出如下界面,输入应用名称,因为是前端网页引入,所以这里我们选择“浏览器端”:
2.应用创建成功后,就会为当前的应用生成一个AK值,后面的代码中就是通过这个值引入网络地图,如下,需要记住这个字符串:
3.最后就是编写前端测试代码了,如下,基本步骤和高德地图差不多,先创建一个div容器,然后通过JSAPI引入地图到这个容器,最后就可以正常显示,这里替换成自己应用的AK值:
用浏览器打开这个html文件,效果如下,已经成功引导网络地图:
至此,我们就完成了在前端网页中调用高德地图API和网络地图API。总的来说,整个过程非常简单,步骤也很清晰,只要你熟悉一下上面的过程,很快就能掌握的,官网也给出了非常详细的开发文档,非常适合初学者学习,还可以在线编辑查看效果,感兴趣的话,可以搜一下,希望以上分享的内容能对你有所帮助吧,也欢迎大家评论、留言。
⑹ 前端 API 接口数据模拟 (Mock)
在前端开发的过程中,会碰到以下一些问题:
为了解决此类问题,需要使用 mock 数据和 mock 服务器来提供支持。
很多前端框架,如 Reactor、 Angular、Vue 等都带有 mock 服务,以方便开发,这里介绍的是一个独立的小工具,可以在开发者自己的机器上方便的部署和运行,模拟后端接口的返回,以方便前端模拟各种数据。特性如下:
该数据即 files 目录下面 _api_heartbeat_get.json 的内容。
直接按快捷键 CTRL+C 来停止。
GET http://127.0.0.1:1492/api/heartbeat 映射到 files_api_heartbeat_get.json
POST http://127.0.0.1:1492/api/user/create 映射到 files_api_user_create_post.json
GET http://127.0.0.1:1492/api/user?pseudo=1 映射到 files_api_user_get_1.json
POST http://127.0.0.1:1492/api/course?pseudo=2 映射到 files_api_course_post_2.json
⑺ uniapp H5 嵌入企业微信 调选人接口(前端)
新建了一个uniapp项目 根据 企业微信API 文档 可知只需调用2次接口就能完成该功能 但在实际的开发中 却遇到了很多问题 特此记录下来
首先确保在企微后台都添加了相关应用并配置好了可信域名 后端接口完善
调用企业微信接口时 在企业微信浏览器上调试 企业微信调试
根据企业微信API文档 发现只需调用 wx.agentConfig 和相关的接口就可以 但是请注意企业微信3.0.24及以后版本才能直接调用wx.agentConfig 否则要先确保wx.config调用成功
根据api文档 新建一个js文件 并将需要引用的接口整理出来
根据文档所讲 首先要引入jssdk 这里有个坑
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
最后发现旦埋在mac windows iphone android不同设备上 有些能调用成功 有些会报错
最后查询了资料 说可能是uniapp内置的变量与jssdk变量名冲突 遂改用 jWeixin.agentConfig 为适应不同端 也改了引入的jssdk 所以引用下面两个
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
如果企微后台没有配好相关配置 在调用agentConfig的时候会报错 直接将 里面的链接打开 就能看到错误码对应的错误信息
然后后面调取选人接口的时候 发现企业微信在windows android mac上面是可以的 但在iphone上是不行的 alert 和uni.showToast 在接口success和fail的时候 都没有触发好迟乱 通过wx.checkJsApi 去验证也是没有触发 最后只能通过console去打印 最后发现根本就没走到agentConfig 说明iphone这边没有用到jssdk对象 最后是又将 jWeixin.agentConfig 改为 wx.agentConfig 然后iphone可以了 其他端友档又不行了
(这里卡了我一个下午 查阅了很多资料 像npm i wxwork-jsapi 去引jssdk 或者每次调接口都先agentConfig成功后调相应接口 都没用 说明两个问题 1企业微信文档上说的是用cdn的方式引自有一定的道理 2页面进来 先agentConfig 后面需要接口单独再调 和需要接口时 先agentConfig成功再调单独接口 都是可以的)
最后根据测试得出要判断当前设备是什么端 再选择用 jWeixin.agentConfig 还是 wx.agentConfig 这样就解决了问题
完整页面如下
效果
企业微信浏览器本地调试:
manifest.json 将https 去掉勾选
将apiBaseUrl改成本地
打开企业微信 调成debug模式 输入 地址http://localhost:8080/xxxx
⑻ javascript API手册
javascript API中文手册chm,以及javascript参考文档教程。
⑼ YAPI:从0搭建API文档管理工具
最近在找一款API文档管理工具,之前有用过Swagger、API Manager、Confluence,现在用的还是Confluence。激薯祥
我个人一直不喜欢用Swagger,感觉“代码明搏即文档”,让代码里的文档无处不在,已经对代码造成了一定的入侵了。API Manager就是一个纯API文档管理的工具了。Confluence是万能的,也是最简单的,支持各种插件在线安装,可以有各种布局,支持MD文档,也支持表格、代码块等。
最近看到一篇文章在说YAPI,就准备搭建一个试试效果如何。
YAPI是去哪儿网开源的一款API管理工具,理念如下手数:
特性:
选择YAPI试试手的原因是因为我看到了它支持MockServer,这样前端开发同学就不用等待后端同学了。主要是我也懒得搭建一套mock服务,有这样一款工具何乐而不为呢?所以今天就找了一台服务器安装了一下。考虑排版问题,就以图片形式放出来了。
nodeJS长期支持版本官网下载地址:https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz,下载后执行如下命令:
nodeJS安装完毕。
YAPI安装,GitHub上已经有比较详细的文档了,地址:https://github.com/YMFE/yapi,这里说一下两种部署方式:
可视化部署:
yapi安装完毕,访问http://127.0.0.1:9090进行可视化配置一步一步往下走即可。
命令行部署(推荐方式):
yapi安装完毕,访问http://127.0.0.1:{config.json中配置的port}即可访问。
node需要安装pm2模块,使用pm2模块后台运行yapi:
运行成功页面:
至此,YAPI就安装完毕了,简单实用一下还是不错的,因为是国产的,整体操作风格还是比较习惯的。在YAPI这里接口更改还有记录哦~
后面再慢慢体验这个里面的一些高级功能吧,比如MockServer、接口测试等功能。
大家还有什么更好用的API管理工具?你觉得一款优秀的API管理工具应该都有哪些必须的功能?欢迎推荐和讨论!
⑽ 对标Postman,高瓴资本加持,ApiPost如何引领API-first时代
作者|徐结怀 宋荣荣
编辑|张康
随着数字化浪潮快速席卷各行各业,以及研发前后端分离协作成为主流,架起前后端数据流通桥梁的API,呈现出爆发式增长的态势。为了让开发、设计、测试、迭代、协同更加高效,API-first(API优先)公司在行业内展露头角。
最近,36氪率先报道的 ApiPost引发了资本关注 ,据悉,ApiPost刚刚获得高瓴资本、盈动资本等一线顶级VC机构的投资,已成为国内目前极具独角兽潜力的API研发协同工具。
那么,API究竟是什么?API-first的商业价值几何?能给行业、企业发展带来什么样的影响?带着这些问题,36氪独家对话了ApiPost的创始人穆红伟。
36氪:最近几年,“API”理念逐渐破圈, 全球最具权威的IT研究与顾问咨询公司 Gartner 宣告了“API 经济”的到来。现在“API-first”被很多人挂在嘴边,但其实很多人并不完全清楚它的含义,你可以解释一下吗?
穆红伟: 要了解API-first,首先需谈哗耐要知道什么是API。关于API的含义,我可以举一个简单的例子:
假如我去一家餐厅吃饭,
在单机混合开发时代,厨师做完餐后直接把餐拿到我的面前。
而在前后端分离开发时代,厨师做完餐后,会通过服务员把餐拿到我的面前。
在这个例子里面,我就是用户(user),服务员就是API,而厨师或者厨房就是服务器或者云端。
这种前后端分离的模式,会大大降低应用开发中的耦合性,各个角色分工协作的同时,也大大的提升了效率。所以,API-first(API优先)逐渐成为应用开发模式不可逆转的潮流。
据Postman在2020的一份调查报告显示,40.7% 软件研发团队一半以上时间花在 API 上,即:后端人员在创造API,前端人员在调用API,测试人员在测试API。
随着API-first理念的涌现,一个具有革新意义的软件开发商业模式已经兴起。据2018年阿卡迈的统计,83%的互联网流量来自API流量,API已经承担起传输后端数据到前端展示的桥梁。
36氪:我们了解到,社交登录是API的常见应用,比如用户可以选择使用微信或QQ登录开发芦中者的应用,在这个过程中,腾讯向开发者提供了API进行身份验证。除此之外,API的应用潜力究竟有多大呢?
穆红伟: 现在,互联网已经有大量的C端或者B端应用。但在此之前甚至现在,这些大量的应用更像一个个孤岛,用户触达这些服务的方式要么是通过这些应用的网站,要么是下载一个App。
在很快的未来,这些孤岛会逐渐长出自己连接外部的触角,各个应用之间会通含春过这些触角相连接,形成一张应用互联的大网,形成软件服务的“元宇宙”。
而API就是这些触角。很多企业会通过开放API将自己与外部世界打通,就像你可以在微信里使用京东购物一样,一个程序员甚至有一天可以在自己的代码编辑器里面使用同花顺查看股票。
API必将成为一种连接各个应用孤岛的神经网络般的存在,实现应用、服务互联,其未来不可估量。而无论是简单的从提供API相关的生产力基础工具而言,还是到后期的生态阶段,ApiPost所做的事情都是具有极大价值和前景的。
36氪: 目前,国内大多数研发团队所使用的前后端分离协作产品均源于国外,比如进行API调试的Postman和编写接口文档的Swagger以及进行压力测试的Jmeter等。当前国内的前后端分离协作研发市场刚开始布局, ApiPost在其中是一个什么样的角色呢?
穆红伟: 首先,上述这样的搭配存在很大的问题。维护不同工具之间的数据一致性非常困难、低效,这不仅仅是工作量的问题,更多的是多个系统之间数据的不一致,导致问题频出,开发测试人员痛苦不堪。
开发人员在 Postman对API接口调试完毕后,编写接口文档的时候还需要去 Swagger再写一遍。前端开发 Mock 数据的时候又要根据后端的规则去 RAP 重新定义一遍,甚至需要手动编写MockJS 规则。测试人员进行接口测试时,需要再去 JMeter 定义一遍。
前端、后端、测试人员,任何一方的数据规则更改,都需要其他人员配合更改对应的平台规则。这还不包含各个研发角色使用的其它小众工具,时间久了,各种不一致会越来越严重。
而ApiPost 是一个基于协作之上的集API 设计、开发、文档管理、测试为一体的平台,可以通过整合生产关系从而提升生产力。 相比传统的Postman,Apipost更像一个革命者。而且 无论是从用户基数、用户增长速度、月活率和留存率、还是产品功能本身来看,在国内同类型产品中,ApiPost都能跻身前列。
36氪: ApiPost的生态系统是如何协同运作的?你觉得资本看好ApiPost的原因是什么?
穆红伟: 如果把API比喻成上述餐厅就餐环节中的服务员,那么ApiPost就是为这个服务员提供的培训到上岗的整条产业链服务。
首先,是工具阶段。
ApiPost为这些API底层的生产者(研发人员)提供基础的生产力工具。如果说API是架接起前、后端数据流通的桥梁,那么API文档就是架接起整个研发部门中前端开发人员、后端开发人员、测试人员的桥梁。
ApiPost以文档为中心,基于协作,将研发部门整个角色贯穿起来。整个部门的所有角色只需要通过一款工具ApiPost就可以实现API的设计、调试、文档、Mock、压力测试等,而替代了以前类似:API调试用Postman、API文档生成用Swagger、压力测试用Jmeter等非常低效难以统一协作的场景。
其次,是平台阶段。
ApiPost基于API的生产力工具,会以UGC的模式快速积累大量开放API,从而形成一个开放API的中心(API-hub)。同时,用户通过API-hub发现API和ApiPost,形成一种成长飞轮的闭环。
除了形成用户快速成长的飞轮,平台更是连接工具向生态转换的纽带,它更多是一种抽象的理念,而不简单是一个APIs集合列表。
最后,是生态阶段。
经过平台期的过渡,进入生态阶段。在此阶段,高质量的研发用户群体是核心。ApiPost通过基础生产力工具的铺垫和平台的飞轮效应,会积累大量的高质量研发用户以及大量的 科技 类公司,在此用户基础之上,我们可以快速拓展诸如API周边甚至研发周边的业务,由于工具的粘性,从而形成一种整体研发流程服务的入口。
关于ApiPost
Apipost正式于2020年8月份成立,截止到目前,已累计服务超过35万研发人员,月活比例超过75%。