探索前端页面所需要的响应数据格式

最新推荐文章于 2023-04-29 15:25:34 发布
最新推荐文章于 2023-04-29 15:25:34 发布
阅读量1.2k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34111364/article/details/76408524
版权

以下就是来探索一下为什么easyui的datagrid组件的响应数据是json格式

前端的四大要素

请求地址 : /rest/item

请求参数: 分页参数 30 

请求方式: get方式

响应参数: ??? 学过了是json格式如下,

 

 可为什么? 为什么json格式了还要有特定的属性 total 和rows?

因此我要找响应成功之后, 前端是如何处理响应数据的, 因此要找响应成功的js函数. ctrl+ h ==> search  ” .datagrid”  

 

选中最相关的datagrid.js, 再用success关键字找响应成功后处理响应数据的js函数==> 找到之后就可以知道响应数据长成什么样子的

 

发现datagrid是异步请求来的, 响应数据是用data来表示 , 是json数据

那json格式的响应数据有属性上的要求呢? 那就search  data.

 

有rows属性

 

 

说明rows是数组或者是集合

 

还有length属性和footer属性

 

 

但是还是不能解决哪些属性是必须的? 

为什么total 和rows是响应回来的json数据必须的属性? footer 和length不是必须的属性呢? 这就不懂了... 

qq_34111364
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
渲染篇 1：服务端渲染的探索与实践(1).md
04-01
前端性能优化实践# 知识体系与小册格局 ## 写给读者 提起性能优化，大家现在脑海里第一时间会映射出什么内容呢？ 可能是类似[“雅虎军规”](https://developer.yahoo.com/performance/rules.html?guccounter=1)和[《高性能 JavaScript》](https://book.douban.com/subject/5362856/)这样历久弥香的经典之作，也可能是搜索引擎聚合给你的一篇又一篇以性能优化为主题的个人或团队实践而来的“私货”。至少当我确定自己的研发方向、并接到第一个性能优化任务时，我做的第一件事是向搜索引擎求助，第二件事是买书，然后开始了摸着石头过河，前后花费了大量的时间和精力。我深感性能优化实在是前端知识树中特别的一环——当你需要学习前端框架时，文档和源码几乎可以告诉你所有问题的答案，当你需要学习 Git 时，你也可以找到放之四海皆准的实践方案。但性能优化却不一样，它好像只能是一个摸索的过程。 这个摸索的过程是痛苦的、漫长的，也是紧要的。因为在如今的互联网环境下，一个前端团队如果只把性能优化这个任务写在纸上，而不投入实践，它将缺失最基本的竞争力。 笔者写这本小册，是希望通过短短十数个章节的讲解，尽可能降低一些大家学习性能优化的成本。 一方面，这本小册为没有接触过性能优化的新同学建立起一个正确的前端性能优化的“世界观”，知道性能优化是什么、为什么、怎么做，从而使性能优化这件事情有迹可循，有路可走。这样在面试现场被问到性能优化层面的问题时，能够做到滔滔不绝、言之有物，而非像背书一样罗列干巴巴的知识点，最终淹没在茫茫的求职大军中。另一方面，小册可以为在职的工程师们提供一线团队已经实践过的“方法论”，知道什么场景下该做什么事情，最终在脑海中留下一张涵盖核心原理和实践的、可随时查阅并且高度可扩展的性能优化思路索引表。然后在今后的开发生活中可以去践行它，更进一步去挖掘它。把性能优化变作你前端工程师生涯的一门必修课，进而演化为自己研发方面的核心竞争力。 同时，相信大家可以明确这样一个学习观念：任何技术的掌握，都离不开一定比例的理论基础和实际操作的支撑。 具体到前端性能优化这件事情上，我认为它是 20% 的理论，加上至少 80% 的实践，甚至很多理论本身也都是我们在具体的业务场景中实践出来的。所以希望大家阅读本小册时，能够读到一些“书本之外的东西”——最好是一边读一边回忆自己既有的开发经历，尝试去留意哪些知识是已知的，哪些是未知的。 这样读完之后，就可以有的放矢地把这些知识转换为自己的项目实践——前端技术日新月异，性能方案永远都在更迭，所以一定要形成自己的学习思路。 建议每一位读者都带着“学了就要用”的心态去读这本小册。如果阅读结束，能够为你带来哪怕一个小小的开发习惯或者优化观念上的改变，这数小时的阅读时间就算没有白费。 ## 知识体系： 从一道面试题说起 在展开性能优化的话题之前，我想先抛出一个老生常谈的面试问题： > 从输入 URL 到页面加载完成，发生了什么？ 这个问题非常重要，因为我们后续的内容都将以这个问题的答案为骨架展开。我希望正在阅读这本小册的各位可以在心里琢磨一下这个问题——无须你调动太多计算机的专业知识，只需要你用最快的速度在脑海中架构起这个抽象的过程——我们接下来所有的工作，就是围绕这个过程来做文章。 我们现在站在性能优化的角度，一起简单地复习一遍这个经典的过程：首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客户端，拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕，页面便呈现给了用户，并时刻等待响应用户的操作（如下图所示）。 ![](https://user-gold-cdn.xitu.io/2018/10/18/16685737b823244c?w=489&h=329&f=png&s=19023) 我们将这个过程切分为如下的过程片段： 1. DNS 解析 2. TCP 连接 3. HTTP 请求抛出 4. 服务端处理请求，HTTP 响应返回 5. 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户 大家谨记，我们任何一个用户端的产品，都需要把这 5 个过程滴水不漏地考虑到自己的性能优化方案内、反复权衡，从而打磨出用户满意的速度。 ## 从原理到实践：各个击破 我们接下来要做的事情，就是针对这五个过程进行分解，各个提问，各个击破。 具体来说，DNS 解析花时间，能不能尽量减少解析次数
学生信息数据可视化展示页面（前端+后端代码），含MySQL数据库备份信息.zip
04-20
ECharts 是一款由百度开发的、基于 JavaScript 的开源数据可视化库，它提供了丰富的图表类型和高度的可定制性，以帮助开发者轻松创建交互性强、美观且响应迅速的数据可视化界面。ECharts 支持在各种现代浏览器（包括移动设备上的浏览器）以及部分旧版浏览器（如 IE8/9/10/11）中运行，其底层依赖轻量级矢量图形库 ZRender，确保了图表渲染的高效性和跨平台兼容性。 以下是一些关于使用 ECharts 进行数据可视化的关键特性、图表类型和基本使用步骤： ### 关键特性 1. **开源免费**：ECharts 是开源软件，可以免费用于个人和商业项目，无需支付任何费用。 2. **广泛兼容**：支持多种浏览器环境，包括但不限于 Chrome、Firefox、Safari 和 Internet Explorer 系列，保证在不同设备和操作系统上的良好表现。 3. **丰富图表类型**：包括但不限于折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标、漏斗图、仪表盘等，以及三维可视化组件（通过 ECharts GL 扩展）。 4. **交互性强**：图表支持鼠标悬停提示、数据区域缩放、图表联动、图表堆叠、数据过滤、图例开关等多种交互功能，提升用户对数据的探索和理解能力。 5. **个性化定制**：提供详细的配置选项，允许用户自定义图表的颜色、字体、网格线、图例、tooltip、轴标签、数据标签、动画效果等，以满足特定设计需求和品牌风格。 6. **数据更新动态渲染**：能够实时接收新数据并动态更新图表，适用于数据流或实时监控场景。 7. **扩展性**：除了核心库外，有 ECharts GL 用于三维和大规模地理数据可视化，以及周边生态工具（如 ECharts-GL、ZRender）增强其功能和适用范围。 ### 图表类型 ECharts 提供的图表类型涵盖了数据分析和展示的常见需求，包括： - **基础图表**：折线图、柱状图、散点图、饼图、K线图 - **统计图表**：盒形图 - **地理图表**：地图、热力图、线图 - **关系图表**：关系图、treemap、旭日图 - **多维数据可视化**：平行坐标 - **BI图表**：漏斗图、仪表盘 此外，ECharts 支持图表间的混搭，即在一个图表容器内同时展现多种图表类型，以对比或关联不同数据维度。 ### 使用步骤 使用 ECharts 进行数据可视化的一般步骤如下： #### 1. 引入 ECharts 库 在 HTML 文件中通过 `<script>` 标签引入 ECharts 的核心文件： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@版本号/dist/echarts.min.js"></script> ``` 确保替换 `版本号` 为所需的 ECharts 版本。 #### 2. 准备 DOM 容器 在页面上创建一个用于承
个人网站源码包含主页面，内容，文章，分页，使用mysql数据库，tomcat，前台代码是响应式
09-01
个人网站的源代码包括许多组件，例如主页、内容、文章和分页。为了确保无缝功能，使用了MySQL数据库和Tomcat。此外，前端代码被设计为响应式，以在各种设备上提供最佳用户体验。主页作为网站的入口，提供了可用内容的简要快照。内容经过精心策划，以满足目标受众的兴趣和需求。文章旨在提供信息、引人入胜和发人深省的内容，鼓励读者深入探索各种主题。分页在确保内容以用户友好和可访问的方式组织方面发挥着至关重要的作用。通过使用MySQL，网站的数据被高效地存储和检索，确保了最佳的性能。此外，使用Tomcat确保网站安全稳定。总体而言，个人网站的源代码是一件复杂而多方面的技术，需要仔细规划和执行，以提供无缝的用户体验。
【NGOOS极益开源公益平台 v2.2】公益组织CMS平台+支持在线捐赠+整合Bootstrap响应式设计
08-14
NGOOS–极益开源公益平台是极益科技专门为公益组织开发的CMS平台，主要用于快速搭建一个网站，以及公益组织所需的常见功能。NGOOS基于世界顶级CMS——TYPO3搭建，但是大大降低了中国人使用TYPO3的门槛，提高了易用性，到手即所得。 前端 精美设计——整合Bootstrap，响应式设计，适合多种分辨率屏幕。 大图切换——大图展示更震撼。 背景视频——用动态视频替代大图展示，效果更佳。 新闻系统——转发到朋友圈可以轻松转发打赏了，还可以使用多种社交账户参与评论点赞。 图库模块——可用于活动项目介绍等 电子证书——给捐赠人颁发捐赠证书，可用于分享。同时还会将证书通过邮件发送到邮箱。 业务地图——展示你们的业务地理分布，自定义默认地图区域。 背景地图——将地图作为背景，展示联系地址 视频发布——HTML5视频发布，无需Flash插件，适配所有设备 友情链接——用于合作伙伴展示 百度统计——时刻掌握网站的访问情况 百度搜索——使用百度站内搜索 在线捐赠——微信和支付宝捐赠，默认金额可修改。 捐赠查询——按照渠道、时间、金额、名字查询捐赠到账情况。 全站检索——检索全站信息、资讯。 发票申请——申请捐赠发票，增加了税号字段。 社区评论——整合畅言社会化评论 编辑器 ——更换了百度编辑器，增加了远程获取图片、Word批量传图片功能,复制全文，快速传图 项目进展——几组数据说明你现在项目的成绩 大事记 ——以时间线的方式展示大事记，支持年份、更为方便 团队列表——展示整个团队 志愿者登记——招募更多的志愿者 404页面支持 社区分享——分享到各大社区网站 页面二维码——扫码用手机打开浏览 常见内容编辑示例： 管理员登录后，前台可以直接使用管理组件编辑内容 启用了多级缓存，访问速度极快。 文本效果 SEO，全局配置，分页配置，友好地址，例如关于我们是：http://url/aboutus/ 而不是 http://url/index.php?id=12312333] 公益网站建设指南——参照GTI透明指数和《基金会信息公布办法》，在相应的页面上都有说明文字，告诉用户这里放什么内容。 业务后台 站点配置：配置网站名称、SEO、LOGO、支付宝和微信账号、邮件系统等。 修改密码 新闻发布、视频图片发布、置顶，可手机发新闻。 捐款列表并导出EXCEL 导入捐赠信息，按照样例xls文件导入。 按文章查看打赏列表，并可导出EXCEL 查看发票申请并可导出EXCEL。 编辑账号信息。 多浏览器适配，Chorome IE Firefox Safari 多设备适配，适配电脑/平板/手机 总后台 树形网站结构 30种网站内容元素 栏目自定，布局自选 不能再强大的模板系统 丰富而精确的权限管理 回收站功能 无限编辑历史撤销恢复 扩展管理器 全库检索 清除全站缓存 生产与开发模式，生产模式开启后，速度飞快。 多浏览器适配，Chorome IE Firefox Safari 其它：TYPO3有上万的功能点，在强大的后台，需要你一一探索。 注意：源码需在PHP7.0以上的环境中才能运行。 源码更新日志： NGOOS极益开源公益平台v2.2 更新日志： 系统内核升级到TYPO3 9.5.14版本，全面支持PHP7。 新增ECharts图表能力,增强数据展示能力。 新增页面静态化功能。 新增志愿者活动签到打卡系统。 新增PDF报告功能。 新增应用案例功能功能。 增加企业捐赠抵扣税务计算器与个人捐赠抵扣税务计算器。
获取response结果信息
weixin_42813287的博客
04-01 4627
过滤器获取response结果中的信息 实现功能中碰到需要获取返回信息中的自定义code public class CustomFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Overr...
js遍历返回值
qq_43193513的博客
12-09 1002
response.rows.filter((obj)=>{ console.log(obj); })
前台通过rows形式传数据
学习学习再学习
08-24 484
将table表格的多行数据转换成rows数组的形式，后台进行获取。
vue入门
Chow_yi的博客
03-09 283
1，创建vue项目 1.1，安装： npm install -g @vue/cli # OR yarn global add @vue/cli 检查版本 vue --version 升级 npm update -g @vue/cli # 或者 yarn global upgrade --latest @vue/cli 1.2，创建项目 创建一个新项目 vue create hello-world 选择下面三个 2、 2.1、组成-三部分 template 视图标签 （template标签不会
2022/2/14
weixin_43754182的博客
02-15 415
let data = { rows: [], total: 0 } resolve(data) listUser(this.queryParams).then(response => { this.userList = response.rows; this.total = response.total; this.loading = false; }); 关于css浮动问题： 先写右浮动。 全局表单校验： <el-button type=“primary” :disabled="!loginB
常用Response对象的使用祥解
最爱白菜
07-19 2079
每一个程序语言或开发工具都有一定的函数与用户进行沟通，Asp同样如此。在Asp中负责将信息传递给用户的对象就是Response对象。Response对象用于动态响应客户端请求（Request），并将动态生成的响应结果返回到客户端浏览器中，使用Response对象可以直接发送信息给浏览器、重定向浏览器到另一个 URL 或设置 cookie 的值等等。 Response对象在asp编程中非常广泛，也是
flask+layui+echarts实现前端动态图展示数据效果
10-16
在这个场景中，`Flask`作为后端服务器，负责接收前端发送的请求，处理业务逻辑，比如查询数据库获取数据，然后将数据以JSON或其他格式返回给前端。 `LayUI`是一个基于HTML5的国产前端UI框架，提供了丰富的组件，如...
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
10-16
在使用layui这个轻量级的前端UI框架时，我们经常需要处理表格（table）中的数据，使其更加友好地展示给用户。本篇文章将详细介绍如何在layui中针对table中的数据进行判断，特别是将数字0和1转换为具有明确含义的提示...
response中body与data的差异实例
zhangjiashu的博客
05-02 1114
1、this.response { "url": "http://127.0.0.1:7001/api/user/list", "ok": true, "status": 200, "statusText": "OK", "headers": { "map": { "content-length": ["101"], "content-type": ["application/json; charset=utf-8"] } }, "body": { "msg": "
日常代码分享
weixin_71051136的博客
04-29 51
start=')
vue element ui el-table单元格里面显示多张图片点击并放大
m0_58565372的博客
10-13 4444
2.单元格里能够展示多张图片，需要在请求的接口里面做处理。一个单元格里面显示三张图片，并且点击图片可以放大。1.将图片v-for渲染出来，具体上代码。注：el-popover的属性。以上两步，就可以实现上面的功能。
list能查到条数，无详细记录
weixin_51716950的博客
06-14 207
这是前端页面所看到的页面然后查看控制台里返回的数据因为数据库的数据是手动删除记录的，并没有调用接口删除，在测试的时候就回出现这种情况，在回去查看数据库的时候并没有空记录，也不知道是怎么查到有空记录的，可能是由于缓存的原因，面对这种情况，可以在前端 Js 里面进行数据过滤，把空数据给过滤掉，在调接口时的数据处理如下： 修改完的页面就整成了...
element-ui表单前后端数据的交互以及简单的echarts
Cradles的博客
08-04 1332
1.表单的创建 <template> <div class="app-container">
【Vue】data.rows与data的区别？？？
Tuling2020的博客
09-21 1217
<ul id="leftMenu" class="sr-leftBot"> <li v-for="item in resourcesList" class="sr-leftBot-li2"> <!--<a href="#">{{item.name}}</a>--> <a href="#"&...
简历模板简洁风简洁干练简历模板简历模板简洁风(简洁干练简历模板).zip
最新发布
06-17
在求职的征途上，一份出色的简历是你通往梦想职位的敲门砖。我们精心准备了一系列面试求职简历模板，旨在帮助你以最佳形象站在潜在雇主面前。这些简历模板不仅设计精美，而且注重内容的清晰呈现，使招聘经理一目了然地看到你的能力和经验。 我们的模板集合了多种风格与布局，无论你是应届毕业生、职场跳槽者还是行业专家，都能在这里找到适合你职业形象的简历设计。每一个模板都经过精心设计，确保你的简历在众多求职者中脱颖而出，同时保持足够的专业度和可读性。 不仅如此，我们的简历模板易于编辑，你可以根据具体职位需求快速调整内容，展现你的个人优势和职业成就。使用这些模板，将大大提高你的面试机会，并帮助你更好地表达自己的价值和潜力。 别让传统且缺乏创意的简历阻碍你迈向成功的道路。立即下载这些精美的简历模板，让你的求职之路更加顺畅，向心仪的工作迈进吧！记住，一个良好的开始是成功的一半，而一份精致的简历，正是你成功的起点。
web前端开发毕业设计
08-15
6. 前端安全与防护：探索前端安全问题，研究如何防止跨站脚本攻击（XSS）、跨站请求伪造（CSRF）等常见安全威胁，并开发相应的防护机制。 无论你选择哪个主题，都要确保它与你的兴趣和技能相匹配。同时，考虑到毕业...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值