场景:
后端 api 返回的格式和字端可能不是前端展示需要的格式
后端接口变化(结构 /字段), 涉及的多个前端页面可能也要改,改动量较大且琐碎
mock 定义的和实际的有差异
需求:
请求->数据转换 /处理->数据流转
->数据展示交互, 在请求和 vm 层再加一层处理
不管后端返回什么格式 /字端, 统一处理成前端自己定义的
后端接口变化, 只改 model 中间层
思考:
node.js 中间服务搞不了, 没人懂, 也没资源
Vuex 似乎有点那么意思, 我之前是在 getter 作处理, 但 Vuex 是用来状态管理和共享的, 把所有数据都交给 Vuex 不合适
其他开发人员应该有类似的需求, 在站内也看到有人建了 serve 层处理接口的数据, 但我没搜到相关的 demo, 实践该怎么做没思路
求助内容:
1
lower 2021-09-01 16:49:40 +08:00
这种感觉是要后端处理,搞什么 VO DTO DO PO😂
|
2
wunonglin 2021-09-01 16:54:05 +08:00
页面 => service <= 后端
对于数据的接收发送处理和转换,抽在 service 层处理 |
3
wunonglin 2021-09-01 16:58:12 +08:00 1
说大白话就是发数据的时候在 service 把数据转成后台要的,接收的时候把后台散的数据处理成你页面要的
|
4
jqtmviyu OP @wunonglin #3 有相关的案例可以参考吗? 对于 serve 层和 api 和页面之间的调用, serve 层的模块化, 和数据汇集和共享, 没什么思路. 如果是自己用, 随便几个 js 引入调用就完事了, 但我是想把它像 vueX 一样集成到框架里, 自己摸索出来的东西实在没信心在团队里一起用.
|
5
wunonglin 2021-09-01 17:08:53 +08:00
|
6
wunonglin 2021-09-01 17:13:41 +08:00
@jqtmviyu #4
参考 ng 的 service 的概念咯。这个业务而已,没有框架的。 假如你数据不需要转换,那么在 service 直接把接收到的数据直接 return 就好了。 这样做也有好处就是如果后端改数据的话,我只需要改 service 而已,不需要每个调用的页面都要改。 另外你提到的 vuex 。不要把请求放 vuex 里,虽然可以,但是别。 |
7
hackyuan 2021-09-01 17:17:32 +08:00
一,在 axios 的响应拦截进行规范处理
二,如分页接口,抽象为 useFetchPageData,中间逻辑自己补 三,数据被多处使用时将数据存储在 vuex,配合 getter 或 mutation 中处理 四,抽象个 util,对数据进行单独处理 |
8
FreeEx 2021-09-01 17:17:34 +08:00
假设你要查询用户详情,不要直接查询接口拿到数据然后渲染页面,可以定义一个函数,返回对象是前端定义的用户详情 model,在这个函数里面调用接口来查询数据,然后转换后端返回的数据为前端定义的用户详情 model 。
这种写法是后端使用广泛,因为会复用相关的函数,前端往往是某一个页面查询显示某一些数据,在其他地方用不到,也就省略了这一步,还一个原因就是 js 发的 xhr 请求是异步的,封装使用不太方便,但是现在 js 已经有 async await 了,问题已经不复存在了。 |
9
TomVista 2021-09-01 17:42:59 +08:00
突然想起来这个东西 vue filter
https://cn.vuejs.org/v2/guide/filters.html |
10
libook 2021-09-01 18:26:59 +08:00
如果做 Web+App 跨平台支持的话,这个不能在前端做,因为 App 没法实时更新,所以很多企业的方案是前端+BFF+后端的方式,API 映射工作在 BFF 层做,确保后端不管怎么变,BFF 都能做相应处理来兼容前端各版本。
|
11
keepeye 2021-09-01 18:44:03 +08:00
api 请求封装不就是干这个事情的吗?难道你直接在 methods 里调用 axios?
|
12
jqtmviyu OP @keepeye #11 api 只是调用了 axios 实例传参, 是想再加多一层, 结合业务和页面, 对后端的数据进行组装
|
13
lecion 2021-09-09 00:54:43 +08:00
可以参考下 MVP 模式,或者 Clean Architecture 的设计理念。Vue 本质上只是一套 UI 框架,我认为好的业务的设计应该是脱离 UI 的。对于 Model 来说,我认为 Model 是需要分类的:对于页面的渲染,需要建模,比如弹框的显示与否的状态值;对于业务数据就更需要建模,且要保持这块模型的干净。而目前大多数开发者,是将页面模型与业务模型混在一起的,Vue 文件里 data 一把梭,普通页面,简单流程这并没有什么问题,但业务流程一旦复杂,将变得很难维护。
|