ZZZZZZZZjy的博客

原创 遇到前端导出 Excel 文件出现乱码或文件损坏的问题

确认接口响应：确保后端返回的是二进制流（如 ）或 Base64 编码的 Excel 文件，而非 JSON 字符串。用浏览器开发者工具（Network 标签）检查接口响应类型：正确的 应为 （xlsx）或 （xls）。响应体应为二进制（非可读文本）。如果后端返回的是文件流，前端无需手动生成文件，直接触发下载：方案 2：手动构造 Blob如果后端返回的是 Base64 编码：3. 编码问题处理乱码的可能原因 响应头缺失：后端未设置 或 。前端未正确解码：如 Base64 解码错

原创 多终端屏幕分辨率适配全方案：从设计到实现的系统化指南

随着设备形态的多样化（手机、平板、PC、折叠屏、智能设备等），屏幕分辨率差异已成为前端开发的核心挑战。优秀的多终端适配不仅需要保证界面 “能显示”，更要确保不同设备上的功能完整性、交互一致性和视觉合理性。本方案从设计规范、技术实现、工程化工具到测试优化，提供全链路解决方案，帮助团队高效落地多终端适配。/* 基础断点定义（与设计稿对齐） *//* 小屏手机 *//* 普通手机 *//* 平板 *//* 小屏PC *//* 大屏PC */

原创 vue和react和uniapp的状态管理分别是什么，并且介绍和怎么使用

Vue：Vue2 用 Vuex，Vue3 推荐 Pinia（更简洁，支持 Composition API）。React：复杂项目用 Redux Toolkit，简单项目用 Context + useReducer。UniApp：优先使用 Vuex/Pinia（与 Vue 生态一致），简单场景可用全局变量或事件总线。状态管理的核心是 “集中管理共享状态”，选择方案时需根据项目复杂度和团队熟悉度决定。

原创 回答“http协议 ，js组件化，工程化， seo优化策略 ，针对不同平台终端适配 web标注和兼容性”

前端回答这些问题时，需结合 “原理 + 工具 + 实践”：既要解释核心概念，也要说明具体落地的技术方案（如用 Vite 做工程化、Next.js 做 SSR），并强调 “问题场景化”（如针对 SEO 问题，需先分析页面是 SPA 还是静态页，再选SSR（服务器端渲染）/SSG（静态站点生成） 方案）。

原创 回答“启动速度，内存占用，流畅度 ，浏览器兼容，”

用 Lighthouse 或 WebPageTest 定期检测性能瓶颈（量化指标：FCP、LCP、CLS 等）。优先解决影响用户体验的核心问题（如首屏加载慢、交互卡顿）。兼容问题需在开发初期明确范围（如是否支持 IE），避免后期返工。

原创 vue3对比vue2的性能优化和提升 ：Vue 3 vs Vue 2

Vue3相比Vue2的主要优化包括：响应式系统改用Proxy替代Object.defineProperty，原生支持数组索引修改和length变化；采用懒代理模式处理深层嵌套对象，减少初始化开销；虚拟DOM引入静态标记和PatchFlags，提升diff效率；更好的TypeScript支持；支持多根节点组件。此外，配套工具Vite基于ESM原生模块和Rollup打包，提供更快开发体验。这些优化使Vue3在性能、开发体验和大型项目支持上显著优于Vue2。

原创 单页面应用（SPA）和多页面应用（MPA）

原创 服务器端渲染（SSR ）和客户端渲染（CSR）

SSR 即服务器端渲染（Server-Side Rendering）是一种在服务器端将网页的 HTML 内容渲染好后再发送给客户端浏览器的技术。

原创 解决样式隔离的方法

【代码】解决样式隔离的方法。

原创 前端如何解决跨域

主要用于对 Vue 项目进行一些个性化的配置，比如设置开发服务器的代理、修改打包输出的路径、添加插件等。它专注于 Vue 项目相关的特定配置，并且是基于 Vue CLI 提供的一套配置体系。Webpack 是一个更通用的模块打包工具，不仅仅用于 Vue 项目，也可以用于其他各种前端项目。在这个配置文件中，可以对模块的加载、打包的规则、插件的使用等进行非常详细和灵活的配置。记忆口诀：“Vue 配置特定专，简洁针对 Vue 干。是 Webpack 这个打包工具的通用配置，更全面和底层，适用于各种项目类型。

原创 npx和npm 和pnpm的区别

【代码】npx和npm 和pnpm的区别。

原创 git命令

【代码】git命令。

原创 vue3-父子通信

一个简单的vue3子组件调用父组件方法的demo。）有一个按钮，当点击这个按钮时，它会触发一个名为。）监听了这个事件，并在事件触发时调用。在这个例子中，子组件（

原创 v3+ts/request封装axios

【代码】v3+ts/request封装axios。

原创 前端开发高频面试题

通过将 DOM 操作转化为 JavaScript 对象的操作，Vue 可以利用虚拟 DOM 进行比较和差异计算，只更新那些真正发生变化的节点，从而提高页面的渲染效率。当数据发生变化时，Vue会触发相应的setter，通知所有依赖这个属性的观察者（Watcher），从而触发视图的更新。在Vue中，数据（Model）和DOM（View）之间的交互是通过Vue实例（ViewModel）来完成的。为了提高性能，Vue推荐使用数据驱动视图的方式，通过改变数据来自动更新DOM，而不是直接操作DOM。

原创 面试题react03

受控组件：其值由React state控制，并且只能通过更新state来改变。例如，。非受控组件：其值由DOM本身控制，React不会直接管理。例如，或。

原创 vue面试题2-根据以下问题回答

keep-alive是Vue的一个内置组件，它的主要功能是缓存不活动的组件实例，而不是销毁它们。当组件在内被切换时，它的状态将被保留，而不是被重新创建。，当data中的某个属性值发生变化时，Vue会将其标记为“脏数据”，并等待一个“tick”（18. Vue 中给 data 中的对象属性添加一个新的属性时会发生什么?在这个“tick”期间，如果有多个数据发生变化，Vue。16. 对keep-alive的理解，它是如何实现的，具体缓存的是什么?nextTick是Vue提供的一个方法，

原创 面试题vue+uniapp（易理解）可先收藏点赞方便查找，未编辑完整....

Vue 2 的响应式系统基于，通过 getter/setter 来实现数据的依赖收集和变化通知。Vue 3 的响应式系统基于Proxy，提供了更强大的数据监听能力。它使用ref和reactive来创建响应式数据。watch在 Vue 2 和 Vue 3 中都是存在的，但它并不是响应式系统的核心部分，而是一个用于观察数据变化并触发相应逻辑的工具。vue2 Object.defineProperty 和 vue 3 Proxy 区别：数据劫持。

原创 uniapp+ vue3+ts+pinia bug:(“hasInjectionContext“ is not exported by “node_modules)

版本不匹配，搞了好几天才看到这个博主的文。

原创 vue2-上传文件深度学习el-upload的属性方法（解答合作私信我）

BeforeUpload也没有生效，也就是浏览器过滤掉了非accept内的文件格式的文件，所以on-change检测不到文件状态改变。: 这个方法用于清空已选择的文件，当调用这个方法时，upload组件会清空当前已选择的文件列表。: 为上传组件设置一个引用，以便在代码中可以通过引用来访问上传组件的实例。组件的行为，以及处理文件上传过程中的各种情况。是一个方法，用于处理文件上传成功的逻辑。是一个方法，用于处理文件选择改变的逻辑。是一个数组，包含了已上传的文件列表信息。是一个变量，包含了上传文件的地址。

原创 echart-关系图 echarts-gl（兼职合作私信）

/echarts 3D插件。安装npm install [email protected] --save 【重启】}这里好像没有生效因为我想要一个动画效果。

原创 父组件样式不影响子组件

这段代码中的子组件`chartPie2`的`style="height: 100%;width: 100%"`属性将该组件的宽度和高度设置为100%。这意味着该组件将占据其父组件的整个可见区域，包括水平和垂直方向。需要注意的是，如果子组件的父组件也设置了宽度和高度为100%，那么子组件将占据整个页面的可见区域，而不仅仅是一个父组件。因此，在使用这种样式时，需要确保子组件的父组件不会影响子组件的可见性。通过设置宽度和高度为100%，子组件可以覆盖其父组件的内容，从而使父组件的其余部分不可见。

原创 介绍区分rpx、px、em、rem、%、vh、vw

px这个单位用的非常多，我们大多数人都很熟悉了吧。px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。px是固定长度单位，不随其它元素的变化而变化em单位的名称为相对长度单位，它是用来设置文本的字体尺寸的，它是相对于当前对象内文本的字体尺寸；

原创 el-tabs如何切换组件，动态切换

v-if用于根据条件判断是否渲染指定的元素或组件，里的条件是"activeName === item.name"，即当组件的name属性值与当前激活的标签页名称(activeName)相同时，才渲染该组件。而v-bind(:)用于动态绑定属性值，这里的属性是"is"，它指定了要渲染的组件类型，即item.components，表示渲染当前标签页对应的组件。

原创 怎么将默认起始时间值绑定到页面上

在JavaScript中，'i < 4'是一个条件判断，表示只有当变量i的值小于4时，后面的代码才会被执行。在这个代码片段中，它用于控制将字符推入'year'数组还是'month'数组。索引位置'i'在这里代表的是字符串中每个字符的位置，索引从0开始。因此，'i < 4'意味着只有当字符的位置在字符串的前四个位置（即索引从0到3）时，该字符才会被推入'year'数组。是一个方法调用，用于获取默认的起始时间值。为什么只有当字符的索引位置小于4时，才会将该字符推入'year'数组中，小于4是什么意思。

原创 tree组件默认选中以及高亮

阅读资料文章。

原创 【bug笔记】el-icon-arrow-down箭头图标在titile最后一个字上

按照公司需求把侧边栏改成顶部导航之后，也可能由于之前 前端代码问题或者摸个样式继承我的导航旁边的箭头出现了以下bug。浏览器debug发现right：20px去掉就好了，于是打算用覆盖right：unset。此类名也找了一会，发现在 rouyi.scss里面，加上之后就好了。不知道大家遇到过没，检查浏览器发现 有一些代码里面没有的样式。

原创 vue2+若依框架+element-ui如何实现侧边栏改成顶部导航？(兼职解答合作私信)

我们的思路是把垂直的侧边栏二级标题换成水平的，查看element-ui的官网可知NavMenu 导航菜单。把vertical改成horizontal之后并把侧边栏组件放到顶部组件中发现它没有到上面去如下图。于是给sidebar的el-menu组件加一个flex让它浮动上去。侧边栏的空白区是多余的就把sidebar-width设置为0就好了。若依没有开启设置布局中的topnav的时候是这样的。最后顶部导航就出来，有同样需求的小伙伴可以试试，

原创 vue3-切换界面+登录页面密码登录+短信登录发送验证码

'短信验证码登录' : '密码登录' }}控制文字 {{ isPass?'密码登录' : '短信验证码登录' }}

原创 后台-权限管理

后台权限操作详细笔记版

原创 封装级联组件以及双向绑定

在vue2使用v-model对组件进行双向绑定

原创 如何使用树形组件以及递归转化树形数据

const children = transListToTreeData(list, item.id) // 找到的节点的子节点。1.封装调组织架构数据的接口2.然后按需导入，3.定义方法并调用接口然后用4.created调用方法。获取完的组织数据使用转化方法转化成树形 并用created调用好自己封装好的方法。this.getDepartment() // 调用获取数据的接口。// 当前节点的id 和 当前节点的子节点的pid是想等的。通过在el-tree中传入插槽内容，就可以。// 找到了匹配的节点。

原创 主页权限验证以及处理token失效的问题

超时-调用action删除本地token--重新跳转登录页。

原创 了解vuex的以及vuex中的token的数据持久化

vuex，token的数据持久化

原创 axios的封装以及处理请求和响应拦截器

/ 创建一个新的axiso实例，返回的对象定义为service。// 失败执行promise 终止当前Promise执行。// 请求拦截器 成功执行第一个函数，失败执行第二个函数。baseURL: '/api', // 基础地址。// 注入token 先判断有没有，没有才注入。// 成功执行config。// error错误对象。

原创 如何弹出文件选择器并且选择文件？

文件上传功能