前端对接这样的 API ,各位老哥有什么建议吗

2019-01-03 23:38:01 +08:00
 doommm

前端对接这样的 API,各位老哥有什么建议吗

先说一下项目背景

互联网公司,做自己的产品,全新的统计项目。3 人团队,1 产品 + 1 后端 + 1 前端。

项目负责人(产品)是从银行出来的,和后端一起设计、维护数据库,制定了前后端 API。

上个月就 API 字段命名方式我提过一个问题( https://www.v2ex.com/t/514030)

后续和负责人沟通的结果是:API 和字段名没有改变的可能,没有、也不会提供什么字段表,不好做就自己想办法。

当时大家建议去做 mapping,因为各种原因,目前我只把这些 code 全部变量化,加上 JSDoc,并且所有跟这些 code 相关的代码都单独用TypeScript来写。

目前页面已经写完了,用的 Vue + echarts,数据目前都是我本地 Mock 的,因为 API 给的晚,Mock 的格式没有和实际完全对应。

API 示例

// 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"
},
// ...

考虑的问题

目前我针对每一项具体业务写了 Adapter ,用来管理要发送的数据列,以及返回数据的转换处理工作 。

感觉项目中用的最多的就是 Array.map, Array.reduce 这两个方法。。UI 的文本、各种选项下对应的请求字段、各种图表数据都跟那些 code 做了对应。很怕以后维护的时候看不懂。

目前各个业务模块的请求是单独发送的(一个页面多个模块),一次刷新 devtool 里面各种 abcdef 的请求,如果存在跨表的业务(Promise.all 等待)就有更多。等浏览器排队走完。

目前后台数据还不完善,很多返回值都是 null,速度还无法评估。

请问前端目前这样处理有没有什么问题?听说过 GraphQL, 不知道是不是可以解决这类问题?不过估计也没有用的机会。


还想问问各位老哥,前端对接这样的接口,有没有什么好的做法?有没有什么坑是需要注意的?

另外,因为以前只做过后端给大接口(聚合了目标业务需要的所有数据)的项目,想问问这样的接口算不算 RESTful ? 后端 API 这样设计,是不是后续只要负责往数据库里面填数据就可以了?


试用期还有一个月,做的好心累,感觉自己好菜

8088 次点击
所在节点    程序员
67 条回复
doommm
2019-01-04 09:53:20 +08:00
@preach 谢谢老哥。人在厦门,暂时不考虑北京。再次感谢。
doommm
2019-01-04 09:54:59 +08:00
@qinrui
产品还就是从建行出来的。。这个项目里面也有类似的需求需要这样实现。。
dany813
2019-01-04 10:00:40 +08:00
这个设计真牛逼,要是我立马就开怼
183shl
2019-01-04 10:26:17 +08:00
我见过查询用户信息把 passwd 也返回的
daimen
2019-01-04 10:42:00 +08:00
BQID。。。 哈哈哈哈哈哈哈哈哈
yepinf
2019-01-04 10:49:56 +08:00
@preach 哈哈哈

这么干脆~ 有没有上海的
preach
2019-01-04 10:52:07 +08:00
@yepinf 救人要緊
tosmq009
2019-01-04 11:02:08 +08:00
如果考虑到字段加密来说,我觉得可以考虑 你们的设计,如果直接放到物理数据库,我只能说。。。。
这水平太差了,还活在 10 多年前的 世界,可维护性,可读性,都是垃圾

个人建议,找技术老大提问题,如果大家都不是好好做事的心态的话,赶紧找下家,不然工作水平提不上去,心态还各种纠结。


数据库设计,最近很火的是,领域驱动设计,或者最简单的

能准确表达。
vivachencs
2019-01-04 11:05:50 +08:00
上家公司后端也是这么干的, 数据统计全是我前端在做, 完事还要说: "你看我接口写得多灵活, 你想要什么数据都可以自由组合, 性能还这么好", 然后我现在跑路整一年了
519718366
2019-01-04 11:21:58 +08:00
我们这边前后分离奉行的原则是:能后端处理的,就不交给前端。

比如前端的某个状态要根据 2,3 个属性综合判断,那后端基本就把这个状态计算好了返回。

前端就塞塞值,换换文案,多搞搞交互样式代码。

你这种字段设计绝对不是个例,我一个做过社保项目的同学也是你这样的,他说后端数据库是专门有一张字典表的。
这个表说明了 A00001 表示什么意思,一般值什么的~~所以你前端也搞个字典?
Ritr
2019-01-04 11:38:02 +08:00
后端返回的数据不一定符合前端的需求,当前端页面展示变更的时候,后端也不一定跟着变更。
我的建议是使用一个中台系统来整合、梳理这些数据。
如果没有时间和精力做这个事情,可以考虑在前端 /后端加个适配器处理数据,保证数据输出的格式符合你的需求
"3 人团队,1 产品 + 1 后端 + 1 前端" oh ...shit,还是随便搞搞吧
kela
2019-01-04 12:12:22 +08:00
@qinrui 我以为要两开花
doommm
2019-01-04 12:55:52 +08:00
@dany813 试用期,怕是怼不动
mynameisz
2019-01-04 13:18:37 +08:00
劝楼主,苦海无涯,回头是岸!
shyangs
2019-01-04 13:25:12 +08:00
壮哉大前端, JavaScript 必将统一世界
atonku
2019-01-04 13:28:43 +08:00
我也像写这样的接口,但是我怕会被领导打死。这尼玛写的是个屁哦
bojackhorseman
2019-01-04 14:08:11 +08:00
@MonoLogueChi #4 233
SakuraKuma
2019-01-04 14:12:00 +08:00
自己架中间层,写 mapping,转换回自己要的格式。就不用暴露字段前端又好写点了。
ChenFanlin
2019-01-04 14:23:26 +08:00
..我记得之前在 v2?还是 nga?看到过有个帖子也是这样的命名...同一家公司吗...
yzkcy
2019-01-04 14:57:33 +08:00
后端把表里所有数据全传到前端,让前端自己处理,会产生很严重的安全问题的。

比如查询 XX(前端只需要 XX 的某个值),后端却把 XX 的所有数据(包括敏感信息)全返回了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/523660

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX