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

[jqtmviyu]

• 场景:

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

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

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

• 需求:

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

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

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

• 思考:

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

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

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

• 求助内容:

  1. 有相关的成熟案例可以参考吗? 最好是像 element, antDesignVue 这样的

[lower]

这种感觉是要后端处理，搞什么 VO DTO DO PO😂

[wunonglin]

页面 => service <= 后端

对于数据的接收发送处理和转换，抽在 service 层处理

[wunonglin]

说大白话就是发数据的时候在 service 把数据转成后台要的，接收的时候把后台散的数据处理成你页面要的

[jqtmviyu]

@wunonglin #3 有相关的案例可以参考吗? 对于 serve 层和 api 和页面之间的调用, serve 层的模块化, 和数据汇集和共享, 没什么思路. 如果是自己用, 随便几个 js 引入调用就完事了, 但我是想把它像 vueX 一样集成到框架里, 自己摸索出来的东西实在没信心在团队里一起用.

[wunonglin]

@jqtmviyu #4

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

https://i.loli.net/2021/09/01/TIzm1xYgShtyfjD.png

[wunonglin]

@jqtmviyu #4
参考 ng 的 service 的概念咯。这个业务而已，没有框架的。
假如你数据不需要转换，那么在 service 直接把接收到的数据直接 return 就好了。
这样做也有好处就是如果后端改数据的话，我只需要改 service 而已，不需要每个调用的页面都要改。

另外你提到的 vuex 。不要把请求放 vuex 里，虽然可以，但是别。

[hackyuan]

一，在 axios 的响应拦截进行规范处理
二，如分页接口，抽象为 useFetchPageData，中间逻辑自己补
三，数据被多处使用时将数据存储在 vuex，配合 getter 或 mutation 中处理
四，抽象个 util，对数据进行单独处理

[FreeEx]

假设你要查询用户详情，不要直接查询接口拿到数据然后渲染页面，可以定义一个函数，返回对象是前端定义的用户详情 model，在这个函数里面调用接口来查询数据，然后转换后端返回的数据为前端定义的用户详情 model 。

这种写法是后端使用广泛，因为会复用相关的函数，前端往往是某一个页面查询显示某一些数据，在其他地方用不到，也就省略了这一步，还一个原因就是 js 发的 xhr 请求是异步的，封装使用不太方便，但是现在 js 已经有 async await 了，问题已经不复存在了。

[TomVista]

突然想起来这个东西 vue filter
https://cn.vuejs.org/v2/guide/filters.html

[libook]

如果做 Web+App 跨平台支持的话，这个不能在前端做，因为 App 没法实时更新，所以很多企业的方案是前端+BFF+后端的方式，API 映射工作在 BFF 层做，确保后端不管怎么变，BFF 都能做相应处理来兼容前端各版本。

[keepeye]

api 请求封装不就是干这个事情的吗？难道你直接在 methods 里调用 axios?

[jqtmviyu]

@keepeye #11 api 只是调用了 axios 实例传参, 是想再加多一层, 结合业务和页面, 对后端的数据进行组装

[lecion]

可以参考下 MVP 模式，或者 Clean Architecture 的设计理念。Vue 本质上只是一套 UI 框架，我认为好的业务的设计应该是脱离 UI 的。对于 Model 来说，我认为 Model 是需要分类的：对于页面的渲染，需要建模，比如弹框的显示与否的状态值；对于业务数据就更需要建模，且要保持这块模型的干净。而目前大多数开发者，是将页面模型与业务模型混在一起的，Vue 文件里 data 一把梭，普通页面，简单流程这并没有什么问题，但业务流程一旦复杂，将变得很难维护。