当前位置：首页 > news >正文

最新的前端场景面试题

news 来源：原创 2025/8/29 1:53:54

1、如何实现一个Vue3的弹框组件，你会如何设计？

如果要实现一个 Vue3 的弹框组件，我会从以下几个关键点进行设计：

组件结构：定义组件的基础结构，包括模块（template）、脚本（script）和样式（style）;
显示和隐藏逻辑：设计和实现弹框的显示和隐藏机制，通常通过传递 props 或者使用 Vue3 的 v-model。
过渡效果：添加过渡和动画效果，以提升用户的体验。
插槽（slot）：使用插槽为弹框内容提供灵活的扩展性。
事件处理：提供关闭弹框的事件处理，比如点击遮罩层关闭或者点击关闭按钮。
样式：添加适当的 CSS 样式已确保组件视觉效果良好。

2、Vue 首页白屏可能是什么问题引起的？如何解决？

首页白屏在 Vue 应用中是一种常见的问题。通常可能由以下几个原因引起：

静态资源路径错误。
依赖包没有正确安装或者版本兼容问题。
网络请求失败。
Vue 路由配置错误。
构建工具的问题。比如 Webpack 配置错误。
服务端问题。

解决方法：

确保静态资源的路径配置是正确的，检查 Vue 项目的 vite.config.js 文件或者 Webpack 的配置文件。
确认所有的依赖包已经正确安装，版本兼容。如果有多个版本的 Vue 依赖包，可能会导致冲突。特别是富文本的依赖包。
确保网络请求的 API 正常工作，可以通过 console 打印日志或者 vue devtools 验证。
检查 Vue Router 的配置，包括路径匹配和重定向设置。
审查 Webpack 配置，特别是 output 和 publicPath 设置。
如果使用 SSR（服务器端渲染），检查后端服务是否正常运行。

3、前端如何处理后端接口一次性返回的超大树形结构数据？

当后端一次性返回超大树形结构数据时，对于前端来说，关键在于减少渲染压力、提交用户的交互体验。一般会采用以下几种方法：

分页加载：将数据分成多页，用户滚动或者“加载更多”时再加载新一页的数据。
虚拟滚动：只在视图窗口内渲染一定数量的节点，随着用户滚动动态加载更多的节点。
懒加载：按照需求加载数据，只有在用户展示的某个节点时才请求该节点的子节点数据。
批量处理：将大数据集分模块处理，避免一次性渲染大量的数据，造成浏览器卡顿。

4、使用同一个链接，如何实现 PC 打开是 Web 应用，手机端打开是一个 H5 应用？

实现同一个链接在不同设备上打开不同应用的主要有以下方式：

通过设备类型，页面重定向
通过监测 User-Agent 或使用 JavaScript 的navigator.userAgent 来识别访问设备。
注：User-Agent 检测不是完全可靠的，因为它可以被伪装。

function checkDevice() {// 获取设备const userAgent = navigator.userAgent.toLocaleLowerCase();// 判断设备的类型：移动端true，否则falseconst isMobile = /iphone|ipod|android.*mobile|windows.*phone|mobile/i.test(userAgent);if (isMobile) {// 打开移动端链接window.location.href = '移动端url';} else {// 打开PC端链接window.location.href = 'PC端url';}
}

响应式样式设计
使用响应式设计，通过媒体查询在同一个页面适配不同的设备。

@media screen and (max-width: 768px) {// 移动端样式
}@media screen and (min-width: 769px) {// PC端样式
}

5、使用 Vue 开发一个任务列表应用，你会怎么设计实现？

我会设计一个任务列表应用，核心模块包括任务的展示、添加、新增与删除功能，页面效果用 Vue 来实现，数据会用 Vue 的响应式特性来管理。

创建一个 Vue 项目以及组件。（使用Vue CLI 创建一个新的 Vue 项目）
定义任务的状态和功能方法。（数据可以存储在 Vue 组件的 data()中）
使用模块语法来展示任务列表。（使用 v-for 指令来遍历并展示任务列表，同时绑定相应的事件处理函数）
实现任务的增删改查操作。（使用 v-model
双向绑定来获取用户操作）
处理样式和用户交互。

6、如何禁止别人调试前端页面代码？

在前端任务开中，虽然无法彻底防止别人调试和查看前端页面的代码，但确实有一些方法可以增加调试的难度、提高安全性。以下有几种常见的方法：

禁止右键：利用JavaScript禁止右键，减少用户通过右键菜单进行检查和调试的机会。
```
document.addEventListener('contextmenu', function(e) {e.preventDefault();
});
```
禁止F12和开发者工具：使用JavaScript禁止F12键以及其他可以打开开发者工具的快捷键。
```
document.onkeydown = function (e) {// F12if (e.keyCode 
```

冲刺高分！挑战7天一篇孟德尔联合meta分析 DAY1-7

Day1 此前我们完成了若干篇关于meta的挑战，这一次挑战想在meta分析基础上进一步创新一些，这一次想要挑战孟德尔联合meta分析的文章，有想学习的师弟师妹跟我们一起完成这波挑战吧～ Day1任务收集信息明确选题明确目标期刊精读范文…...

编程日记 2025/8/19 11:54:25

win32汇编环境,对话框中使用树形视图示例二

;运行效果 ;win32汇编环境,对话框中使用树形视图示例二 ;得到树形视图控件Treeview的全路径字符串，这里的方法是由子项向父项挨个找的算法找齐路径 ;直接抄进RadAsm可编译运行。重要部分加备注。 ;下面为asm文件 ;>>>>>>>>>>>>>>&g…...

编程日记 2025/8/24 13:15:09

前端开发10大框架深度解析

摘要在现代前端开发中，框架的选择对项目的成功至关重要。本文旨在为开发者提供一份全面的前端框架指南，涵盖 React、Vue.js、Angular、Svelte、Ember.js、Preact、Backbone.js、Next.js、Nuxt.js 和 Gatsby。我们将从简介、优缺点、适用场景以及实际…...

编程日记 2025/8/26 10:20:06

进入到conf cd /usr/local/tomcat/conf/备份tomcat-users.xml cp tomcat-users.xml{.,bak}编辑tomcat-users.xml vim tomcat-users.xml增加以下内容配置tomcat-users.xml <role rolename"manager-gui"/><role rolename"admin-gui"/><use…...

编程日记 2025/8/29 1:51:09

类和对象(上)

1.面向过程与面向对象的初步认识面向过程：以步骤为中心，适合简单逻辑，但复杂系统易混乱。面向对象：以对象职责为中心，通过抽象和模块化应对复杂需求。 C语言：面向过程，关注的是过程&#xff0…...

编程日记 2025/8/29 1:51:11

springcloud智慧工地物联网云管理系统源码

智慧工地以物联网云平台为核心，基于智慧工地物联网云平台与现场多个子系统的互联，实现现场各类工况数据采集，存储、分析与应用。通过接入智慧工地物联网云平台的多个子系统板块，根据现场管理实际需求灵活组合，实现一体…...

编程日记 2025/8/28 9:22:51

SLAM评估工具安装及使用EVO（Ubuntu20.04安装evo）--缺少 onnx 库还有Pandas 版本不兼容解决

介绍一下我的是ubuntu20.04.机载电脑是orinnx，通过源码烧写的系统。首先打开终端，输入 pip install evo --upgrade --no-binary evo 安装过程中出现如下问题缺少 onnx 库还有Pandas 版本不兼容， ONNX（Open Neural Network E…...

编程日记 2025/8/29 1:51:10

K8S学习之基础十五：k8s中Deployment扩容缩容

deployment扩容缩容比较简单，下面介绍两种常用方法 vi deploy-demo.yaml kind: Deployment metadata:name: myapp-v1 spec:replicas: 2selector:matchLabels:app: myappversion: v1template:metadata:labels:app: myappversion: v1spec:containers:- name: myappim…...

编程日记 2025/8/22 11:03:57

ClickHouse 中出现 DB::Exception: Too many parts 错误

在 ClickHouse 中出现 DB::Exception: Too many parts 错误，通常是由于表中数据分片（parts）数量超过系统限制，导致合并（merge）操作无法及时处理。以下是逐步解决方案： 1. 理解问题原因 MergeTr…...

编程日记 2025/8/29 1:51:09

PPT 小黑第20套

对应大猫21 Word转PPT 图片也得复制题目要求两套PPT母板，应用不同版式（版式那就可以选） 竖排文字...

编程日记 2025/8/19 8:54:51

大模型管理工具：LLaMA-Factory

目录一、安装与环境配置二、启动 Web 界面三、数据准备四、模型训练五、模型评估七、模型导出八、API服务部署 LLaMA-Factory 是一个开源的大语言模型（LLM）微调框架，旨在简化大规模模型的训练、微调和部署流程。它支持多种主…...

编程日记 2025/8/22 17:05:29

【机器人栅格地图】基于鹭鹰算法SBOA实现机器人栅格地图路径规划（目标函数：最短距离）附Matlab代码

基于鹭鹰算法（SBOA）的机器人栅格地图路径规划实现一、鹭鹰算法（SBOA）的基本原理鹭鹰优化算法（Secretary Bird Optimization Algorithm, SBOA）是一种新型元启发式算法，灵感源自鹭鹰的捕猎和逃…...

编程日记 2025/8/27 4:00:22

【Linux篇】版本控制器-Git

📌 个人主页： 孙同学_ 🔧 文章专栏：Liunx 💡 关注我，分享经验，助你少走弯路！ 文章目录 1.如何理解版本控制？2.Git的操作补充细节问题 1.如何理解版本控制？ 版…...

编程日记 2025/8/26 17:21:38

论文阅读：KAM-CoT: Knowledge Augmented Multimodal Chain-of-Thoughts Reasoning

论文来源：AAAI 2024 论文地址：https://ojs.aaai.org/index.php/AAAI/article/view/29844 Abstract LLM通过利用能够逐步思考的思维链在NLP任务中取得了很好的性能，但是为LLM扩展多模态能力时计算成本高，且需要大量的硬件资源。…...

编程日记 2025/8/27 13:04:55

linux内存页块划分及位图存储机制

page_alloc.c - mm/page_alloc.c - Linux source code v5.4.285 - Bootlin Elixir Cross Referencer 一. 什么是页块（Pageblock）？ 定义：页块是物理内存中的一个连续区域，由 2^pageblock_order 个物理页（Pag…...

编程日记 2025/8/28 14:46:40

一台云工作站是否能通过共享云桌面让10人流畅进行三维设计

云工作站，作为一种基于云计算技术的远程工作站解决方案，它将高性能的计算资源集中在云端服务器上，用户通过网络访问这些资源，实现高效、灵活的办公和创作环境。而三维设计，尤其是涉及复杂模型、高精度渲染等领域&#…...

编程日记 2025/8/27 4:35:01

安卓应用之服务

服务服务也是四大组件之一，用于执行长时间运行操作的组件，它与用户界面（UI）是分开的，因此即使用户切换到其他应用，服务依然可以继续运行。主要用于处理一些不需要用户交互的任务。例如，播放音…...

编程日记 2025/8/27 11:44:50

【Vue CLI脚手架开发】——6.scoped样式

文章目录一、scoped是什么二、应用案例1.使用代码2.原理3父组件App未添加scoped影响一、scoped是什么我们知道vue为了防止css样式污染，在每个组件中提供了 scoped属性进行限定css作用域；当<style>标签有 scoped 属性时，它的 CSS 只…...

编程日记 2025/8/17 3:55:11

JVM参数调整

一、内存相关参数 1. 堆内存控制 -Xmx：最大堆内存（如 -Xmx4g，默认物理内存1/4）。-Xms：初始堆内存（建议与-Xmx相等，避免动态扩容带来的性能波动）。-Xmn：新生代大小&…...

编程日记 2025/8/28 4:44:17

NodeJS学习笔记

NodeJS软件安装 node环境安装： https://nodejs.org 安装好后的node通常在C:\Program Files\nodejs验证安装是否成功 node -v npm -v 进入REPL模式命令行模式 nodeNodeJS在REPL模式和编辑器使用 windos在dos下常用命令 windos命令： 1、cmd dos系统2、…...

编程日记 2025/8/26 5:01:28

缺陷管理工具-禅道

目录一、禅道的介绍二、禅道的特点三、禅道使用流程 1.管理缺陷 2.管理用例黑马测试视频学习记录一、禅道的介绍二、禅道的特点三、禅道使用流程 1.管理缺陷 2.管理用例...

编程日记 2025/8/16 12:38:46

C++ 单词识别_牛客题霸_牛客网

点击链接即可查看题目: 单词识别_牛客题霸_牛客网一、题目描述输入一个英文句子，把句子中的单词(不区分大小写)按出现次数按从多到少把单词和次数在屏幕上输出来，次数一样的按照单词小写的字典序排序输出，要求能识别英文单词和句号。输入…...

编程日记 2025/8/23 1:54:19

qt open3dAlpha重建

qt open3dAlpha重建效果展示二、流程三、代码效果展示二、流程创建动作，链接到槽函数，并把动作放置菜单栏参照前文三、代码 1、槽函数实现 void on_actionAlpha_triggered();//alpha重建 void MainWindow::...

编程日记 2025/8/16 10:24:27

PS内发光、外发光

内外发光（图层样式–》内发光、外发光）：（滤色效果最好） 内发光–》结构：内发光的外形内发光–》图素：渐变发光细节的调整内发光–》品质：增加质感内发光–》图素–》阻塞&#x…...

编程日记 2025/8/28 21:50:50

C++之thread_local变量

C之thread_local变量_c threadlocal-CSDN博客 thread_local简介 thread_local 是 C11 为线程安全引进的变量声明符。表示对象的生命周期属于线程存储期。线程局部存储(Thread Local Storage，TLS)是一种存储期(storage duration)，对象的存储是在…...

编程日记 2025/8/29 1:00:15

鸿蒙开发中，数据持久化之Transaction(事务)的概念及应用

SQLite 数据库具备事务处理能力。事务本质上是一组操作的集合，它具有原子性，意味着这一系列操作要么全部成功执行，要么全部失败，不存在部分操作成功而部分失败的中间状态。以常见的转账功能为例，A 账户向 B 账户转账…...

编程日记 2025/8/23 13:33:35

软考高项笔记 1.1.1 信息

1.1.1 信息 📚 信息(Information) 是物质、能量及其属性的标示的集合，是确定性的增加。它以物质介质为载体，传递和反映世界各种事物存在方式、运动状态等的表征。信息不是物质，也不是能力，它以一种普遍形式&#xff0c…...

编程日记 2025/8/27 20:58:01

【TCP/IP协议栈】计算机网络知识补充

参考资料： 前言【计算机网络知识】总结 IP 在互联网中MAC 在局域网中 1. IP地址 IP地址有两个版本，IPv4和IPv6。IPv6现在并没有普及使用，所以现在使用的地址大部分依然是IPv4。 IP地址是在IP协议中，用来标识网络中不同主机的…...

编程日记 2025/8/20 16:09:17

【C++进阶学习】第一讲——继承（下）---深入挖掘继承的奥秘

目录 1.隐藏 1.1隐藏的概念 1.2隐藏的两种方式 2.继承与友元 3、继承与静态成员 4.单继承和多继承 4.1单继承 4.2多继承 5.菱形继承问题1：冗余性问题2：二义性 6.虚拟继承 7.总结 1.隐藏 1.1隐藏的概念在 C 中，继承是一种机制…...

编程日记 2025/8/28 10:59:15

IDEA Generate POJOs.groovy 踩坑小计 | 生成实体 |groovy报错

一、无法生成注释或生成的注释是null 问题可能的原因： 1.没有从表里提取注释信息，修改def calcFields(table)方法即可 def calcFields(table) {DasUtil.getColumns(table).reduce([]) { fields, col ->def spec Case.LOWER.apply(col.getDataType().…...

编程日记 2025/8/23 3:17:15

数据结构与算法计算机组成八股

文章目录数据结构与算法数组与链表的区别堆的操作红黑树定义及其原理计算机组成int和uint的表示原码反码补码移码的定义？为什么用补码？ 数据结构与算法数组与链表的区别堆的操作红黑树定义及其原理计算机组成 int和uint的表示原码反码补码移…...

编程日记 2025/8/24 11:30:21

【奇点时刻】通义千问开源QwQ-32B技术洞察报告（扫盲帖）

以下报告将基于今天各大社区对 Qwen/QwQ-32B（下文简称「QwQ-32B」）模型的讨论、测评与实测体验进行综合性分析与洞察。本报告将从模型背景与定位、核心技术、性能表现与对比、部署与使用方式，以及未来潜力与可能的影响五个维度，帮…...

编程日记 2025/8/27 7:32:13

神经网络中梯度计算求和公式求导问题

以下是公式一推导出公式二的过程。表达式一 ∂ E ∂ w j k − 2 ( t k − o k ) ⋅ sigmoid ( ∑ j w j k ⋅ o j ) ⋅ ( 1 − sigmoid ( ∑ j w j k ⋅ o j ) ) ⋅ ∂ ∂ w j k ( ∑ j w j k ⋅ o j ) \frac{\partial E}{\partial w_{jk}} -2(t_k - o_k) \cdot \text{sigm…...

编程日记 2025/8/25 9:15:06

IDEA 2024.1.7 Java EE 无框架配置servlet

1、创建一个目录（文件夹）lib来放置我们的库 2、将tomcat目录下的lib文件夹中的servlet-api.jar文件复制到刚创建的lib文件夹下。 3、把刚才复制到lib下的servlet-api.jar添加为库 4、在src下新建一个package：com.demo，然后创…...

编程日记 2025/8/26 4:40:07

Three.js 快速入门教程【十四】使用Stats.js监控渲染帧率和性能优化

系列文章目录 Three.js 快速入门教程【一】开启你的 3D Web 开发之旅 Three.js 快速入门教程【二】透视投影相机 Three.js 快速入门教程【三】渲染器 Three.js 快速入门教程【四】三维坐标系 Three.js 快速入门教程【五】动画渲染循环 Three.js 快速入门教程【六】相机控件 Or…...

编程日记 2025/8/28 17:13:53

基于RapidOCR与DeepSeek的智能表格转换技术实践

基于RapidOCR与DeepSeek的智能表格转换技术实践一、技术背景与需求场景在金融分析、数据报表处理等领域，存在大量图片格式的表格数据需要结构化处理。本文介绍基于开源RapidOCR表格识别与DeepSeek大模型的智能转换方案，实现以下典型场景： …...

编程日记 2025/8/27 18:40:34

简单多状态 dp 问题（典型算法思想）—— OJ例题算法解析思路

目录一、面试题 17.16. 按摩师 - 力扣（LeetCode） 算法代码： 代码思路解析： 问题分析： 动态规划定义： 状态转移方程： 初始化： 填表： 返回值： 优化空…...

编程日记 2025/8/26 0:37:59

【电路笔记 TMS320C6***DSP】外部存储器接口 A EMIFA向FPGA(作为异步存储器)写入数据的示例

目录 DSP和FPGA的连接DSP端：传输数据给FPGAFPGA端：接收数据 EMIFA（External Memory Interface A）的“异步存储器”（Asynchronous Memory）指的是那些不与系统时钟同步进行读写操作的外部存储设备。这类存储器…...

编程日记 2025/8/20 10:34:03

pgsql 查看数据库、表、索引大小等

查询数据库大小 -- 查询单个数据库大小 select pg_size_pretty(pg_database_size(postgres)) as size;-- 查询所有数据库大小 select datname, pg_size_pretty (pg_database_size(datname)) AS size from pg_database; 查询表大小 -- 查询单个表大小 select pg_size_pretty(p…...

编程日记 2025/8/22 15:22:27

物联网感知层采集的数据经过etl 后，输送给ai 训练模型和模型本身调优

在物联网（IoT）系统中，感知层采集的数据经过 ETL（Extract, Transform, Load）处理后，可以作为 AI 模型的训练数据，用于模型训练和调优。以下是实现这一过程的详细步骤和技术方案：一、数据流程概述数据采集：通过传感器和物联网设备采集原始数据。ETL 处理：对原始数据…...

编程日记 2025/8/28 1:48:13

C语言基础

一、基础 C语言文件后缀 .c为源文件 .h为头文件以 Visual studio 为例右键点击源文件点击添加，新建项 .c为C语言文件，.cpp为C文件后缀不同编译器会按照不同的编译语法进行编译 .cpp以C语法第一个程序 #include <stdio.h> //包含 st…...

编程日记 2025/8/28 8:50:01

pinginfoview网络诊断工具中文版

介绍 pinginfoview中文版本是一款实用的网络诊断工具，它专为中文用户设计，提供了方便易用的界面，使得在Windows环境下进行ping测试变得更加简单。该工具是由NirSoft开发的一款免费的桌面应用程序，尽管官方可能并未正式发布中文版…...

编程日记 2025/8/26 18:18:59

Anyting LLM LLM温度设置范围

在Anything LLM中，LLM（Language Model）的温度设置是一个关键参数，它影响着模型生成文本时的随机性和确定性。关于Anything LLM的LLM温度设置范围，虽然没有官方的明确数值范围说明，但通常温度参数的设置遵循…...

编程日记 2025/8/24 14:32:26

鸿蒙Android4个脚有脚线

效果 min:number122max:number150Row(){Stack(){// 底Text().border({width:2,color:$r(app.color.yellow)}).height(this.max).aspectRatio(1)// 长Text().backgroundColor($r(app.color.white)).height(this.max).width(this.min)// 宽Text().backgroundColor($r(app.color.w…...

编程日记 2025/8/28 13:48:54