lff18277233091的博客

原创 初学Protobuf

Protobuf是一种高效的数据序列化协议，相比JSON/XML具有更小、更快、更简单的优势。前端使用Protobuf可优化性能（减少传输数据量）、增强类型安全、实现自动代码生成和统一数据结构。使用步骤包括安装依赖、定义.proto文件、编译生成前端代码（支持动态和静态方式），并可与HTTP API集成。提供了TypeScript支持、错误处理、枚举类型等实用技巧，以及与React框架的集成示例。Protobuf通过二进制编码显著提升性能，特别适合对传输效率要求高的场景。

原创 后端一次性返回十万条数据时，前端需要采用多种性能优化策略来避免页面卡顿

前端处理十万条数据的优化方案 摘要：当后端返回大量数据时，前端需采用多种优化策略避免性能问题。主要包括分页加载、虚拟滚动、数据懒加载、Web Workers和时间切片等技术。文中通过Vue示例展示了具体实现方案：使用分页控件管理数据展示范围，通过虚拟滚动只渲染可视区域内容，配合性能监控和时间切片技术优化渲染效率。代码示例包含了数据生成、分页逻辑、虚拟滚动实现和性能统计等功能，有效解决了大数据量场景下的前端性能瓶颈问题。

原创 WebSocket数据推送导致前端卡顿的问题

本文介绍了WebSocket高频数据推送导致前端卡顿的优化方案，主要包括批处理、节流和虚拟滚动技术。核心实现包括： WebSocketHandler类：通过缓冲区和定时批处理机制，控制数据更新频率（默认50条/100ms），避免频繁DOM操作 VirtualList组件：实现虚拟滚动技术，仅渲染可视区域数据，大幅提升大数据集性能 优化措施：限制缓冲区大小防内存溢出、节流控制更新速率、高效数据结构管理 示例代码展示了TypeScript实现的WebSocket批处理工具类和Vue3虚拟滚动组件，适用于高频实时

原创 单点登录（SSO）原理

单点登录（SSO）是一种身份认证机制，允许用户一次登录即可访问多个相互信任的系统。其核心原理是通过中央认证中心验证用户身份，生成票据（Ticket）或JWT Token，各应用系统验证票据有效性后建立本地会话。SSO解决了传统多系统重复登录问题，提升用户体验和安全性，但也存在单点故障风险。常见实现方式包括基于Cookie的跨域共享和基于Token的身份验证，适用于企业内网和互联网应用场景。

原创 正向代理与反向代理的区别（通俗易懂版）

在面试和技术交流中，"正向代理"和"反向代理"是经常被问到的概念。

原创 webpack和vite的区别

webpack和Vite的核心区别在于构建方式：webpack采用全量打包，适合复杂项目但启动较慢；Vite基于ES模块按需编译，开发启动更快。webpack生态成熟但配置复杂，Vite配置简单但生态较新。webpack适合需要深度定制和旧浏览器支持的项目，Vite则更适合追求开发效率的现代应用。两者在构建工具、热更新和兼容性方面各有侧重，选择取决于项目需求。

原创 vue3常见面试题

组合式 API是 Vue 3 引入的一种新的代码组织方式，通过setup函数来组织逻辑。它允许开发者将相关的逻辑代码组合在一起，而不是按照选项（如 data、methods、computed 等）进行组织。优点逻辑复用：通过组合函数（composables）可以更方便地复用逻辑。更好的类型推断：在 TypeScript 中，组合式 API 提供了更好的类型推断。代码组织：对于大型组件，组合式 API 可以使代码更易于阅读和维护。Teleport。

转载 vue 文件导出 前后端demo vue实现导出功能

例如接口：http://197.23.46.97:8088/exprotExcel， 参数：type:'exprot',name:'excel002'，get请求，直接访问接口路径：http://197.23.46.97:8088/exprotExceltype=exprot&name=excel002会直接下载文档；后端导出指的是，后端已经封装好二进制流，前端只需要做的就是请求接口和下载；通常使用在数据量比较大的情况下；前台导出指的是：前端直接导出数据，不经过后台处理，在数据量小的情况下，也很方便处理；

原创 elementUI 级联数据回显，后端返回最后层级的id,如何回显层级数据显示

说明：当前例子使用于，知道某曾记得唯一标识，要知道级联数据，然后根据唯一标识，推出选中层级数据。应用场景：elementUI 级联数据回显，后端返回最后层级的id,如何回显层级数据显示。

原创 elementUI tabs 吸顶功能实现，拉到最底部时候点击tab 回到最初位置

在Element UI中，可以通过监听滚动事件和计算位置来实现Tabs的吸顶功能，并在glue-to-bottom的情况下点击Tab回到最初位置。elementUI tabs 吸顶功能实现,辣到最底部时候点击tab 回到最初位置。方法会在点击 Tab 时触发，如果当前页面有滚动（吸顶），则会平滑滚动到。方法会在滚动时被触发，并计算当前的滚动位置。位置，从而实现点击Tab回到最初位置的需求。，则认为 Tabs 已经吸顶。

原创 vue3笔记

修改名字

原创 支付宝小程序实现优惠券出现悬浮页面

【代码】支付宝小程序实现优惠券出现悬浮页面。

转载 git中Updates were rejected because the tip of your current branch is behind解决方案

这里就要注意一个问题，之前你通过本地仓库进行修改文章最后都会上传到远程仓库(也就是github中)，这就保证了远程仓库和本地仓库是同步的，但是如果你直接在远程仓库(github)中进行修改，默认是不会上传到本地的，这就导致了一个问题，本地仓库中的相关内容没有被修改，而远程仓库中的相关内容被修改，这里可以理解为远程仓库更新了而本地仓库没有更新，这就导致了本地仓库的版本落后于远程仓库，也就是本地仓库和远程仓库版本不一致。解决上述问题后就可保证远程仓库的更新会被同步到本地而本地仓库的修改也不会被覆盖。

原创 支付宝小程序预览base64图片（解决my.previewImage不支持预览base64图片的问题）

【代码】支付宝小程序预览base64图片（解决my.previewImage不支持预览base64图片的问题）

原创 element选择时间报错（赋予了一个时间值之后）

是由于返回的数据和组件定义的时间格式不对，改成一致即可，时间返回格式要和value-format=“yyyy/MM” 对的上，这样子就不会报错了。最近在vue项目中，element-ui中的时间选择器，选定时间后，对时间进行转换时遇到了问题

原创 实现系统三十分钟不操作就自动退出到登录页

思路：有的系统为了安全性会要求用户多长时间不操作的时候退出到登录页面，实现这个功能的时候是我们是由前端实现的，接下来看一下我们是怎么实现的，实现的思路是记录用户操作的最后一次时间，还有再次操作的时间，后面的时间戳减去前面一次的时间戳，如果换算出来的时间内大于三十分钟，则退出到登录页面即可（该操作是在拦截器里面进行判断的）1.先在ipaddress.js定义三十分钟的毫秒数。.........

原创 在html页面中封装elementUi的tree树结构

后端返回的数据结构封装组件的js代码：在html页面中引用和使用实现的效果图：备注：实现的效果管理员能查看全部地区的数据，而本级的话只能查看本级的数据

原创 开发中遇到的递归问题总结（数据的特点有个parentId,主要是把parentId相同的数据整合成tree的要求）

在vue项目中使用elementUI的tree处理后端返回的数据：数据的特点有个parentId,主要是把parentId相同的数据整合成tree的要求，然后把数据结构在页面中显示出来。data里面定义的数据。

转载 开发微信公众号好闻收藏

转载于开发微信公众号

转载 前端根据后端返回的文件流实现下载功能

由于没有接触过后端返回文件流前端实现下载功能的实现,查了很多资料,最终在该大佬的博客中找到答案,非常感谢该博主,再次附上博主的链接:链接

原创 vue中自定义指令

// 导入Vueimport Vue from "vue";// 导入 Storeimport store from "../store/store.js";// 只需要保证执行即可Vue.directive("power", { inserted: function(el, binding) { window.console.log(el); window.console.log(binding.value); if (binding.value.includes(

原创 $set的使用

请求服务器中的数据源，保存之后动态渲染到页面上，发现渲染不上去作用：动态添加属性 ，可以动态渲染到页面上用法：this.$set(obj, key, value)使用方法如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial..

原创 组件中使用props

原创 动态组件


原创 在table中使用组件

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201103225909871.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6

原创 依赖注入

原创 vue 监听

总结:监听watch,其实就是当监听某个值发生改变时做某些操作

原创 vue的计算属性字符串出现翻转

翻转的例子总结性:1.计算属性不能直接改变,而是通过依赖值来改变2.计算属性的函数必须具有返回值,否则不生效

原创 南宁某个公司面试题

南宁某个公司的面试1.团队成员3.你对加班有什么看法，为什么说公司稳定，你怎么判定公司稳定4.你上家公司工资多少，你凭什么拿高薪，你知道南宁的薪资水平吗？5.你平时怎么安排自己空余时间的6.你在这些网站上都学到了什么7.你们公司做什么项目，你们公司在哪？你住哪？8.你现在住哪,怎么过来的9.上家公司加班多吗？最晚是加班到什么时候，平均一天加班多少个小时10.你在上家公司都做了什么项目，做了多少个(四五个，对于外包公司来说少？？？）11.简历这个页面你需要多久时间写出来12.挂过科吗，在

原创 仿喵喵电影总结一：封装公用组件

前言本次记录的是一个使用技术栈vue的一个仿喵喵电影，我首先大概的介绍一下本次项目实现的功能模块有登录注册，搜索模块，城市切换模块，电影模块，详情模块，定位模块，使用better-scroll来做上拉刷新的功能。主要使用到的存储方法有本地存储和使用vuex来存储数据，和使用keep-alive缓存，减轻服务的负担，当然这个也是，性能优化的其中之一，这也是非常受面试官青睐的，本次最大的难点在我看来是切换城市显示对应的电影及定位问题。关于接口现在前后端分离，脱离后端服务的话前端数据是显示不出来的，会

原创 1-promise-base

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc

原创 day03-mobile

day03-mobile1.0 概述1.1 复习准备工作：项目的开发流程前端的职责设计稿完成静态页面接口文档完成数据的渲染准备材料技术的选型搭建项目结构：使用 vue-cli 完成了项目结构的搭建优化结构删除不必要的文件添加一个些额外的文件夹前置知识点：在 vue 中使用 vant：a. 下载 vantb. 在 main.js 中导入 vant导入 vant 的样式使用 vantc. 直接将 vant 的组件在页面中使用v

原创 axios的基本用法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc

原创 elementui时间选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..

原创 elementui栅格布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..

原创 elementui 表单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.

原创 element ui下拉框实例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..

原创 refs的基本使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.

原创 使用原生js实现轮播图

效果图如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-style: non.

原创 js的日期对象

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.