前后端同时开发怎么定义接口？

前后端同时开发怎么定义接口？

一般有两种方式，

1、为每个逻辑都定义单独接口（适用于对外接口，专口专用不出错）

2、定义一个通用接口，通过参数中的id区分业务逻辑函数（适用于公司内部项目，一口多用方便灵活）

我的做法是先画一个前端和后端交互的时序图，把前后端之间的通讯逻辑理清楚，然后根据具体每一步的执行顺序逻辑去定义接口，

如下图是用户登录系统的时序图，

图中，app和后台之间有两个箭头，由此我们可以知道，前端app和后端服务器之间两个接口：

1、发送请求

2、返回登录结果

登录系统是最长用的也是最基础的系统，虽然简单却也涵盖了前端和后端交互的基本原理，另外图中还标明了，客户端的页面验证逻辑，和服务端的数据库请求逻辑。

下图是一张支付接口的时序图

支付逻辑相对复杂一些，但有图的帮助，接口会变得很清晰。

前后端数据交互频繁，可以定义一个数据接口，然后通过数据中的id来区分要执行的函数。这样的好处是，接口一个就够，灵活性高。同一个项目适用这种方式。不适合做对外的接口。

在开发之前一定要先定义好接口规范，至于接口应该由前端来定还是后端来定，这个还得看公司的具体情况，但一定要让前后端都确认无误，特别是接口协商要点，以免出现前后端分离之后最容易出现的扯皮现象。

由前端和后端一起协定接口规范的内容，确定每一个接口的地址(URL), 输入参数和返回值，必要的时候详细注释每一个字段的含义和数据类型。

定义接口可以参照以下三方面：

1、资源接口：系统涉及到哪些资源，按照 RESTful 方式定义的细粒度接口。

2、操作接口：页面涉及到哪些操作，例如修改用户信息等等，也可以使用 RESTful 方式来定义。

3、页面接口：页面涉及到太多接口，如果是一个个地调用，会需要很多次请求，有可以影响到前

端的性能和用户体验， 因此可能需要将这些接口的数据合并到一起，作成一个聚合型接口提供

给前端来使用。

接口需要前后端一起确认的信息如下：

1、接口必须返回统一的数据结构。

2、接口查询不到数据时，即空数据的情况下返回给前端怎样的数据。建议返回非 null 的对应数据类型初始值，例如对象类型的返回空对象({})，数组类型的返回空数组([])，其他原始数据类型也使用对应的默认值。这样可以减少前端很多琐碎的非空判断，直接使用接口中的数据。

3、调用接口业务失败的常用错误码，例如未授权时调用需要授权的接口返回 \"status\": “fail”。

4、接口需要登录时如何处理，特别是同时涉及到 Web 端/微信端/App 端，需要前端针对运行环境判断如何跳转到登录页面。

5、返回数据中图片 URL 是完整的还是部分的。

a．http://image.com/image/a/img.png 这就是完整的，前端直接使用这个 URL。

b．/image/a/img.png 这就是部分的， 一般省略域名部分， 前端需要自己拼接后才能使用

'https://image.com' + '/image/a/img.png'。

6、返回数据中页面跳转的 URL 是给完整的还是部分的。

a.内部页面返回部分的，或者只给ID，由前端自己拼接，例如只给出商品ID，让前端自己拼接商品

详情页的 URL。

b.外部页面返回完整的，例如广告位要跳转去谷歌。

7、返回数据中日期的格式，是使用时间戳还是格式化好的文字。

a.对于需要前端再次处理的日期值(例如根据日期计算倒计时)，可以使用时间戳。

b.对于纯展示用的日期值，推荐返回为格式化好的文字。

8、对于大数字(例如 Java 的 long 类型)，返回给前端时需要设置为字符串类型，否则 JavaScript 会发生溢出, 造成得到的数值错误

9、分页参数和分页信息

a.如何限制只返回 N 条数据(limit 参数)

b.如何控制每页的数据条数(pageSize 参数)

c.如何加载某一页的数据(page 参数)

d.如何避免无限滚动加载可能出现的重复数据

e.分页信息包含什么(total、page、pageSize)

当然以上只是列举了部分项，实际操作中应该尽量全面的在接口协议中些清楚。因为一旦开发中有分歧的，都要以接口协议定义的为准。

根据需求定义 再商量着来吧

这个得看你们公司的实际情况，一般是分前端主导还是后台主导。首先不管是前端主导还是后台主导，需要先定义好返回的通用对象格式，比如统一返回格式

{

code:200,

message:\"ok\

使用文档定义，开发遵从文档，文档先行，前后端先对接好需求，只关心对方的接口，内部怎么实现的对自己来说是透明的。

mock简单快速