给前端同学透点料之提高协作质量

了解后端有啥好处？

1、出现前端、后端都能做的任务的时候，有理有据的提供方案更优解；
2、重复工作简单化。抽象前端组件，做成可配置的，调动后端资源帮忙；
3、前后端对接中，如果前端思考不足往往会比较被动，前端也应该对后端的返回结构所有要求。

首先前端同学不要感觉一下子压力很大哈，我们的目的不是为了压榨前端人员做后端，目的只是提高前端对于后端的一丢丢认识，对于排查问题，数据定义有所了解。以便提高前端同学在工作过程中的前后端对接效率。

举个更加直白的例子吧，这是一个把动态列表导出为PDF的需求，他们最终想要渲染的列表样式是这样的。

指标	2020	参考值
人口新增数	199	123
人口新增数	199	123

然而，发现之前后端的数据对象是这样定义时，当场惊掉了下巴……

据说在做前后端动态表头的列表的对接中，一个有工作经验的前端小姐姐废了用了3、4天才得以完成。

{
    "code": 200,
    "msg": "some thing",
    "items": [
        {
            "header": ["2020"]
        },
        {
            "2020": 199,
            "name":"指标1",
            "standard":123
        },
        {
            "2020": 199,
            "name":"指标2",
            "standard":123
        }
    ]
}

观察这个json结构，不管单个对象还是多个对象，数据的返回格式居然全部使用数组来接收。明明是一个对象，也要用数组来存储相关的属性。可以想象到前端在对接数据的时候的喜（万）闻（念）乐（俱）见（灰）：

var item = data.items[0];
//取header
item[0].header;
//取username
item[0].username;

实际上，前端如果能对后端接口数据质量有所要求，如果对结构有所优化。我相信这样的数据前端对接将会是很快的速度：

{
    "code": 200,
    "msg": "some thing",
    "data": {
	    "header": ["指标名称","2020","参考值"]，
	    "rows":[
	    	{
            	"2020": 199,
	            "name":"指标1",
    	        "standard":123
	    	},
    	    {
        	    "2020": 199,
            	"name":"指标2",
            	"standard":123
        	}
        ]
     }
}