2401_82591622的博客

原创 Vuetify：构建优雅Vue应用的Material Design组件库

Vuetify是一个基于Material Design设计规范的Vue.js UI组件库，它提供了80多个精心设计的组件，帮助开发者快速构建美观且功能丰富的企业级应用。2. 响应式设计Vuetify内置了强大的栅格系统，基于12列布局：3. 主题定制化支持动态主题切换和深度定制：4. 无障碍支持所有组件都遵循WAI-ARIA标准，确保残障用户也能正常使用。基本配置常用组件详解布局组件表单组件数据展示组件主题定制案例自定义主题

原创 富文本编辑器：主流插件简介与wangEditor深度配置指南

富文本编辑器（Rich Text Editor）允许用户在网页中进行所见即所得（WYSIWYG）的内容编辑，提供了类似Word文档的编辑体验。Quill​​：一款开源的轻量级富文本编辑器，具有良好的兼容性和强大的扩展性。它采用独特的Delta格式来描述文档变化，便于实时协作和版本管理。Quill 2.0版本引入了新的registry功能，支持多个具有不同样式配置的编辑器在同一页面共存​​​：功能强大的企业级富文本编辑器框架，采用模块化架构设计。

原创 封装uni.request

拦截器是封装中的高级功能，允许我们在请求前和响应后统一处理逻辑。在处理快速点击或防止重复提交时，可以实现防止重复请求的功能。在App端，特别是iOS可能需要处理SSL证书验证。如果使用TypeScript，可以添加类型定义。对于不稳定的网络环境，可以实现请求重试机制。通过拦截器实现全局Loading控制。在H5端，可能需要配置开发环境代理。首先在项目utils目录下创建。可以全局或局部配置请求超时时间。不同环境使用不同配置。

原创 WebSocket断线重连机制：保障实时通信的高可用性

​​速度​​（快速恢复） vs ​​节制​​（避免压垮服务端）​​通用性​​（覆盖多场景） vs ​​定制化​​（适配业务需求）​​自动化​​（无缝恢复） vs ​​可控性​​（允许用户干预）​​终极建议​关键系统采用​​双心跳​​（协议层+应用层）结合​​指数退避​​ + ​​网络状态监听​​服务端实现​​会话无感迁移​​（如Redis存储Session）正如分布式系统名言：“不是考虑连接会不会断，而是何时断健壮的重连机制，正是实时应用的“生命线”。

原创 ​​XSLT：XML转换的“魔法棒”​

大家好！今天我们来聊聊 ​​（Extensible Stylesheet Language Transformations），一种用于转换和呈现XML文档的神奇工具。如果你曾需要将一堆枯燥的XML数据变成精美的HTML网页、PDF报告，或其他XML格式，XSLT就是你的“瑞士军刀”。

原创 keep-alive原理

Keep-Alive 组件内部维护了一个 cache 对象，用于存储它的子组件实例。当一个组件被首次渲染时，Keep-Alive 会将其缓存起来。Keep-Alive 是 Vue 的一个抽象组件，它不会渲染出实际的 DOM 元素，而是将其包裹的动态组件进行缓存。当组件在 Keep-Alive 内被切换时，它的状态会被保留，避免重新渲染。Vue 中的 Keep-Alive 是一个非常有用的内置组件，用于缓存组件实例，以提高性能和用户体验。状态保持：在组件切换时保留组件状态，提升用户体验。

原创 《月亮与六便士》：天才的背叛与凡人救赎的残酷辩证法

世人赞颂“追逐月亮”的勇气，却回避月亮实则是冰山——它的光来自反射，它永远用同一面示人，如同天才只向世界展示被神化的创作。这个抛妻弃子、背叛友人的证券经纪人，在伦敦客厅的茶香与银勺碰撞声中，突然听见了远方的惊雷——“我必须画画”。书中那些“平庸的好人”——哭泣的妻子、接盘画具的德克、土著保姆艾塔，恰是六便士堆砌的堤坝，让艺术洪流不至冲垮文明根基。当土著人遵循遗嘱焚毁惊世壁画时，火焰中消散的不只是杰作，更是对文明世界艺术崇拜体系的嘲讽——真正的纯粹只存在于不被看见的毁灭中。“血泊中的油画颜料如混浊的彩虹”

原创 浏览器重绘与重排

理解渲染流程是高性能开发的分水岭。每一次重排都像重建房屋结构，而重绘只是重新刷漆。掌握二者区别，避免无谓的布局计算，你的页面就能像德芙巧克力般丝滑流畅。​​优化不是炫技，而是对用户体验的极致尊重​​。每一次性能提升，都是百万用户指尖流畅体验的累积。

原创 Js事件循环

​，这意味着它一次只能执行一个任务。想象一下，如果每次执行网络请求时整个页面都冻结几秒钟，用户体验将是灾难性的。事件循环正是为解决这一核心矛盾而生——它使JS在执行长任务时仍能保持界面响应能力。或者遇到过微任务与宏任务执行顺序的陷阱？本文将深入剖析JavaScript事件循环机制，助你彻底征服异步编程的底层逻辑。如同驾驶手动挡汽车需要理解离合器的原理，精通事件循环将使你真正掌控JavaScript的异步世界。的迷惑行为时，你可以自信地说："我知道引擎盖下发生了什么！​​Poll（轮询I/O事件）​​。

原创 浏览器从输入url到渲染出页面的具体流程

递归查询（若缓存未命中）： 本地 DNS 服务器 → 根域名服务器 → 顶级域（.com）服务器 → 权威域名服务器。理解这一过程有助于开发者优化性能（如减少 RTT 时间、避免渲染阻塞），并快速定位问题（如 DNS 失败、TCP 连接超时）。缓存策略：强缓存（Cache-Control）、协商缓存（ETag）。DNS 记录类型： A 记录（IPv4）、AAAA 记录（IPv6）、CNAME 记录（别名）。布局（Layout/Reflow）： 计算每个节点的位置和尺寸（如视口宽度、盒模型）。

原创 前端如何调用外部api获取省市区数据

有许多提供省市区数据的 API 服务可供选择，例如高德地图 API、百度地图 API 等，它们都提供了比较完善的地理数据，包括省市区等信息。：如果使用的是浏览器端的前端应用，需要确保所调用的 API 支持跨域资源共享（CORS），否则可能会出现跨域请求被浏览器拦截的情况。比如可以设置一定的缓存机制，对于短时间内重复请求的数据，在本地缓存后直接使用，减少对 API 的调用次数。注册成功后，在控制台创建应用，设置应用的名称等相关信息，然后获取到相应的 API Key。

原创 前端开发中出现的跨域问题以及解决方案

跨域是指浏览器出于安全考虑，实施了"同源限制"（Same-Origin Policy），使得一个源（Origin）的文档或脚本无法访问另一个源的资源。源由协议（如httphttps）、域名（如）、端口号（如8080）共同定义。只要三者中有一个不同，就被认为是跨域。跨域问题是前端开发中常见的问题，但通过上述解决方案，可以有效地解决跨域问题。简单GET请求：可以使用JSONP。前后端分离：推荐使用CORS。生产环境：可以配置Nginx反向代理。开发环境：可以使用Node中间件代理。实时通信。

原创 vue3动态路由的实现以及目录权限的设置

在中定义静态路由，例如登录页、首页等。path: '/',},meta: {title: '首页',},},meta: {title: '登录',},},},});

原创 vue3+vite配置.env文件环境变量

通过合理配置.env文件，可以有效管理项目中的环境变量，确保在不同环境下应用的正确运行和安全性。以下是一些关键点：（1）使用和.env.test文件来管理不同环境的配置。（2）确保所有环境变量以VITE_开头，以便在客户端代码中访问。（3）不要在.env文件中存储敏感信息。（4）使用.gitignore文件排除.env文件，避免敏感信息泄露。

原创 LLM框架

LLM（Large Language Model，大型语言模型）框架是一类用于开发、部署和优化大型语言模型的工具和平台。它们在自然语言处理（NLP）和人工智能（AI）领域中发挥着重要作用，帮助开发者高效地利用LLM的能力，同时优化性能和降低成本。

原创 ts装饰器

TypeScript 装饰器是一种特殊类型的声明，能够被附加到类声明、方法、访问符、属性或参数上。它本质上是一个函数，会在运行时被调用，并且被装饰的声明信息会作为参数传递给装饰器函数。

原创 git flow工作流

Git Flow 是一种流行的 Git 分支管理策略，由 Vincent Driessen 提出，旨在为团队协作提供清晰的分支模型和工作流程。

原创 unref函数

​​参数​​：可以是一个普通值或一个ref。​​返回值​​：如果是ref，返回；否则返回原值。unref是 Vue 3 中处理ref的便捷工具，特别适用于需要兼容普通值和ref的场景。它能简化代码，但需注意在需要保留响应性时避免滥用。在组合式函数中，它是实现灵活参数传递的关键工具之一。

原创 服务端渲染

服务端渲染(SSR)是一种在服务器端生成完整网页内容的技术，通过将动态数据与页面模板结合，直接生成最终的 ​​ 页面并返回给客户端。客户端（如浏览器）接收到的是可直接显示的完整页面，而非需要依赖 JavaScript 运行时逐步渲染的内容。

原创 在使用api请求之后变量在赋值之前就被使用的解决方法

​​核心思路​​：确保变量在异步操作完成前有合理的默认值，并通过条件渲染、加载状态或可选链操作符避免访问未定义的值。​​最佳实践​​：结合v-ifloading状态和 Pinia/Vuex 状态管理，保持代码可维护性。​​TypeScript 提示​​：使用类型断言或明确初始值避免类型错误。

原创 springboot3框架的使用

​​要求 Java 17+​​：强制使用 Java 17 或更高版本。​​：包名从javax迁移到jakarta（如 Servlet、JPA 等）。​​GraalVM 原生镜像支持​​：通过 Spring Native 支持编译为本地可执行文件。​​改进的 Micrometer 集成​​：增强应用监控能力。​​：符合 RFC 7807 的错误响应格式。

原创 ts新手应该掌握的内容

TypeScript是 JavaScript 的一个超集，为 JavaScript 添加了静态类型系统，让代码更健壮、可维护。

原创 Ts基础类型

TypeScript（简称TS）是一种静态类型检查器，它为JavaScript添加了类型系统。TypeScript的类型系统是结构化的，这意味着你可以为你的变量、函数参数、函数返回值等指定类型。

原创 echart在vue3项目中的使用

这段代码注册了ECharts的核心组件，使其可以在Vue组件中直接使用。： 向ECharts实例设置选项以创建图表。生命周期钩子中初始化ECharts实例。中导入ECharts并注册所需的组件。： 在Vue 3中，您需要在入口文件。： 在Vue组件中，您可以创建一个。来引用图表的DOM元素，并在。JavaScript复制。这样可以避免内存泄漏。

原创 Date日期函数

Date是 JavaScript 中的一个内置对象，用于处理日期和时间。你可以创建Date对象，然后使用各种方法来操作和获取日期和时间信息。以下是一些常用的Date。

原创 vue中computed与watch,action与multation的区别

计算属性通常用于基于现有数据派生新数据，不建议在计算属性中执行带有副作用的操作（如修改数据或调用外部 API）。它们是同步的，并且必须是纯函数，不能包含异步逻辑。用于监视 Vue 实例上的数据，并在数据变化时执行某些操作。的回调函数可以执行带有副作用的操作，例如调用 API、修改数据等。应该是纯函数，即相同的输入总是产生相同的输出，且不产生副作用。：计算属性是惰性的，只有当它的依赖项发生变化时，才会重新计算。是立即响应的，只要监视的数据发生变化，就会触发回调函数。必须是同步的，不能包含异步操作。

原创 vue2路由守卫

在 Vue 2 中，Vue Router 提供了路由守卫（Navigation Guards）的功能，这允许你在路由跳转之前或之后执行逻辑。路由守卫可以用来处理认证、授权、页面标题修改、记录分析数据等任务。

原创 vuex底层逻辑

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。当 state 变化时，Vuex 会通知所有订阅了这个 state 的组件。允许将 store 分割成模块，每个模块拥有自己的 state、mutations、actions、getters，甚至是嵌套子模块。：当 state 发生变化时，所有订阅了这个 state 的组件都会更新。状态是响应式的，当状态发生变化时，所有依赖该状态的组件都会更新。必须是同步函数，这样所有的状态变更都是可跟踪的。

原创 vue2中实现双向绑定的三种方法

如果需要更灵活的双向绑定，可以通过自定义事件来实现。这种方式不依赖于v-model或.sync，而是通过手动触发事件来更新父组件的值。v-model：适用于简单的双向绑定场景，通过绑定value和触发input事件实现。.sync：适用于父子组件之间的双向绑定，通过监听事件实现。自定义事件：适用于更复杂的双向绑定需求，通过手动触发事件和更新父组件的值实现。根据具体的使用场景和需求，可以选择最适合的方式实现双向绑定。

原创 使用数组的遍历方法filter等时的一些细节

一般情况下，大家在写一个普通的箭头函数时都会注意到这一点，然而当大家使用filter等数组遍历方法时，可能就会因为惯性而忽视这个问题，小伙伴们以后在使用这些方法时不要忘记哟。不知道小伙伴们是否还记得有关于箭头函数的简写的描述：当箭头函数中只有一个return 语句时，可以默认不写{}以及return。filter方法中我们是默认使用了一个箭头函数，那么小伙伴们请看，接下来的一种写法的打印结果是什么呢。但是实际上，结果真的是这样吗。此时我们的箭头函数中并没有结束语句，因此控制台打印的变量a为一个空数组。

原创 Web Storage API

WebStorageAPI是一种浏览器提供的客户端存储解决方案，允许网页在用户的浏览器中存储数据。它提供了一种简单而有效的方式来存储和检索数据，而不需要将数据发送到服务器。和。

原创 jses基础

原创 promise

【代码】promise。

原创 js事件总结

除了使用系统提供的这些常规事件类型外，在 JavaScript 中还可以自定义事件，通常使用构造函数来创建自定义事件，并通过方法触发它。常用于组件之间的通信等场景，例如：收起javascript复制// 创建自定义事件detail: {message: '这是自定义事件携带的信息'});// 获取元素，假设是一个div元素// 为元素添加事件监听});// 触发自定义事件这样就可以根据项目的特定需求，灵活创建和使用自定义事件来实现更个性化的交互逻辑。

原创 前端基础算法——基础语法

算法源于牛客网，模式为acm,使用javascript node写的。4.学生基本信息输入输出。3.牛牛学说话之整数。5.出生日期输入输出。11.牛牛的等差数列。

原创 js自定义运动框架演变过程

随着js的高速发展，我们有了许多更加方便快捷的实现js运动的方法，目前使用最多的动画技术是 JavaScript 动画库，此自定义框架仅供了解。

原创 如何更加高效的提问ai

总之，与ai对话不同与我们人与人之间对话，我们需要将问题描述的尽可能准确且具体，方便ai去识别，使我们的查找更加高效。

原创 html+css大致框架梳理