为了减轻前后端小伙伴在接口出参的定义方面争得面红耳赤、或心生埋怨,作为后端小伙伴应该主动一点,换位思考如果自己是前端,接到这样的出参会是什么想法。我做后端。本文就我在定义出参与前端小伙伴合作方面谈谈自己的想法和做法。

  先定下一个基调:后端负责业务逻辑、提供数据;前端负责渲染数据。

  以下是一个司空见惯的业务场景——展示两段数据,要求前后端合作完成。


 交易              权益

下单量:10           积分:1000

支付量:10           成长值:100

  乍一看很简单,无非是4个字段:

1
2
3
4
5
6
7
8
{
"data": {
"orderNum": 10, // 下单量
"payNum": 10, // 支付量
"point": 10000, // 积分
"growth": 100 // 成长值
}
}

  只需和前端约定好各个字段的含义,前端小伙伴在页面上写死即可。我要是前端,第一个饶不了你,这哪叫前后端分离,这样还需要前端吗?

  后端继续改了一版:

1
2
3
4
5
6
7
8
9
10
11
12
{
"data": {
"trade": {
"orderNum": 10, // 下单量
"payNum": 10, // 支付
}, // 交易
"assets": {
"point": 10000, // 积分
"growth": 100 // 成长值
} // 权益
}
}

  现在需求改了,需要加字段:


 交易                       权益

下单量:10  下单成功率:90%          积分:1000

支付量:10  支付成功率:100%         成长值:100

  后端有应对方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"data": {
"trade": {
"orderNum": 10, // 下单量
"orderSuccess": "90%", // 下单成功率
"payNum": 10, // 支付
"paySuccess": "100%" // 支付成功率
}, // 交易
"assets": {
"point": 10000, // 积分
"growth": 100 // 成长值
} // 权益
}
}

  同第一种一样,前后端耦合度太强,若业务需要增加字段,前后端都需要上线。有没有既能降低沟通成本,又能降低修改成本的方法呢?

  当然有:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
{
"data": [
{
"lable": "交易",
"type": 1,
"sort": 1,
"list": [
{
"type": 1,
"lable": "下单量",
"value": 10,
"sort": 1,
"subLable": "下单成功率",
"subValue": "90%"
},
{
"type": 1,
"lable": "支付量",
"value": 10,
"sort": 2,
"subLable": "支付成功率",
"subValue": "100%"
}
],
"value": "",
"subLable": "",
"subValue": ""
},
{
"lable": "权益",
"type": 1,
"sort": 2,
"list": [
{
"type": 1,
"lable": "积分",
"value": 1000,
"sort": 1,
"subLable": "",
"subValue": ""
},
{
"type": 1,
"lable": "成长值",
"value": 100,
"sort": 2,
"subLable": "",
"subValue": ""
}
],
"value": "",
"subLable": "",
"subValue": ""
}
]
}

  上述出参不仅给出了所有需要展示的数据(“:”除外),还对各个Lable都排好了序,前端小伙伴只需要遍历数组即可。即使要减少、增加、修改字段,前端小伙伴也不用再做动代码。