先说一下项目背景
互联网公司,做自己的产品,全新的统计项目。3 人团队,1 产品 + 1 后端 + 1 前端。
项目负责人(产品)是从银行出来的,和后端一起设计、维护数据库,制定了前后端 API。
上个月就 API 字段命名方式我提过一个问题( https://www.v2ex.com/t/514030)
后续和负责人沟通的结果是:API 和字段名没有改变的可能,没有、也不会提供什么字段表,不好做就自己想办法。
当时大家建议去做 mapping,因为各种原因,目前我只把这些 code 全部变量化,加上 JSDoc,并且所有跟这些 code 相关的代码都单独用TypeScript
来写。
目前页面已经写完了,用的 Vue
+ echarts
,数据目前都是我本地 Mock 的,因为 API 给的晚,Mock 的格式没有和实际完全对应。
// request params
// 请求 A 表这些字段,post to api/a
{
"date_start": "2019-1-1",
"date_end": "2019-1-3",
"id": "v2ex",
"cols": "A0001,A0002,A0003,A0004..."
}
// B 表,post to api/b
{
"date_start": "2019-1-1",
"date_end": "2019-1-3",
"id": "v2ex",
"cols": "A0001,A0002,B0001,B0002..."
// ...
}
// ...
// 前端请求哪些字段,后端就只返回这些字段的数据
// 部分字段通用
// 返回数据格式区分宽表、窄表
// 宽表返回格式
{
"A0001": "2019-1-1", // date,通用
"A0002": "v2ex", // id,通用
"A0003": "1",
"A0004": "1",
// ...
}
// 窄表返回格式
{
"A0001": "2019-1-1",
"A0002": "v2ex",
"INDEXID": "F0001"
"INDEXV": "1"
},
{
"A0001": "2019-1-1",
"A0002": "v2ex",
"INDEXID": "F0002"
"INDEXV": "1"
},
// ...
A0001
, A0002
这些都是实际的字段名,也是数据库的列名,有一张 Excel 的对照表可以查字段的含义。前端需要哪些列的值,就把相应列的 code 作为请求的参数传给后台。
后台返回格式不一致(宽表、窄表两套格式)。
不同的首字母表示不同的表,对应的字段需要 post
到不同的 API。比如 AXXXX
,BXXXX
要分别给到api/a
, api/b
两个接口。
一项业务存在使用多张表的数据的情况,前端需要自己来做数据聚合。
根据业务需要,前端要对部分返回结果做过滤 /分类 /计算。
同一项指标的不同选项(比如留存,有 3 日、7 日、14 日等选项可选)会对应不同的 code,前端需要区分发送。目前我用表驱动法维护了很多这类的 mapping。
目前我针对每一项具体业务写了 Adapter
,用来管理要发送的数据列,以及返回数据的转换处理工作 。
感觉项目中用的最多的就是 Array.map
, Array.reduce
这两个方法。。UI 的文本、各种选项下对应的请求字段、各种图表数据都跟那些 code 做了对应。很怕以后维护的时候看不懂。
Ajax
请求数量目前各个业务模块的请求是单独发送的(一个页面多个模块),一次刷新 devtool 里面各种 abcdef 的请求,如果存在跨表的业务(Promise.all
等待)就有更多。等浏览器排队走完。
目前后台数据还不完善,很多返回值都是 null
,速度还无法评估。
请问前端目前这样处理有没有什么问题?听说过 GraphQL
, 不知道是不是可以解决这类问题?不过估计也没有用的机会。
还想问问各位老哥,前端对接这样的接口,有没有什么好的做法?有没有什么坑是需要注意的?
另外,因为以前只做过后端给大接口(聚合了目标业务需要的所有数据)的项目,想问问这样的接口算不算 RESTful
?
后端 API 这样设计,是不是后续只要负责往数据库里面填数据就可以了?
试用期还有一个月,做的好心累,感觉自己好菜
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.