前端面试项目细节重难点(已工作|做分享)想(八)
面试官:请你讲讲你在该项目中遇到的印象深刻的问题是什么?
答:我的回答:该项目的实现过程中我确实遇到了问题:【我会给大家整理回答思路和角度,那那么遇到这样的问题也可借鉴这种思路进行阐述】
第一层面:分析页面:【原型图如下】
(1)发现问题:
用户在下拉选择的搜索框搜索值David时,整个页面卡死了,不能选到用户需要的值,如下图所示:
此时,打开控制台出现了一个报错信息:大概意思就是id为6的value值已经被id为5的value值使用了。
(2)分析问题:【这个才是项目重难点】
首先,找到返回数据的接口URL,并打开网络请求,根据URL找到该接口,并去预览里复制数据后粘贴到记事本里;

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

最后,定位到了原因:浏览器在渲染页面展示数据时,根据用户输入值肯定匹配到两个value值,不知道哪一个要渲染出来,所以导致用户在搜索David该值时,不知道该匹配id为5的value值还是匹配id为6的value值,就出现了搜索下拉框页面卡死问题。
(3)解决问题:
首先,既然定位到数据出了问题,不是前端导致的问题,那肯定要找上级领导反馈问题,让数据处理这个问题,一个value不能有重复出现的情况。
其次,与产品协商后,数据不能保证完全没问题,所以前端要能保证用户输入value值时,无论选项是否有重复,都得将所有匹配到的选项筛选出来,不能出现用户选不了和页面卡死的问题,效果如下图所示:

第二层面:分析代码:
(4)实现思路:
当用户输入值时,只要与options中匹配到的value值都要显示出来。
(5)代码实现(实现过程):

相关文章:
前端面试项目细节重难点(已工作|做分享)想(八)
面试官:请你讲讲你在该项目中遇到的印象深刻的问题是什么? 答:我的回答:该项目的实现过程中我确实遇到了问题:【我会给大家整理回答思路和角度,那那么遇到这样的问题也可借鉴这种思路进行阐述】 第一层面…...
Loguru,一个 Python 日志神器
大家好!我是爱摸鱼的小鸿,关注我,收看每期的编程干货。 一个简单的库,也许能够开启我们的智慧之门, 一个普通的方法,也许能在危急时刻挽救我们于水深火热, 一个新颖的思维方式,也许能激发我们无尽的创造力, 一个独特的技巧,也许能成为我们的隐形盾牌…… 神奇的 Pyth…...
C++ 反转单词
在C中,反转一个字符串中的单词(单词之间通过空格分隔,但单词内部保持原有顺序)可以通过以下步骤实现: 找到字符串中的所有单词,这可以通过查找空格来实现。将单词存储在一个容器中(例如 std::v…...
Apache Doris 基础 -- 数据表设计(表索引)
1、索引概述 索引用于帮助快速过滤或搜索数据。目前,Doris支持两种类型的索引:内置智能索引和用户创建的二级索引。 内置智能索引 排序键和前缀索引:Apache Doris基于排序键以有序的方式存储数据。它为每1024行数据创建一个前缀索引。索引中的键是当前1024行组的…...
资源描述框架的用途及实际应用解析
什么是RDF? RDF代表 资源描述框架 RDF是用于描述网络资源的框架 RDF旨在被计算机阅读和理解 RDF并非设计用于供人阅读 RDF以 XML 编写 示例 描述购物商品的属性,如价格和可用性描述网络活动的时间表描述网页的信息(内容,作者&a…...
工业级物联网边缘网关解决方案-天拓四方
随着工业4.0时代的到来,越来越多的企业开始寻求智能化升级,以提高生产效率、降低运营成本并增强市场竞争力。然而,在实际的转型升级过程中,许多企业面临着数据孤岛、设备兼容性差、网络安全风险高等问题,这些问题严重制…...
认识微服务,认识Spring Cloud
1. 介绍 本博客探讨的内容如下所示 什么是微服务?什么是springcloud?微服务和springcloud有什么关系? 首先,没有在接触springcloud之前,我写的项目都是单体结构, 但随着网站的用户量越来越大,…...
电脑设置密码怎么设置?让你的电脑更安全!
在如今信息化的社会中,保护个人电脑的安全至关重要。设置密码是最基本的电脑安全措施之一,它可以有效防止未经授权的访问和保护个人隐私,可是电脑设置密码怎么设置?本文将介绍三种设置电脑密码的方法,帮助您加强电脑的…...
搜维尔科技:SenseGlove Nova2使用主动接触反馈来模拟手掌的感觉,结合力反馈和振动触觉反馈,使其成为市场上第一款具有手掌反馈的无线触觉手套
SenseGlove Nova2使用主动接触反馈来模拟手掌的感觉,结合力反馈和振动触觉反馈,使其成为市场上第一款具有手掌反馈的无线触觉手套。 搜维尔科技:SenseGlove Nova2使用主动接触反馈来模拟手掌的感觉,结合力反馈和振动触觉反馈&…...
基于Python的实验室管理系统的设计与实现(论文+源码)_kaic
摘 要 随着实验室设备越来越多,实验室及其设备管理工作变得越来越繁重,还存在些管理模式仍旧处于手工管理模式和一些抢占实验室的不文明现象,传统的手工模式已经满足不了日益增长的管理需求,而本系统摒弃传统模式,开启…...
Windows系统WDS+MDT网络启动自动化安装
Windows系统WDS+MDT网络启动自动化安装 适用于在Windows系统上WDS+MDT网络启动自动化安装 1. 安装准备 1.下载windows server 2019、windows 10 pro的ISO文件,并安装好windows server 2019 2.下载windows 10 2004版ADK及镜像包 1.1 安装平台 Windows 111.2. 软件信息 软件…...
Apple开发者证书创建完整过程
1.创建CSR文件: 打开钥匙串访问程序 选择从证书颁发机构请求 创建证书 保存CSR文件到桌面 成功如下: 开始创建证书: 选择...
for深入学习
目录 练习: 例1: 求解0-100中整除3的数有哪些 例2: 求0-100中含数字9个个数 作业: 练习: 例1: 求解0-100中整除3的数有哪些 代码: #include<stdio.h> int main() {printf("整…...
引用(C++)和内联函数
前言:本文主要讲解C语法中引用如何使用和使用时的一些技巧 基本语法 引用就是取别名 #include <iostream> using namespace std; int main() {int a 10;int& b a;//给a取别名为bcout << a << endl;cout << b << endl;return 0…...
【stm32/CubeMX、HAL库】swjtu嵌入式实验七 ADC 实验
相关电路与IO引脚 注意:串口打印重定向后使用printf打印需要在keil里勾选 Use MicroLIB ,否则会卡住。 参看:https://zhuanlan.zhihu.com/p/565613666 串口重定向: /* USER CODE BEGIN Includes */#include <stdio.h>//…...
springboot 解耦、隔离、异步的原则以及实战
在Spring Boot中实现解耦、隔离和异步的原则,能够提升应用程序的可维护性、可扩展性和性能。下面我会先介绍这三个原则的基本概念和意义,然后通过实战示例展示如何在Spring Boot应用中应用这些原则。 解耦 解耦是减少或消除应用程序组件之间依赖关系的过程,以提高模块的独…...
设计模式详解(八):外观模式——Facade
目录导航 什么是外观模式现实生活类比实战示例门面模式的好处门面模式源码举例 什么是外观模式 外观模式的英文名是Facade,意思是the front of a building,即建筑物的正面(门面),我个人更喜欢翻译成门面模式。门面模式…...
R语言绘图 | 双Y轴截断图
教程原文:双Y轴截断图绘制教程 本期教程 本期教程,我们提供的原文的译文,若有需求请回复关键词:20240529 小杜的生信笔记,自2021年11月开始做的知识分享,主要内容是R语言绘图教程、转录组上游分析、转录组…...
使用PNP管控制MCU是否需要复位
这两台用到一款芯片带电池,希望电池还有电芯片在工作的时候插入电源不要给芯片复位,当电池没电,芯片不在工作的时候,插入电源给芯片复位所以使用一个PNP三极管,通过芯片IO控制是否打开复位,当芯片正常工作的…...
二重,三重积分和曲面,曲线积分的关系和区别
这是我在学习完曲面曲线积分概念后容易和二重三重积分混淆而大概总结和区分了一下,如果有错误请大佬指出,多谢!!!...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
