V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lqw3030
V2EX  ›  职场话题

前后端协作,数据格式转换分工,大家是如果划分职责的

  •  
  •   lqw3030 · 2020-01-14 17:58:51 +08:00 · 2074 次点击
    这是一个创建于 852 天前的主题,其中的信息可能已经有所发展或是发生改变。
    • 自己平时也写点前端,公司里主要负责后端,知道前端封装完的组件再改麻烦,或类似 echarts 三方组件需要特定数据格式
    • 最近在和前端同事对接,他们就会要求我在服务端给他们转换好
    • 虽说是不咋反感写数据处理代码,但是会考虑到服务端压力,毕竟大体围绕循环,请求一多压力就上来了
    • 想询文下大家是如何沟通分工的

    类似如下的转换

    [
    {"date":"2019-01-01","name":"sally","data":"123"},
    {"date":"2019-01-02","name":"jack","data":"123"},
    {"date":"2019-01-03","name":"jacky","data":"123"}
    ]
    
    {
    "2019-01-01":[{"name":"sally","data":"123"}],
    "2019-01-02":[{"name":"sally","data":"123"}],
    "2019-01-03":[{"name":"sally","data":"123"}]
    }
    
    20 条回复    2020-01-19 12:09:37 +08:00
    sagaxu
        1
    sagaxu  
       2020-01-14 18:06:30 +08:00 via Android   ❤️ 1
    请求一多压力就上来了?请量化分析。
    BluesQu
        2
    BluesQu  
       2020-01-14 18:08:06 +08:00
    一般出接口之前都会沟通好 大概的结构 ,所以基本上不会出现上面你贴出来的那样子的结构的差异,如果真的需要转换了,就相互之间再沟通了。按照以往的工作经历,遇到此类问题:前端也有处理过,后端也有处理过。不会划分的很细致谁来解决。
    lqw3030
        3
    lqw3030  
    OP
       2020-01-14 18:17:43 +08:00 via iPhone
    @sagaxu 浏览器处理和服务端集中处理会有区别
    optional
        4
    optional  
       2020-01-14 18:19:30 +08:00
    这种程度(stateless)的转换,前后端做都毫无压力啊。
    lqw3030
        5
    lqw3030  
    OP
       2020-01-14 18:20:07 +08:00 via iPhone
    @BluesQu 沟通还是重要,这个项目会开少了
    ianva
        6
    ianva  
       2020-01-14 18:29:34 +08:00   ❤️ 1
    有条件可以上 graphql, 就算不上 graphql 前端也需要有自己的领域模型,
    只要把接口 map 到前端的领域模型上即可,
    前端应该基于自身的领域模型去开发,而不是面向后端 api 编码。
    前后端应该在业务开始前定好 schema,前端需要确定领域模型。
    写组件首要的是定接口,也就是 props,了解视觉和交互模型后,就应该确定组件的 props
    接口和组件不应该有依赖,组件对接的页面容器上的业务逻辑上对接前端领域模型的
    如果做不到以上,这个项目前端没有维护的可能性,前后端耦合严重
    Demeter
        7
    Demeter  
       2020-01-14 18:29:54 +08:00
    既然楼主提到划分职责的话 我的建议是后端处理数据
    Akkuman
        8
    Akkuman  
       2020-01-14 18:31:47 +08:00 via Android
    我倾向于第一种
    lqw3030
        9
    lqw3030  
    OP
       2020-01-14 18:39:16 +08:00 via iPhone
    @ianva 多谢,受教了
    ianva
        10
    ianva  
       2020-01-14 18:42:47 +08:00
    @lqw3030 如果有相关的 fake server,原则上前后端不需要沟通,除了在定 schema 的时候,前端基于 fake 的数据基于领域模型完成项目,对接也只是很简单的事情
    sagaxu
        11
    sagaxu  
       2020-01-14 18:52:38 +08:00 via Android
    抛开剂量谈毒性都是耍流氓,有区别是多大区别?大到能成为必须不能放后端的理由?@lqw3030
    M003
        12
    M003  
       2020-01-14 18:57:16 +08:00
    我是前端.我会采用第一种.

    后端并不只服务于前端,也会别的服务会调用.

    第一种.输入结构.看起来也清晰明了.各参数含义明确.方便各业务自行处理.

    第二种,也就减轻了前端循环的一层.但别的服务可不会要这种结构..

    -------
    我猜是做图表展示的数据结构吧?
    ```
    var obj = {};
    arr.forEach(item=>{
    let {date,name,data} = item
    obj[date] = [{name,data}]
    })
    console.log(obj)
    ```
    -------

    在写的过程中,发现含义都变化了.
    第一种,一天对应一条数据
    第二种,一天对应一个数组? 在我不长的开发时间中,理解只要是数组,就有可能包含多条数据
    lqw3030
        13
    lqw3030  
    OP
       2020-01-14 19:09:43 +08:00 via iPhone
    @sagaxu 今天工作不怎么顺利吗?
    liberty1900
        14
    liberty1900  
       2020-01-15 00:37:03 +08:00 via Android
    arr.reduce((acc, {date, ...others}) => {
    acc[date] = [{...others}]
    }, {})
    dongliangnerd
        15
    dongliangnerd  
       2020-01-15 10:13:26 +08:00
    @ianva 太难了,不是所有团队都有资源和意愿这么做
    ianva
        16
    ianva  
       2020-01-15 12:15:56 +08:00
    @dongliangnerd 不是资源和意愿的问题,而是有没有能力,这个架构下开发效率会提升很高,而不是消耗资源,特别是基于 ts 开发,项目的质量不是一个级别的
    dongliangnerd
        17
    dongliangnerd  
       2020-01-15 13:26:38 +08:00
    @ianva 你说的这些,除了前端-> 数据层面的映射,其他的组件、ts 还真没啥能力的要求
    raynor2011
        18
    raynor2011  
       2020-01-15 22:28:07 +08:00 via Android
    第一次沟通接口的时候定好,后面不会再因为格式的问题改,因为后端和 UI 不应该强烈耦合,不可能你展示方案变一次,后端接口就跟着动一次
    cs3230524
        19
    cs3230524  
       2020-01-19 12:09:08 +08:00
    当然是后端爹说什么就是什么了
    cs3230524
        20
    cs3230524  
       2020-01-19 12:09:37 +08:00
    要么你自己在前后端加一层做处理。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4099 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 08:43 · PVG 16:43 · LAX 01:43 · JFK 04:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.