V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
jqtmviyu
V2EX  ›  问与答

请问前端如何抽离 model 层, 有没有 vue 相关的案例参考下

  •  
  •   jqtmviyu · 2021-09-01 16:41:22 +08:00 · 1405 次点击
    这是一个创建于 1158 天前的主题,其中的信息可能已经有所发展或是发生改变。
    • 场景:

      1. 后端 api 返回的格式和字端可能不是前端展示需要的格式

      2. 后端接口变化(结构 /字段), 涉及的多个前端页面可能也要改,改动量较大且琐碎

      3. mock 定义的和实际的有差异

    • 需求:

      1. 请求->数据转换 /处理->数据流转->数据展示交互, 在请求和 vm 层再加一层处理

      2. 不管后端返回什么格式 /字端, 统一处理成前端自己定义的

      3. 后端接口变化, 只改 model 中间层

    • 思考:

      1. node.js 中间服务搞不了, 没人懂, 也没资源

      2. Vuex 似乎有点那么意思, 我之前是在 getter 作处理, 但 Vuex 是用来状态管理和共享的, 把所有数据都交给 Vuex 不合适

      3. 其他开发人员应该有类似的需求, 在站内也看到有人建了 serve 层处理接口的数据, 但我没搜到相关的 demo, 实践该怎么做没思路

    • 求助内容:

      1. 有相关的成熟案例可以参考吗? 最好是像 element, antDesignVue 这样的
    13 条回复    2021-09-09 00:54:43 +08:00
    lower
        1
    lower  
       2021-09-01 16:49:40 +08:00
    这种感觉是要后端处理,搞什么 VO DTO DO PO😂
    wunonglin
        2
    wunonglin  
       2021-09-01 16:54:05 +08:00
    页面 => service <= 后端

    对于数据的接收发送处理和转换,抽在 service 层处理
    wunonglin
        3
    wunonglin  
       2021-09-01 16:58:12 +08:00   ❤️ 1
    说大白话就是发数据的时候在 service 把数据转成后台要的,接收的时候把后台散的数据处理成你页面要的
    jqtmviyu
        4
    jqtmviyu  
    OP
       2021-09-01 17:05:05 +08:00
    @wunonglin #3 有相关的案例可以参考吗? 对于 serve 层和 api 和页面之间的调用, serve 层的模块化, 和数据汇集和共享, 没什么思路. 如果是自己用, 随便几个 js 引入调用就完事了, 但我是想把它像 vueX 一样集成到框架里, 自己摸索出来的东西实在没信心在团队里一起用.
    wunonglin
        5
    wunonglin  
       2021-09-01 17:08:53 +08:00
    @jqtmviyu #4

    不太懂怎么解释。我截了一段代码你看看

    https://i.loli.net/2021/09/01/TIzm1xYgShtyfjD.png
    wunonglin
        6
    wunonglin  
       2021-09-01 17:13:41 +08:00
    @jqtmviyu #4
    参考 ng 的 service 的概念咯。这个业务而已,没有框架的。
    假如你数据不需要转换,那么在 service 直接把接收到的数据直接 return 就好了。
    这样做也有好处就是如果后端改数据的话,我只需要改 service 而已,不需要每个调用的页面都要改。

    另外你提到的 vuex 。不要把请求放 vuex 里,虽然可以,但是别。
    hackyuan
        7
    hackyuan  
       2021-09-01 17:17:32 +08:00
    一,在 axios 的响应拦截进行规范处理
    二,如分页接口,抽象为 useFetchPageData,中间逻辑自己补
    三,数据被多处使用时将数据存储在 vuex,配合 getter 或 mutation 中处理
    四,抽象个 util,对数据进行单独处理
    FreeEx
        8
    FreeEx  
       2021-09-01 17:17:34 +08:00
    假设你要查询用户详情,不要直接查询接口拿到数据然后渲染页面,可以定义一个函数,返回对象是前端定义的用户详情 model,在这个函数里面调用接口来查询数据,然后转换后端返回的数据为前端定义的用户详情 model 。

    这种写法是后端使用广泛,因为会复用相关的函数,前端往往是某一个页面查询显示某一些数据,在其他地方用不到,也就省略了这一步,还一个原因就是 js 发的 xhr 请求是异步的,封装使用不太方便,但是现在 js 已经有 async await 了,问题已经不复存在了。
    TomVista
        9
    TomVista  
       2021-09-01 17:42:59 +08:00
    突然想起来这个东西 vue filter
    https://cn.vuejs.org/v2/guide/filters.html
    libook
        10
    libook  
       2021-09-01 18:26:59 +08:00
    如果做 Web+App 跨平台支持的话,这个不能在前端做,因为 App 没法实时更新,所以很多企业的方案是前端+BFF+后端的方式,API 映射工作在 BFF 层做,确保后端不管怎么变,BFF 都能做相应处理来兼容前端各版本。
    keepeye
        11
    keepeye  
       2021-09-01 18:44:03 +08:00
    api 请求封装不就是干这个事情的吗?难道你直接在 methods 里调用 axios?
    jqtmviyu
        12
    jqtmviyu  
    OP
       2021-09-01 19:24:51 +08:00
    @keepeye #11 api 只是调用了 axios 实例传参, 是想再加多一层, 结合业务和页面, 对后端的数据进行组装
    lecion
        13
    lecion  
       2021-09-09 00:54:43 +08:00
    可以参考下 MVP 模式,或者 Clean Architecture 的设计理念。Vue 本质上只是一套 UI 框架,我认为好的业务的设计应该是脱离 UI 的。对于 Model 来说,我认为 Model 是需要分类的:对于页面的渲染,需要建模,比如弹框的显示与否的状态值;对于业务数据就更需要建模,且要保持这块模型的干净。而目前大多数开发者,是将页面模型与业务模型混在一起的,Vue 文件里 data 一把梭,普通页面,简单流程这并没有什么问题,但业务流程一旦复杂,将变得很难维护。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1111 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:31 · PVG 03:31 · LAX 12:31 · JFK 15:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.