你不讲 wood-CSDN博客

原创上传大文件——断点续传

断点续传技术通过将大文件分割成多个小分片，逐个上传，并在上传过程中记录已上传的分片信息。当上传中断时，可以从最后一个已上传的分片继续上传，避免了重新上传整个文件的问题。前端通过文件选择、分片处理、暂停与继续上传等逻辑实现断点续传功能，而后端则负责接收分片、保存分片和提供已上传分片的查询接口。这种技术在实际应用中可以显著提高文件上传的可靠性和用户体验。

2024-10-27 15:31:17 1712

原创前端 + 接口请求实现 vue 动态路由

后端接口返回路由配置：获取用户的权限信息及路由信息。动态加载组件：使用异步组件方式加载指定路径的组件。动态添加路由：根据权限信息动态添加路由。路由守卫：使用或添加路由。这样可以确保应用根据用户的权限动态加载相应的路由，增强安全性与灵活性。

2024-09-12 19:35:11 2095 4

原创 Elemnt-UI + 递归组件实现后台管理系统左侧菜单

Element-UI 结合递归组件的方式，用于构建后台管理系统的左侧菜单，主要是通过以下步骤实现的：配置路由: 定义一系列路由对象构成的数组 routes递归组件: 利用 Vue 中的递归组件技术，创建一个菜单组件，该组件根据传入的路由配置（通常是 routes 数组）自动生成菜单项。递归的逻辑在于：组件内根据当前路由的 children 属性判断是否有子菜单，如果有，则继续渲染子菜单组件，直至没有更多子节点，以此实现无限级菜单的展现

2024-09-11 21:07:34 2193

原创前端使用 crypto-js 库 aes加解密

AES（高级加密标准）是一种对称加密算法，即加密和解密使用相同的密钥。它可以加密长度为128、192和256位的数据块，并使用128位的密钥进行加密。AES算法使用了固定的块长度和密钥长度，并且被广泛应用于许多安全协议和标准中，例如SSL/TLS、SSH、IPSec等。

2023-08-17 20:15:14 24354

原创在线预览 Word 文档

docx-preview 是一个用于在浏览器中预览 Word 文档（.docx）的 JavaScript 库。它提供了简单易用的 API 来渲染 Word 文档。本文介绍了如何在 Web 应用中实现 Word 文档的预览功能。后端使用 Express 框架提供文件列表和文件内容的 API 接口，前端使用 Vue.js 和 Element UI 组件库展示文件列表并实现预览功能。通过mammoth和库将 Word 文档转换为 HTML 并在新窗口或对话框中展示，确保了良好的用户体验和较高的预览质量。

2024-11-03 22:21:51 2099

原创预览 PDF 文档

在现代Web应用中，文件预览功能是非常常见的需求之一。特别是在企业级应用中，用户经常需要查看各种类型的文件，如 PDF、Word、Excel 等。本文将详细介绍如何在Vue项目中实现 PDF 文档的预览功能。前端通过调用后端 API 获取文件的二进制数据，并将其转换为 Blob 对象。然后使用window.URL.createObjectURL 方法生成一个临时的 URL，最后通过 window.open 方法在新窗口中打开这个 URL，从而实现文件预览。

2024-10-29 22:42:56 993

原创动态渲染组件

Vue.js 提供了一个特殊的元素，可以通过绑定 is 属性来动态地选择和渲染组件。元素的 is 属性可以是一个字符串，表示组件的名称，也可以是一个组件对象。

2024-10-29 22:41:25 620

原创 AI 问答逐字加载特效

逐字加载特效的核心在于逐步将内容添加到页面上，而不是一次性显示所有内容。这可以通过 JavaScript 的 setInterval 函数来实现。具体来说，我们可以在每次定时器触发时，将内容的一部分添加到页面上，直到全部内容加载完毕。

2024-10-28 23:42:46 1922

原创文件下载功能

文件下载功能的基本原理是通过 HTTP 请求从服务器获取文件数据，然后在客户端触发文件下载。直接链接下载：通过 `` 标签的 href 属性指向文件的 URL，用户点击链接即可下载文件。后端 API 下载：通过 AJAX 请求从后端 API 获取文件数据，使用 `Blob` 对象创建一个临时的 URL，再通过 `` 标签触发下载。

2024-10-28 23:40:26 1618

原创使用 Axios 上传大文件分片上传

在上传大文件时，分片上传是一种常见且有效的策略。由于大文件在上传过程中可能会遇到内存溢出、网络不稳定等问题，分片上传可以显著提高上传的可靠性和效率。通过将大文件分割成多个小分片，不仅可以减少单次上传的数据量，降低内存消耗，还能在遇到网络中断时仅需重传失败的分片，从而提高整体上传的成功率和用户体验。

2024-10-27 15:29:16 1713

原创前端安全——敏感信息泄露

通过调用后端 API 接口动态获取敏感数据，避免将敏感信息硬编码在前端代码中，确保数据的安全传输和存储。利用 webpack-obfuscator 插件对前端代码进行混淆，增加破解难度，使得攻击者难以直接从源代码中获取敏感信息。通过环境变量管理敏感数据，确保其不在前端代码中直接暴露，同时便于在不同环境（如开发、测试和生产环境）中灵活配置。这些方法相结合，不仅提升了前端应用的安全性，还增强了系统的灵活性和可维护性，从而有效防止敏感信息泄露。

2024-10-25 20:50:51 1722

原创前端安全——JS 代码绕过

在 Web 应用开发中，前端代码的开放性为恶意用户提供了绕过验证和控制的机会。为了保障应用的安全性，应采取多方面的防护措施。首先，始终在服务器端进行严格的输入验证，确保数据的安全性和完整性。其次，合理使用 Vue 的响应式特性，如 v-if 和 v-show，并在事件处理函数中进行状态检查，防止用户通过修改浏览器控制台中的代码或 CSS 属性来绕过前端控制。此外，可以考虑对前端代码进行混淆处理，增加攻击者的破解难度。综合这些措施，可以有效提升 Web 应用的安全性。

2024-10-25 20:50:25 1353

原创消息会话—发送消息自动滚动到最底部

在设计实现消息会话页面时，为确保每次发送新消息后，页面自动滚动至底部，关键在于利用 Vue 的响应式特性结合 DOM 操作技巧。具体策略为：当消息列表数据更新后，利用确保 DOM 已完成更新，随后设置容器的scrollTop属性等于，从而使页面平滑地滚动到消息区域的最底部，以此提升用户体验，保证用户始终能便捷地查看最新的聊天内容。

2024-10-24 20:13:33 816 1

原创使用 v-html 指令渲染的标签, 标签内绑定的 click 事件不生效

在项目开发中，某些对话框中的快捷选项使用v-html渲染，导致标签内绑定的click事件不生效。为了解决这一问题，可以通过在父容器上使用事件代理（如 @click 事件监听器），并通过事件对象判断点击的目标元素，从而调用相应的处理方法，确保点击事件能够正常触发。

2024-10-24 20:13:05 997

原创 HTML5之canvas绘图

canvas>是 HTML5 引入的一个强大元素，允许直接在网页上进行矢量图形和位图图像的绘制，为网页提供了一个动态图形渲染的平台。这一特性极大丰富了网页的表现力，特别是在数据可视化、游戏开发、交互式图表和动画制作等领域发挥着关键作用。查看浏览器支持率canvas 是一种强大的 HTML5 技术，用于在网页上绘制图形和图像，支持绘制基本形状、处理图像、实现动画效果以及响应用户事件，广泛应用于游戏开发、数据可视化和交互式应用中。

2024-09-14 19:33:38 1233

原创点击 input 框显示弹窗，关闭弹窗给 input 赋值并进行必填校验

点击输入框（input）时显示一个弹窗，当用户关闭弹窗时，将弹窗中的输入值赋给对应的输入框，并对输入内容进行必填项校验

2024-09-14 19:33:29 2248

原创 postcss 插件实现移动端适配

postcss-pxtorem 是一个 PostCSS 插件，它能够将 CSS 中的像素单位（px）转换为 rem 单位。这使得你可以直接按照设计稿的尺寸编写 CSS，并且通过这个插件自动转换为 rem，从而实现响应式布局，让页面在不同尺寸的设备上也能正确显示。

2024-09-13 19:41:07 1005

原创媒体查询 + rem 实现 h5 移动端适配

在 H5 移动端项目中，使用媒体查询（Media Queries）和 rem 单位进行适配是一种非常实用的方法。其核心原理在于利用媒体查询来检测设备的视口宽度或其他特性，并根据这些特性动态调整根元素的字体大小，进而影响到所有使用 rem 作为单位的元素。这种方式允许你在不同屏幕尺寸上调整布局和字体大小，从而提升用户体验。

2024-09-13 19:40:27 568

原创前端单独实现 vue 动态路由

在用户登录成功后从服务器获取用户的权限信息，在 vuex 的异步处理函数中过滤掉角色权限不存在的路由，使用concat()合并公共路由，最后使用动态添加可访问的路由。这样可以确保应用根据用户的权限动态加载相应的路由，增强安全性与灵活性。

2024-09-12 19:34:30 1691

原创 Element-UI 组件实现面包屑导航栏

通过监听路由变化动态生成面包屑项，并在组件创建时初始化面包屑。面包屑项的标题和路径通过路由的meta属性获取，并根据当前路由路径决定是否设置跳转路径。通过这种方式，组件能够根据路由变化实时更新面包屑导航栏，提供清晰的导航指引。

2024-09-11 21:09:59 2349

原创第三方插件 mitt 实现跨组件通信

mitt是一个轻量级的事件发射器/事件总线，它只有 200 bytes 大小，不依赖于任何框架，可以方便地集成到 Vue 应用中。mitt提供了一个简单的 API 来发布事件和订阅事件，非常适合用来替代 Vue 2 中的EventBus模式。创建全局事件总线：在应用入口文件中创建一个 mitt 实例，并将其挂载到全局属性上。注册事件监听器：在接收数据的组件中注册事件监听器。触发事件并传递参数：在发送数据的组件中触发事件，并传递参数。事件处理：监听器接收到事件并处理参数。

2024-09-10 23:27:22 1159

原创组件通信——provide 和 inject 实现爷孙组件通信

provide和inject是 Vue.js 提供的一种在组件之间共享数据的机制，它允许在组件树中的任何地方注入依赖项。这对于跨越多个层级的组件间通信特别有用，因此无需手动将prop数据逐层传递下去。provide在一个组件中使用provide方法来定义要提供的数据或方法。provide方法返回一个对象，该对象包含了要提供的数据或方法。inject在另一个组件中使用inject方法来注入这些数据或方法。inject方法接收一个数组或对象，指明要注入的数据或方法名称。provide和inject。

2024-09-10 23:27:03 1601 1

原创组件通信——Event Bus实现兄弟组件通信

Event Bus 是 Vue 中一种常用的组件间通信模式，它利用全局的 Vue 实例作为事件中心，允许组件之间通过触发和监听事件来进行通信。这种模式简单易用，适用于简单的跨组件通信场景。然而，在更复杂的项目中，可能需要考虑使用 Vuex 进行状态管理，以更好地组织和管理全局状态。

2024-09-09 21:12:30 1329

原创组件通信——$attrs/$listeners实现爷孙组件通信

attrs和$listeners是 Vue.js 提供的一种机制，用于处理未声明的属性和事件的传递。它们在特定场景下非常有用，特别是在需要灵活传递属性和事件的情况下。然而，它们也有一定的局限性，如类型安全问题、调试困难等。因此，在实际开发中，应该根据具体情况权衡是否使用$attrs和$listeners，并在必要时使用它们来增强组件的灵活性和扩展性。

2024-09-09 21:11:40 1321

原创 vue.config.js 配置

vue.config.js 文件是 Vue CLI 项目中的全局配置文件，它允许你以 JavaScript 的形式来配置构建选项，而不是通过命令行参数或者 .vue-clirc 的 JSON 格式。

2024-08-08 22:20:54 7561

原创 vue.config.js 配置configureWebpack 和 chainWebpack 以及一些常用配置

configureWebpack 允许你在 Vue CLI 项目中直接修改 Webpack 的配置。它可以通过一个对象或一个函数来实现。如果你使用的是一个函数，那么它会接收默认的 Webpack 配置作为参数，并且你应该返回一个修改过的配置对象。是 Vue CLI 提供的一种更强大的方式来修改 Webpack 的配置。与不同，使用 Webpack Chain API，它允许你以一种声明式的方式来修改 Webpack 配置。

2024-08-08 22:11:57 6425

原创 vue.config.js 配置 devserve 配置

在 Vue CLI 项目中，devServer 配置用于设置开发服务器的行为。这包括了开发服务器的端口、主机名、是否开启 HTTPS、自动打开浏览器等设置，以及配置代理规则来解决跨域问题。

2024-08-07 23:48:41 4583

原创 vue.config.js 配置多入口文件

在 Vue CLI 项目中配置多入口文件主要是为了支持多页面应用的需求。通常情况下，一个 Vue CLI 项目默认只有一个入口文件，所有的功能和路由都基于这个入口文件展开。但是，对于一些大型应用或者需要独立部署的多个子应用来说，可能需要将不同的功能模块拆分成多个独立的 HTML 页面，每个页面都有自己的入口文件。

2024-08-07 22:02:39 1762 1

原创使用 webpack-obfuscator 进行代码混淆及报错解决方案

Error: The number of constructor arguments in the derived class t must be >= than the number of constructor arguments of its base class. TypeError: Cannot read property 'tap' of undefined TypeError: Cannot read property 'sourceAndMap' of undefined

2024-08-05 00:34:55 5591

原创数据状态持久化插件 vuex-persistedstate 的使用

解决页面刷新后 vuex 数据丢失的几种方法, 以及数据状态持久化插件 vuex-persistedstate 的使用与介绍

2024-08-04 14:17:55 1065

原创 node版本管理插件nvm使用及报错解决方案

nvm使用以及下载node报错: Error retrieving "http://npm.taobao.org/mirrors/node/latest/SHASUMS256.txt": HTTP Status 404nvm 下载 node, npm下载失败解决方法

2024-08-02 22:54:44 976

原创 vue使用自定义指令实现页面按钮权限控制

vue使用自定义指令实现页面按钮权限控制: 用户登录成功后, 在 router.beforeEach() 发起请求获取用户所拥有的权限,并将权限存储到 store 中,初始化 hasBtnPermi 对象, 并导入到入口文件 mian.js,在钩子函数 componentUpdated 判断是否有该按钮权限, 没有就用 removeChild() 方法移除按钮元素

2024-08-01 22:42:46 1167