前端面试项目细节重难点(已工作|做分享)想(八)

面试官:请你讲讲你在该项目中遇到的印象深刻的问题是什么?

答:我的回答:该项目的实现过程中我确实遇到了问题:【我会给大家整理回答思路和角度,那那么遇到这样的问题也可借鉴这种思路进行阐述】

第一层面:分析页面:【原型图如下】

60d12960403445409aaca1aa40d969aa.png 

(1)发现问题:

用户在下拉选择的搜索框搜索值David时,整个页面卡死了,不能选到用户需要的值,如下图所示:

e1319d1f08524c22a8da5900c8bcc1a7.png 

此时,打开控制台出现了一个报错信息:大概意思就是id为6的value值已经被id为5的value值使用了。

(2)分析问题:【这个才是项目重难点】

首先,找到返回数据的接口URL,并打开网络请求,根据URL找到该接口,并去预览里复制数据后粘贴到记事本里;

dce66d886bd64090b0b7b9cd4f3c12d4.png

 

然后,直接使用查找功能,分别找到id为5和id为6的value值,确实都是`David`,数据结构如下图所示:

16774429acf448f4b3794e99ee36db93.png

 

最后,定位到了原因:浏览器在渲染页面展示数据时,根据用户输入值肯定匹配到两个value值,不知道哪一个要渲染出来,所以导致用户在搜索David该值时,不知道该匹配id为5的value值还是匹配id为6的value值,就出现了搜索下拉框页面卡死问题。

(3)解决问题:

首先,既然定位到数据出了问题,不是前端导致的问题,那肯定要找上级领导反馈问题,让数据处理这个问题,一个value不能有重复出现的情况。

其次,与产品协商后,数据不能保证完全没问题,所以前端要能保证用户输入value值时,无论选项是否有重复,都得将所有匹配到的选项筛选出来,不能出现用户选不了和页面卡死的问题,效果如下图所示:

a693b37548cc47f48ab53022869483dd.png

 

第二层面:分析代码:

(4)实现思路:

当用户输入值时,只要与options中匹配到的value值都要显示出来。

(5)代码实现(实现过程):

264e69cc16f6480abc1fdc2b994e0893.png

80350d186bc54c4cafb4d7c05292c3b2.png 

2d815d9eaee14b92bddfa6da7cd28b9d.png 

54a88970251745898a0b5d389f590bdb.png 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/849091.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JSONPath使用指南(掌握JSON数据提取)

大家好,在处理 JSON(JavaScript Object Notation)数据时,有时需要从复杂的结构中提取特定部分。JSONPath 就是一个非常有用的工具,它提供了一种简洁而强大的方式来定位和提取 JSON 数据中的元素。无论是在 Web 开发中处…

Linux-桌面操作系统在服务器上未关闭休眠机制,使其开机半小时左右死机无法远程ssh连接

故障表述 操作系统:ubuntu desktop 18.04 异常描述:开机半小时左右死机 1、登录iBMC查看硬件无异常 2、登录ubuntu desktop 18.04操作系统,导出日志文件syslog、dmesg、lastlog(路径:/var/log),操作系统在11月8号~11月9号之间出现异常 经分析操作系统日志文件,操作系…

OpenStack云平台管理

OpenStack云平台管理 文章目录 OpenStack云平台管理资源列表基础环境一、部署Openstack二、创建网络和路由2.1、删除默认的网络2.2、创建网络和路由2.2.1、创建外部网络2.2.2、创建内部网络 2.3、创建路由 三、创建实例3.1、配置实例3.2、配置NAT转换 四、绑定浮动IP地址五、添…

【TB作品】MSP430F149 单片机 音乐喷泉

功能 声音越大,亮的灯越多。 oled显示出当前的声音大小。 硬件接线 //OLED----MSP430 //VCC-----3.3V //GND-----GND //D0------P3.2 //D1------P3.0 //RES-----P2.0 //DC------P2.2 //CS------P8.1 led P4八个引脚 adc P6.0 部分代码 _EINT();while (1){adok…

上位机图像处理和嵌入式模块部署(f407 mcu中的项目开发特点)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 和soc相比较,mcu的项目规模一般不算大。因为,soc项目中,从规划、硬件开发、驱动、应用端、服务器端到测试&…

举个栗子!Quick BI 技巧(8):柱形图的制作及应用

众所周知,在数据分析中,柱形图是利用率非常高的一种图,主要是用于比较各组数据之间的差别,并且可以显示一段时间内的数据变化情况。那么在 Quick BI 中要如何来制作柱形图呢? 今天的栗子,我们就来分享如何…

DP:子序列模型

子数组vs子数列 1、子数组(n^2) 子序列(2^n) 2、子数组是子序列的一个子集 3、子数组必须连续,子序列可以不连续 一、最长递增子序列 . - 力扣(LeetCode) 算法原理: 1、状态表示&#xff…

数据管理积重难返?这有一个新药方丨直播预告

大数据产业创新服务媒体 ——聚焦数据 改变商业 在数智化转型的浪潮中,数据管理领域正面临着前所未有的挑战和机遇。企业在数据管理过程中,普遍遭遇数据孤岛、数据质量不佳、存储和处理成本高昂、数据安全与隐私保护压力以及多源异构数据整合困难等诸多…

【MMU】——MMU 页命中/缺页

文章目录 MMU 页命中/缺页MMU 命中MMU 缺页 MMU 页命中/缺页 MMU 命中 处理器产生一个虚拟地址。MMU生成 PTE 地址,并从高速缓存/主存请求得到它。高速缓存/主存向 MMU 返回 PTE。MMU 构造物理地址,并把它传送给高速缓存/主存。高速缓存/主存返回所请求…

SpringBoot引入WebSocket依赖报ServerContainer no avaliable

1、WebSocketConfig 文件报错 Configuration EnableWebSocket public class WebSocketConfig {Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}2、报错内容 Exception encountered during context initialization - canc…

SpringBoot+Vue校园管理系统(前后端分离)

技术栈 JavaSpringBootMavenMyBatisMySQLVueElement-UIShiro 系统角色 管理员用户院系管理员 系统功能截图

《互联网政务应用安全管理规定》电子邮件安全如何整改?

继上篇文章(解读《互联网政务应用安全管理规定》网络和数据安全中的身份认证和审计合规)之后,本篇文章继续解读第五章“电子邮件安全”,为党政机关事业单位提供电子邮件系统整改思路。 “电子邮件安全”内容从第三十一条到第三十…

VirtualBox 虚拟机中的 centos7 系统拉取 docker 镜像常见报错及解决方法

一、拉取镜像时报错:Error response from daemon: Get "https://registry-1.docker.io/v2/": tls: failed to verify certificate: x509: certificate signed by unknown authority 原因:(文心一言给出的原因) 这个错误…

如何通过 4 种方式备份和恢复Android联系人

毫无疑问,联系人是Android手机上存储的最重要的信息之一。为了保护这些重要数据,明智的做法是对Android手机进行联系人备份。如果您的手机发生任何情况导致数据丢失,例如被盗、系统崩溃或物理损坏,您可以再次将备份中的联系人恢复…

c# 下 ScintillaNET 显示XML信息并折叠节点

winform下显示XML信息(非WPF) 之前使用的是FastColoredTextBox,github地址如下: https://github.com/PavelTorgashov/FastColoredTextBox 但是有个问题,它支持中文,wordwraptrue,自动换行时&…

玩物科技:引领物联网时代的创新先锋

在深圳这座充满活力和创新精神的城市,有一家年轻而充满潜力的公司正在悄然改变我们的日常生活。深圳市玩物科技有限公司自2017年成立以来,凭借其卓越的技术和创新理念,逐渐成为物联网时代的先锋力量。 玩物科技的愿景与使命 玩物科技的核心…

【vue3响应式原理】

# 源码结构 源码位置是在packages文件件内,实际上源码主要分为两部分,编译器和运行时环境 1. 编译器 compiler-core 核心编译逻辑compiler-dom 针对浏览器平台编译逻辑compiler-sfc 针对单文件组件编译逻辑compiler-ssr 针对服务端渲染编译逻辑 2. 运行时…

使用kafka tools工具连接带有用户名密码的kafka

使用kafka tools工具连接带有用户名密码的kafka 创建kafka连接,配置zookeeper 在Security选择Type类型为SASL Plaintext 在Advanced页面添加如下图红框框住的内容 在JAAS_Config加上如下配置 需要加的配置: org.apache.kafka.common.security.plain.Pla…

企业数字化转型的主要方面有哪些?

本人研究企业数字化转型10余年,为企业软件选型、数字化提供咨询服务!目前重点研究低代码数字化转型玩法,力争为各行各业探索出一条最具性价比的数字化方式。 关于“企业数字化转型包括哪些方面”这个问题,咱先来看个例子哈~ 比如…

用负载绿原酸的纳米复合水凝胶调节巨噬细胞表型以加速伤口愈合

引用信息 文 章:Modulating macrophage phenotype for accelerated wound healing with chlorogenic acid-loaded nanocomposite hydrogel. 期 刊:Journal of Controlled Release(影响因子:10.8) 发表时间&a…