- 博客(252)
- 收藏
- 关注
RSS订阅原创 使用代理服务器的方式解决跨域问题
当浏览器中运行的前端页面（如：https://a.com）尝试访问另一个源（如：https://b.com）的接口或资源时，浏览器会基于安全策略阻止该请求。1.前后端分离开发时，前端页面（如http://localhost:3000）调用后端的接口（如：http://api.example.com）2.域名不同：a.com vs b.com(包含子域名 sub.a.com vs a.com)1.协议不同：http:// vs https://前端通过同域服务器转发请求，绕过浏览器限制。
2026-02-24 17:00:28
177
转载 Vue3初体验（3）
那是因为 pinia 提供的 storeToRefs 只会将数据做转换，而 Vue 的 toRefs 除了数据会转换，连store中的actions中的方法都会转换。(2). 它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。举个例子，比如有两部分数据需要存储，一个是求和数据，一个是土味情话列表数据，所以在这里我们分开存储。举例：利用Sum.vue组件中获取到的 countStore，直接修改 store 中存储的数据。
2026-02-14 14:51:41
35
原创 Vue3初体验（2）
Hooks，顾名思义，挂钩;在Vue3里，通过hooks，将不同的功能的数据，方法，计算属性，生命周期函数等，所有和该功能有关联的内容，封装到一个函数中。跳转的时候可以使用push跳转，也可以使用replace，push和replace的区别就是，push的留存浏览记录的，可以在浏览器前进和回退里进行操作上一步或者下一步，而replace是不保存浏览记录的。父组件可以传递简单类型和响应式对象类型的数据给子组件，具体操作只需要在调用子组件时，给子组件标签加属性，子组件接收该属性的，并展示对应的值。
2026-02-14 10:45:11
693
原创 Vue3初体验（1）
用在vue组件标签上时，返回的是该子组件（也就是当前vue是父组件）暴露给父组件的对象，暴露哪些，在返回的对象里就包含哪些，不暴露不包含。☆ 从上图可以看到，默认情况下，如果只是在子组件上加上ref属性的话，输出的对象里是没有任何数据的。这个是vue3对子组件数据的一种保护。当监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式——也就是一开始所说的Vue3中点的watch只能监视的四种类型中的。(1) 直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要开启深度监视。
2026-02-13 11:11:20
721
原创 常用且好用的命令
(把feature_aaa合到test分支有冲突，步骤和上面类似，最后一步是/git push origin test:test01)三、将vscode本地 develop 分支完全重置为远程版本。git add . # 标记冲突已解决。二、清除vscode本地远程的分支。# 解决冲突（如果有）
2026-02-02 14:30:04
54
转载 Vue3中的Hooks和Vue2中的mixins的区别
Vue2的选项式开发，，如果在代码过多的情况下，后期在维护的时候需要来回切换代码太过于繁琐，可读性很差。Vue3的组合式开发，通过Hooks将不同功能的代码抽离出来，将同一个功能的代码集合在一起，方便了后期的维护，读起来比较简单。本文来源：作者：月亮慢慢圆链接：https://juejin.cn/post/7512305037484064818来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
2026-01-06 16:28:20
42
原创 Vue响应式丢失的踩坑日记
admin: '', // ✅ Vue建立响应式依赖。Vue的响应式是"一次性"的，初始化时建立，删除后不会自动恢复。重新赋值 = 只是普通JS赋值，不会自动恢复响应式。必须用 $set 或完全替换对象来恢复响应式。// Vue 初始化时：一切都很美好。值赋上了，但是无法删除和更换￣へ￣。删除属性 = 永久失去响应式。// 重新赋值：为时已晚。
2025-12-25 10:04:22
194
原创 动态组件驱动的标签页架构（简单来说：一个页面包含许多Tabs页面，这些Tabs页面渲染逻辑）
{"code": "xxx", "name": "tab页面名称", "component": "xx/xx/xx"}结论：TabMenu.vue 不是在前端代码中直接调用的，而是通过后端返回的动态路由配置来加载的！4. Vue发现activeName匹配 → 调用对应的componentName函数。1. TabMenu创建 → 解析路由配置 → 生成tabPanes数据。5.TabMenu执行，解析 meta.tabs 配置，渲染子页面。6. 组件加载完成 → 渲染到页面。
2025-12-12 11:24:31
403
原创 Get请求 URL超长问题解决
当用户选择多个市，多个区，多个村时，浏览器将市-区-村等筛选条件拼接在Get请求的URL中并发向服务器，因参数过多导致URL长度达到长度限制（通常是2048字符）无法正常发起HTTP请求。（注：HTTP协议规范并未限定URL长度，但实际不同浏览器、nginx、tomcat都对URL长度进行了限制），导致414错误。// 缺点：破坏RESTful语义，缓存失效，不符合GET的幂等性。// 缺点：需要大量业务代码改动，用户体验受影响。// 业务代码完全不需要修改：xxx。// 优点：无URL长度限制。
2025-12-10 09:55:14
361
原创 Vue Router的路由模式
原理：基于HTML5 History API。原理：基于 hashchange 事件。兼容性：需要HTML5支持的现代浏览器。特点：URL干净，无 # 符号。特点：URL中包含 # 符号。SEO友好：便于搜索引擎收录。用户体验更好：URL更专业。分享友好：分享的链接更简洁。兼容性：支持所有浏览器。
2025-12-08 16:01:10
154
原创 request请求相关
qs.stringify(data) 和 JSON.stringify(data) 是两种完全不同的序列化方法，它们的作用和输出结果有显著区别。application/x-www-form-urlencoded ：用于简单键值对数据，通常与 qs.stringify 配合使用。通常与 JSON.stringify(data) 配合使用，将 JavaScript 对象转换为 JSON 字符串。application/json ：用于复杂数据，支持嵌套结构，通常与 JSON.stringify 配合使用。
2025-12-05 10:22:07
712
原创 Vue2 + ECharts 实战：动态一个关键词或动态多关键词筛选折线图，告别数据重叠难题
功能二、一次可以搜索多个图例，以英文逗号分隔。功能一、一次只能搜索一个图例。
2025-12-03 17:36:47
219
原创 el-table动态生成列，表头数据正确但是页面展示顺序不正确
解决办法：给el-table添加一个动态key，在每次数据更新之后更新key的值，比如设置this.key=Date.now()。原因：数据修改了，但是表格组件可能因缓存未更新，通过修改:key强制重新渲染。
2025-11-27 16:52:51
125
原创 el-table表格使用type=selection时复选框列表头与表格错位
当在el-table里面使用多选功能时，出现表头和列里面的多选框没有对齐的问题时。
2025-11-13 11:47:21
298
原创 数组常用的20个方法
用于根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，则返回-1，如果找到了指定的数据则返回该数据的索引。第1个参数 - 如果是负数，则表示从数组尾部开始算起 -1指最后一个元素，-2 指倒数第二个元素，以此类推。第2个参数 - 如果是负数，则表示从数组尾部开始算起 -1指最后一个元素，-2指倒数第二个元素，以此类推。(2)如果有两个参数，该方法返回起始位置和结束位置之间的元素，但不包括结束位置的元素。1、find返回数组中满足条件的第一个元素的值，否则返回undefined。
2025-07-04 17:35:26
1189
原创 Vue 中 this.$emit(‘mount‘) 的妙用
例如在一个组件的 created 钩子中调用 this.$emit('mount')，然后在 mounted 中通过 this.$on('mount', ...) 监听该事件。在 created 钩子中，组件通过 Promise.all 异步加载数据（如部门列表、部署时间等）。在 mounted 钩子中，组件的 DOM 已挂载，但需要依赖异步加载的数据来初始化表单或加载表格。通过 $emit('mount')，确保数据就绪后才执行后续逻辑，避免因数据未加载导致的空值错误。二、这种模式的核心作用。
2025-06-12 16:45:43
395
原创 设置vue-quill-editor编辑器不可编辑
这行代码的作用是尝试通过修改DOM属性来禁用Quill编辑器的编辑功能，不推荐的原因是：直接操作DOM属性可能绕过Quill内部状态管理，引发不一致的问题。Quill官方推荐使用enable方法控制状态，也就下面这种方法。
2025-06-06 10:30:59
600
原创 vue-quill-editor 富文本编辑器禁止编辑
需求：详情页只允许查看富文本编辑器的内容，不可编辑。更改鼠标指针样式 */1.设置编辑框不可编辑。2.设置工具栏不可点击。
2025-06-04 09:57:50
687
转载 vue实现富文本编辑器上传（粘贴）图片
在使用vue-quill-editor粘贴图片的时候，经常是将图片转给base64，再传到数据库，但是base64不太好存储。先将图片上传服务器，在将图片插入到富文本编辑器，同时光标后移动一位。使用的富文本编辑是:vue-quill-editor。
2025-05-28 13:33:38
292
原创 解决文件和图片下载乱码问题❗️
当下载图片或文档时，若未指定 responseType: ‘blob’， ，axios 默认按文本处理，导致二进制数据损坏。在调用 upload 接口时，确保指定 responseType: ‘blob’， 以便正确接收二进制数据。设置 responseType: ‘blob’ 后，浏览器正确解析二进制流，文件得以完整保存。问题原因：下载文件时未正确设置响应类型，导致二进制文件被错误处理。responseType: ‘blob’ // 添加 responseType。问题：1.下载的文件乱码；
2025-05-20 11:30:59
542
原创 el-tree中的this.$refs.tree.setChecked
第一种写法需确保node-key="menuId"且数据准确，适合明确配置的场景。因为它不依赖node-key的配置，直接通过节点对象操作，更直观且不易出错。需确保node.menuId存在且与node-key配置一致。此方式不依赖node-key的配置，通用性更强。直接传入节点对象（node），
2025-04-27 10:06:20
1053
原创 问题：el-tree点击某节点的复选框由半选状态更改为全选状态以后，点击该节点展开，懒加载出来子节点数据以后，该节点又变为半选状态
用forcedFullCheckedNodes来记录那些被用户手动全选的节点ID，这样在加载子节点时，可以检查父节点是否在这个Set中，如果是，就强制其子节点为全选状态，从而保持父节点的全选状态。用`Set`来跟踪那些被强制全选的节点，以确保即使子节点加载后，父节点的状态仍保持正确。子节点加载后，组件重新计算父节点状态，发现并非所有子节点被选中，因此父节点恢复半选状态。用户点击父节点复选框将其从半选变为全选（此时子节点尚未加载）。点击节点展开触发懒加载，加载子节点。当子节点加载后，自动选中所有子节点。
2025-04-18 14:22:50
533
原创 el-tree节点半选状态的设置，以及父子节点之间的联动必要点
仅通过 setChecked 无法实现半选效果，需直接操作节点的 indeterminate 属性。// 手动设置半选状态。
2025-04-18 12:51:05
384
原创 一个页面有多个页签，取消当前所处页签的权限
在路由切换或权限变更时，检查当前页签是否在 validTabs 中。根据用户权限和页签配置，生成当前可访问的页签列表。若当前页签失效，跳转至首个有效页签或默认页签。步骤1：动态获取可访问页签列表。步骤2：检查当前页签是否有效。步骤3：自动重定向至有效页签。
2025-04-15 09:52:10
279
转载 el-tree和el-table联动
label: "全部",type: 0,label: "一级 1",type: 0,label: "二级 1-1",type: 1,// 对应表格数据的id},],},label: "一级 2",type: 0,label: "二级 2-1",type: 1,},label: "二级 2-2",type: 2,},],},label: "一级 3",type: 0,label: "二级 3-1",type: 1,},label: "二级 3-2",
2025-02-27 17:31:11
148
转载 前端通过‘代理配置’的方式解决跨域
同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。如果没有vue.config.js文件，那就找到项目中config文件夹中的index.js文件。这是因为我们发送请求的端口是8081，与服务器的端口不一致，导致跨域问题。
2025-02-08 16:29:19
472
原创 qs.stringify（data）和JSON.stringify（data）的区别
如果你需要将数据序列化为 JSON 格式，使用。如果你需要将数据序列化为 URL 查询字符串格式，使用。两者在功能和用途上有明确的区分，选择合适的方法取决于你的具体需求。
2025-01-24 17:13:16
1219
转载 一篇文章搞懂Vuex
其中参数state参数是必须的，也可以自己传递一个参数，如下代码，进行计数器的加减操作，加法操作时可以根据所传递参数大小进行相加，减法操作没有传参每次减一。
2025-01-17 14:53:06
98
原创 JSON.stringify（res，null，2）的含义
转换为格式化后的 JSON 字符串，便于阅读和展示。这在调试、日志记录、数据传输等场景中非常有用。例如，当你需要将一个复杂对象的结构清晰地展示在控制台或日志文件中时，使用。可以让输出的字符串具有良好的格式，方便查看各个属性及其值。将 JavaScript 对象。
2025-01-13 16:41:08
917
原创 删除VSCode上 origin/分支名，但GitLab上实际上不存在的分支
如果在 Visual Studio Code (VSCode) 中看到的分支在 GitLab 上实际上并不存在，这通常是因为 VSCode 缓存了旧的远程分支信息。这将列出所有的远程分支，你应该会发现那些在 GitLab 上不存在的分支不再显示。这个命令会从所有远程拉取最新的分支信息，并删除那些在远程仓库中已经不存在的分支。这个命令会更新远程分支的引用，并删除那些在远程仓库中已经不存在的分支。这个命令会移除所有已经从远程仓库中删除的分支的本地引用。
2024-12-25 09:47:03
914
转载 Vue项目 跨域 解决方案与 vue.config.js 配置解析
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。这是因为我们发送请求的端口是8081，与服务器的端口不一致，导致跨域问题。
2024-12-05 11:31:30
838
转载 为什么会产生跨域，以及解决跨域的方法
一、跨域1、为什么会产生跨域答：因为浏览器的同源政策，就会产生跨域。比如说发送的异步请求是不同的两个源，就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑，就会产生一个同源政策，不是同一个地方出来的是不允许进行交互的。2、怎么解决跨域解决跨域的方法：第一种jsonp的方法。第二种使用CORS解决跨域问题，即跨域资源共享，在后端设置响应头部，加一句代码：access-control-allow-origin:"*"或者允许交互的域名。
2024-12-05 11:15:18
290
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人