前端列表数据存在的陷阱

简介: 记录列表数据过多存在的问题

列表数据过多,那么就需要翻页,如果添加一条数据,比较麻烦,那么你就需要通过脚本添加了,例如通过shell脚本轻松就可以造大量的数据

#!/bin/bashfor((i=0;i<=100;i++)); docurl'http://testing-ft2x-api.test.cn/api/v1/slo/add' \
-H'Connection: keep-alive' \
-H'Accept: application/json, text/plain, */*' \
-H'X-FT-Auth-Token: front.eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY250X3V1aWQiOiJhY250XzZmMmZkNGMwNzY2ZDExZWJiNTZlZjJiMmMyMWZhZjc0Iiwid3NfdXVpZCI6Indrc3BfMmRjNDMxZDY2OTM3MTFlYjhmZjk3YWVlZTA0YjU0YWYiLCJ0b2tlbl91dWlkIjoiYjk2YmMzYTdiODk1NDY5NGJiNjVhMDhjOWU0OWZlYWUiLCJ0aW1lIjoxNjM2NzAxMjY3LjMxMjU5NDcsInJhbmdzdHIiOiJBU0Iybm9UMCIsImxvZ2luX3R5cGUiOiJ3ZWIifQ.Wv7a3WrpDO8wIkr3AL-T54s1MOufJzm2k8mKsf4uQGg' \
-H'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36' \
-H'Content-Type: application/json;charset=UTF-8' \
-H'Origin: http://testing-ft2x-saas.test.cn' \
-H'Referer: http://testing-ft2x-saas.test.cn/' \
-H'Accept-Language: zh-CN,zh;q=0.9' \
-H'Cookie: fth-loginTokenName=front.eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY250X3V1aWQiOiJhY250XzZmMmZkNGMwNzY2ZDExZWJiNTZlZjJiMmMyMWZhZjc0Iiwid3NfdXVpZCI6Indrc3BfMmRjNDMxZDY2OTM3MTFlYjhmZjk3YWVlZTA0YjU0YWYiLCJ0b2tlbl91dWlkIjoiYjk2YmMzYTdiODk1NDY5NGJiNjVhMDhjOWU0OWZlYWUiLCJ0aW1lIjoxNjM2NzAxMjY3LjMxMjU5NDcsInJhbmdzdHIiOiJBU0Iybm9UMCIsImxvZ2luX3R5cGUiOiJ3ZWIifQ.Wv7a3WrpDO8wIkr3AL-T54s1MOufJzm2k8mKsf4uQGg; fth-lastWorkspaceUUid=wksp_2dc431d6693711eb8ff97aeee04b54af' \
--data-raw'{"name":"s'${i}'","interval":"5m","goal":99,"minGoal":98,"sliInfos":[{"id":"rul_a20c0bb75b8f47dbbcbc3041abd60305","name":"pp","status":0}],"alertOpt":{"alertTarget":[{"to":["notify_b368f00f84bc4d179675e5c7c5d2c66d"],"type":"notifyObject","status":["critical","error","warning"]}]},"describe":""}' \
--compressed \
--insecuredone


在别的页面,下拉框选择中,也要能显示列表中的数据。

那么下拉框的数据,是一次性加载呢,还是滚动一页一页加载?


我们公司开发,既不是一次性加载,也不是一页一页加载


而是通过pagesize=100,来传参,加载100条数据。


看到这里,我必须造数据超过100条了,我要看看100条数据以后它能不能显示出来


果然超过100条数据,不能全部加载了,部分数据显示不出来,而且通过搜索也无法搜索到数据。


那么就有问题了,既不能加载全部的数据,也不能通过搜索来查找数据,那么就需要改了


开发以为,传参pagesize=100,足够你们用了,这么多数据,谁知道测试就是专门找bug的,看到这种情况肯定不能放过,如果你比较粗心,虽然造了很多数据,但是如果不超过100条,那么此问题是不会出现的。

相关文章
|
5月前
|
前端开发
【前端统计图】hcharts实现堆叠柱形图(与后台数据交互)
【前端统计图】hcharts实现堆叠柱形图(与后台数据交互)
30 0
|
4月前
|
前端开发 JavaScript API
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
60 1
|
3月前
|
前端开发 JavaScript 关系型数据库
若依框架------后台路由数据是如何转换为前端路由信息的
若依框架------后台路由数据是如何转换为前端路由信息的
104 0
|
3天前
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
1月前
|
前端开发 容器
web前端--------列表
web前端--------列表
18 0
|
2月前
|
前端开发 Java API
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
229 0
|
2月前
|
JavaScript 前端开发 开发者
深入理解前端框架Vue.js的数据响应式原理
本文将深入探讨Vue.js前端框架中的数据响应式原理,包括双向绑定、依赖追踪和虚拟DOM等核心概念。通过详细解析Vue.js内部实现机制,读者能够更好地理解其工作原理,并在实际开发中更灵活地运用。
|
3月前
|
前端开发 JavaScript
工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办
工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办
70 0
|
4月前
|
JSON 前端开发 Java
JAVA后端向前端传递Long类型数据,导致数据不一致
JAVA后端向前端传递Long类型数据,导致数据不一致
90 0
|
4月前
|
前端开发 JavaScript
前端 dlhelper 下载辅助库(支持链接后台下载、代理下载、Blob 数据下载,针对代理下载灵活使用)
前端 dlhelper 下载辅助库(支持链接后台下载、代理下载、Blob 数据下载,针对代理下载灵活使用)
34 1