首页 > 其他分享 >后端返回的数据会不会不符合页面上的展示,还是说后端返回的数据结构就是页面上需要展示的,若后端不需要存储,那么前端即使需要展示的值,也要根据已有值实时计算

后端返回的数据会不会不符合页面上的展示,还是说后端返回的数据结构就是页面上需要展示的,若后端不需要存储,那么前端即使需要展示的值,也要根据已有值实时计算

时间:2024-03-15 23:34:14浏览次数:27  
标签:返回 需要 展示 前端 数据结构 页面

后端返回的数据可能不一定完全符合前端页面展示的需求,这取决于后端API设计和前端UI/UX的设计。
有时后端返回的数据可能是原始数据或者为了满足数据库存储需求的结构化数据,而前端可能需要对这些数据进行处理以便更好地呈现给用户。

  • 数据适配
    如果后端返回的数据结构与前端展示所需不同,那么前端通常需要在接收数据后进行转换或映射以适应页面展示需求。
    例如,将日期字符串转换为可读格式,或者从嵌套对象中提取出特定字段等。
const processBackendData = (backendData) => {
  return {
    // 根据前端需求重新组织数据结构
    displayField1: backendData.nestedObject.field1,
    displayField2: formatDateTime(backendData.date),
    // ...
  };
};
  • 动态计算值
    对于那些不需要后端存储但前端需要展示的值(比如根据其他字段计算得出的结果),前端确实需要实时计算。
    正如之前提到的,可以使用 useEffect 或者表单库提供的变更监听功能来实时更新计算结果。

总之,前端和后端之间可能存在一定的数据解耦,前端应该具备数据处理和转换的能力,以确保无论后端返回何种数据结构,都能正确、有效地在界面上展示。
同时,对于一些非存储但需要展示的数据,前端应负责动态计算并更新视图。

标签:返回,需要,展示,前端,数据结构,页面
From: https://www.cnblogs.com/longmo666/p/18076488

相关文章

  • 后端返回的值,不能直接用于表单展示,有的表单项的值是根据其他表单项计算出来的,有的是根
    后端返回的值,不能直接用于表单展示,有的表单项的值是根据其他表单项计算出来的,有的是根据下拉框的选中项的其他属性获取到的,这时候该如何处理?还有最后要保存的时候,传给后端的值,与表单的数据结构也不一样,有的甚至没有放在表单属性上,比如当前下拉框选中的对象而非id,整个需要传给后端......
  • 一般后端返回的数据结构是数据库中的存储结构,与前端需要展示的结构不一样对吗?
    是的,一般情况下后端返回的数据结构确实可能与前端需要展示的结构不完全一样。原因有以下几点:数据库存储结构:后端从数据库中查询到的数据通常遵循数据库表的设计,包括关系型数据库中的外键关联、嵌套数据等。这些数据可能是为了满足数据库设计规范和查询效率而组织的,并不一定直......
  • 页面侧边栏顶部固定和底部固定方法
    顶部固定用于侧边栏低于屏幕高度----左侧边栏底部固定用于侧边栏高于屏幕高度----右侧边栏vue页面方法 页面布局页面样式,因为内容比较多,只展示主要代码*{margin:0;padding:0;text-align:center;}.head{width:100%;height:88px;......
  • QT TreeWidget控件实现文件树 展示目录结构
    目录1、获取盘符,以及一级子文件2、getFileOnDirectory函数,遍历指定文件夹的一级子文件3、绑定展开信号和槽函数,遍历指定文件4、QTreeWidgetItem::setData()用法如图所示,这里仅仅实现展示目录结构,对于新增文件、修改文件、删除文件会后续补充。 思路:这里我并没有在程序......
  • 微信小程序(页面导航)
      如果跳转到非tabBar页面,可以省略open-type          在onload获取到参数后,可以保存到data中供其他方法使用,常见的是使用query:{}接收 ......
  • 【若依前后端分离+app】app页面首页添加动态轮播图
    首页文件路径:pages/work/index.vue1. Vue组件的模板部分包括创建模板、视图容器、视图、轮播图组件以及相关的属性和事件监听器。以下部分为轮播图代码:<template><viewclass="work-container"><view><!--轮播图--><uni-swiper-dotclass="uni-s......
  • 统一返回结构 ResponseResult
    //定义返回数据结构publicinterfaceIResult{IntegergetCode();StringgetMessage();}//常用结果的枚举publicenumResultEnumimplementsIResult{SUCCESS(2001,"接口调用成功"),VALIDATE_FAILED(2002,"参数校验失败"),COMMON_FAILED(2003,......
  • 实现不同页面不同页眉
    1.第一页的页眉2.点击分隔符-下一页分节符,一定要选这个3.关闭同前节4.编辑第二页的页眉 5.成功,这样就实现啦 ......
  • 6.闲置、求购页面
    闲置页面搜索框与首页搜索框一致uview官网https://vkuviewdoc.fsq.pub/components/search.html搜索框<u-search:show-action="true"action-text="搜索":animation="true"></u-search>增加外边距margin="20rpx0rpx"tabs标签uview官网https:......
  • vue中router页面之间参数传递,params失效,建议使用query
    vue中router页面之间参数传递,params失效,建议使用query简介:本文讲解vue中router页面之间参数传递,params失效,建议使用query。在vue中有一个router功能,他可以用来页面之间的参数传递,他有两种方式一种是params方式,一种是query方式,但是params方式特别容易导致参数的丢失问......