- 博客(40)
- 收藏
- 关注
RSS订阅原创 Nginx 反向代理：前端静态资源跨域请求后端接口解决方案
场景：前端页面（本地 / 打包后静态资源）部署在 Nginx，前端 JS 请求/api/xxx，由 Nginx 转发到外网后端接口（解决浏览器跨域）。
2026-09-17 17:17:16
217
原创 Vue实现高效拖拽效果 vue-Draggable
Vue.Draggable是基于Sortable.js的Vue组件，提供直观的拖拽排序功能，支持列表项拖拽、跨列表拖拽、动画效果等特性1.基础拖拽排序2.跨列表拖拽核心参数配置4.嵌套拖拽注意事项1.唯一key：确保列表使用唯一标识作为key,避免索引作为key导致的渲染问题2.性能优化：大数据列表禁用动画（no-transition-on-drag）或使用virtual-scroll3.样式冲突：若自定义样式不生效，使用：：v-deep穿透作用域CSS
2026-09-17 11:32:02
241
原创 Vue3对接AI Agent: 封装流式对话组件
在涉密内网项目中，需要对接内部自研AI Agent，实现对话问答能力。环境比较特殊：不能访问外网，无法引入第三方成熟AI对话组件，SSE流式返回、会话上下文管理、MarkDown与代码块渲染、请求中断、异常降级全部需要自己从零封装。最终封装出通用对话组件，供内部多个业务页面复用，业务开发效率提升30%。本文梳理开发全流程、核心实现思路以及生产环境踩坑，适合想自己实现流式AI对话的前端同学参考。
2026-09-09 22:43:56
113
原创 踩坑之前端接口请求发生时序覆盖问题
问题场景：第一次请求先发起➡第二次请求后发起网络原因：第二次先返回，页面渲染正确数据后；之后很慢的第一次请求才返回，用旧的数据覆盖掉页面这是最典型的晚发先至时序覆盖问题注意：防抖只能减少请求次数，并不能阻止这个bug发生。就算只发两次请求，依然会慢请求晚回覆盖。
2026-09-04 11:05:10
194
原创 vue技术栈的选型依据
defineStore，id唯一；defineProps、defineEmits、defineExpose、defineModel都是编译宏，不需要导入。Vue3重写虚拟DOM，PatchFlags标记动态节点，diff的时候跳过静态节点，提升编译运行性能。5.track()收集依赖，trigger()触发更新，effect()副作用函数。3.Suspense：处理异步组件，等待异步组件加载，显示fallback占位内容。3.触发更新（set）：修改数据，取出收集的effect执行，更新视图。
2026-08-27 16:51:36
268
原创 如何实现单行/多行文本溢出的省略样式
普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略。，作用是设置文本不换行，是。
2026-08-20 11:22:20
163
原创 响应式设计
1.概念响应式网站设计是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏飒飒·幕定向等）进行相应的响应和调整。2.实现方式响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport属性对应如下：width = device-width: 是自适应手机屏幕的尺寸宽度maximum-scale: 是缩放比例的最大值inital-scale: 是缩放的初始化。
2026-08-19 19:34:42
155
原创 Vue3新特性
在vue2中，像modals,toast等这样的元素，如果我们嵌套在Vue的某个组件内部，那么处理嵌套组件的定位、z-index和样式就会变得很困难。composition Api,也就是组合式api,通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理。Teleport 是一种能够将我们的模板移动到DOM中Vue app之外的其他位置的技术，就有点像哆啦A梦的“任意门”vue可以开发出更多其他的功能，而不必担忧vue大暴出来的整体体积过多。对使用者，大暴出来的包体积变小了。
2026-08-18 21:57:27
201
原创 SPA首屏加载速度慢的解决
首屏时间，指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容，首屏加载可以说是用户体验中最重要的环节常见的几种SPA首屏加载优化方式。
2026-08-18 17:08:55
146
原创 Vue做权限管理
前端权限控制方案综述 前端权限控制主要包含四个方面：接口权限、按钮权限、菜单权限和路由权限。 接口权限：采用JWT验证，通过axios拦截器实现token验证和401跳转登录。 路由权限： 方案一：初始化挂载所有路由，存在性能问题 方案二：动态路由(addRoutes)，登录后按需加载权限路由 两种方案都存在菜单与路由耦合的问题 菜单权限： 方案一：前后端分离，通过name字段关联 方案二：完全由后端返回路由配置 需要前后端密切配合 按钮权限： 方案一：v-if判断 方案二：自定义指令v-has 后者更优雅
2026-08-18 15:39:18
228
原创 Vue 中 axios的封装
基于XMLHttpRequest 服务来执行HTTP请求，支持丰富的配置，支持Promise，支持浏览器端和Node.js端。大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，这里将普适性的请求头作为基础配置。不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、请求头、根据项目环境判断使用哪个请求地址，错误处理等等操作，都需要写一遍。封装的同时，你需要和后端协商好一些约定，请求头，状态码，请求超时时间......
2026-08-18 10:21:41
222
原创 Vue项目解决跨域
2.Proxy也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。1.CORS（Cross‑Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的 HTTP 头组成，这些 HTTP 头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源 只要后端实现了 CORS ，就实现了跨域。
2026-08-17 11:04:07
241
原创 动态给vue的Data添加一个新的属性数据更新但是页面没有更新，怎么解决
直接使用Object.assign()添加到 对象的新属性不会触发更新，应创建一个新的对象，合并原对象和混入对象的属性。如果你发现你自己需要在Vue中做一次强制更新，99.9%的情况，是你在某个地方做错了事。如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新（不建议）如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象。PS：仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。如果为对象添加少量的新属性，可以直接采用Vue.set()
2026-08-16 16:42:39
187
原创 VUE组件通信之兄弟组件传参
兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值。另一个兄弟组件通过$on监听自定义事件。创建一个中央事件总线EventBus。
2026-08-15 23:04:09
27
原创 ES6关键点回顾
then()：时实例状态发生改变时的回调函数，第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，then方法返回的是一个新的Promise实例，也就是promise能链式书写的原因。ES6通过扩展元素符...好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列，主要用于函数调用的时候，将一个数组变为参数序列，可以将某些数据结构转为数组，能够更简单实现数组复制，数组的合并也更为简洁了。对象的状态不受外界影响，只有异步操作的结果，可以决定当前是哪一种状态。
2026-08-14 21:41:36
177
原创 文件上传之大文件断点续传
上传过程中将文件在服务器写为临时文件，等全部写完了（文件上传完），将此临时文件重命名为正式文件即可 如果中途上传中断过，下次上传的时候根据当前临时文件大小，作为在客户端读取文件的偏移量，从此位置继续读取文件数据块，上传到服务器从此偏移量继续写入文件即可。整体思路比较简单，拿到文件，保存文件唯一性标识，切割文件，分段上传，每次上传一段，根据唯一性标识判断文件上传进度，直到文件的全部片段上传完毕。分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分割成多个数据块（Part)来进行分片上传。
2026-08-13 11:02:22
217
原创 前端工程化
entry入口、output打包输出、loader处理非JS文件、plugin插件、mode环境。将ES6+转ES5，兼容低版本浏览器core-js实现polyfill填充缺失API。CSRF跨站请求伪造：token验证、SameSite Cookie、验证码。XSS跨站脚本：输入过滤、转义、CSP、HttpOnlyCookie。点击劫持：X-Frame-Options。中间人攻击：全站HTTPS。
2026-08-12 10:03:54
215
原创 vue3的知识点梳理
Composition API (setup)：逻辑按功能聚合，复用性强，TS友好。：模板允许多根节点，不再必须一个根 div；：传送门，把模板 DOM 渲染到组件 DOM 树之外（body 下，弹窗、浮层）：处理异步组件，等待异步组件加载，显示 fallback 占位。options API：选项式，代码分散，大型项目难维护。toRefs：批量解构对象所有属性，解构后不丢失响应式。toRef：单独提取对象一个属性，保持响应式。markRaw：标记对象，永远不做响应式代理。
2026-08-11 13:11:00
175
原创 vue2 的关键点梳理
创建：beforeCreate → created（可访问data/methods,Dom未创建）挂载：beforeMount → mounted（DOM渲染完成，可操作DOM，发送请求）销毁：beforeDestroy → destroyed （销毁定时器、解绑事件）更新：beforeUpdate → updated（数据更新，DOM重绘）3.子访问父：$parent、provide/inject(跨层级）4.兄弟/跨组件：EventBus、Vuex/Pinia。1.父子：props/$emit。
2026-08-11 11:03:41
204
原创 基础知识点梳理
Promise.allSettled：全部执行完，返回每个结果状态Promise.resolve/Promise.reject。important > 行内样式(1000) > ID选择器（100）> 类/属性/伪类（10）> 标签/伪元素（1)静态方法：Promise.all：全部成功才resolve，一个失败立即reject。JS单线程，事件循环机制 任务优先级：同步代码>异步代码(微任务>宏任务）定义： 函数A内部返回函数B，B持有A作用域变量，形成闭包。异步中又分微任务和宏任务：微任务>宏任务。
2026-08-10 21:44:37
205
原创 常用知识点梳理
JSON 是字符串格式，不是 JS 对象。JSON：只能用双引号，不能写注释，key 必须双引号；不支持函数、undefined。
2026-08-07 00:10:03
241
原创 AI Agent 前端自学路线（五）
本文介绍了一个基于Node.js和Cursor的AIAgent实现方案，适合前端开发者快速构建具备工具调用能力的AI助手。文章分步骤详细讲解了项目搭建过程： 初始化Node.js项目并配置TypeScript环境 定义核心类型（消息、工具接口等） 实现基础工具（计算器、时间获取） 提供两种大模型接入方案： 真实API方案（对接DeepSeek） 纯本地模拟方案（基于关键词匹配） 项目采用工具调用循环机制，支持自动判断是否需要调用工具并汇总结果。本地模拟方案无需API密钥和网络请求，适合学习Agent的核心工
2026-08-04 16:35:10
226
原创 AI Agent 前端自学路线（四）
本文阐述了AI Agent四大核心模块与前端的映射关系：1）规划器（Planner）类比Promise链/Redux Saga，负责任务拆解和状态管理；2）工具调用（Tool Use）相当于Service层，通过标准化接口实现功能调用；3）记忆模块（Memory）对应状态管理与存储，包含短期对话记忆和长期向量化存储；4）任务拆解（Task Decomposition）采用组件化思维，通过递归执行处理复杂任务。这些模块共同构成了AI Agent的完整工作流，其设计理念与前端架构高度相通。
2026-08-02 20:57:18
178
原创 AI Agent 前端自学路线（三）
RAG（检索增强生成）是大模型落地中解决知识过时和私有数据问题的核心技术，通过外挂向量知识库实现精准回答。其流程为：先检索知识库中与问题相关的片段，再基于这些内容生成答案，从而减少幻觉。本文展示了一个纯前端的极简RAG演示应用，模拟了文档切片、向量检索和增强生成的全过程，包含本地知识库管理、模拟检索、流程可视化和现代化UI等功能。该应用无需后端服务器，直观展示了RAG如何通过检索外部知识增强大模型回答的准确性。
2026-08-01 17:18:19
156
原创 AI Agent 前端自学路线（二)
去除了复杂的类封装和冗余的状态管理，核心逻辑浓缩为 “输入 -> 模拟LLM决策 -> 执行工具 -> 渲染结果” 的线性流程，更适合前端快速理解 Agent 的核心闭环。
2026-08-01 16:52:54
214
原创 AI Agent 前端自学路线（一)
在LLM应用中，流式输出技术（SSE/WebSocket）对提升用户体验至关重要。SSE基于HTTP单向通信，适合90%的文本生成场景，开发简单且兼容性强；WebSocket则适用于需双向交互的复杂场景（如实时语音）。关键实现要点包括：禁用代理缓冲、中断资源释放、心跳管理等。SSE推荐使用EventSource或fetch+ReadableStream方案，需注意乱码、消息格式及认证问题；WebSocket需手动处理心跳和重连。UI优化建议批量渲染、Markdown增量解析及滚动控制，异常处理需
2026-07-31 23:33:39
404
原创 vue3 通过改变组件状态，复用已有页面生成新页面，新旧页面互不影响
，通过路由参数判断自身角色（原页面 / 新页面），并分别维护独立状态。如果需要在新标签页打开新页面（而非路由跳转），修改。在路由中配置一个路径，指向复用的组件，通过。创建一个可复用的页面组件（如。）区分原页面和新页面。
2025-11-21 10:52:59
225
原创 错误 “Avoided redundant navigation to current location…” 的解决方案
vue 项目中使用 vue-router 的 编程式导航 写法进行路由切换时：如果用户在页面 多次点击按钮 时，浏览器的控制台报如下错误：vue-router 实例上的 push 方法返回的是 promise 对象，所以传入的参数期望有一个成功和失败的回调，如果省略不写则会报错。方案一：每次使用 push 方法时带上两个回调函数： 方案二：重写 Vue-router 原型对象上的 push 函数：
2024-05-09 16:10:48
2067
2
原创 sourcetree 报错 HTTP Basic: Access denied
sourcetree 报错 HTTP Basic: Access denied
2022-06-13 20:59:59
893
原创 避坑 v-charts 报错 Can‘t resolve ‘echarts/lib/......
项目用的是vuesax的框架，由于是上面给的框架，咱也不好意思吐槽就自己琢磨吧项目用到了v-charts,但是该作者更新到2021.4.6之后就停更了，跟不上echats的速度，所以echarts5版本后的一些参数是没有的，就导致了报错解决该问题可以：1.降低echarts版本，参考可用：echarts 4.0以后的版本2.npm install echarts5@npm:echarts@5.3.2......
2022-06-09 21:03:36
5265
原创 vue 移动端适配flexible.js使用方法
原理：flexible.js 适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size,从而达到每个元素宽高自动变化，适配不同屏幕操作步骤：1.安装lib-flexible.jsnpm install lib-flexible --save2.在项目入口文件main.js 中引入lib-flexibleimport 'lib-flexible/flexible'解释：lib-flexible会自动在html的head中添加一个meta name=
2022-05-09 14:48:21
5847
原创 vue报错：Invalid prop: type check failed for prop “index“. Expected String with value
<el-submenu :key="index" :index="item.menuName +''"> <template :index="item.menuName" slot="title"> <span :class="'icon iconfont ' + item.icon"></span> <span class="title"> {{ item.me...
2021-08-20 15:56:26
984
原创 矢量库图标使用
如何在项目中使用阿里巴巴矢量库图标平常我们需要写一些菜单栏标题或者功能按钮时经常需要一些生动的图标来诠释其功能方法，使用图标可轻松实现我们的需求，不用追着UI同学要图片，一下让我们前端挺直了腰板，哈哈。官方地址为：阿里巴巴矢量图库他为我们提供了丰富的图标资源库，可以i根据自己的不同需求，在这里选择合适自己的图标了下面是小编总结的一套方便快捷的使用图标代替图片的流程，欢迎大家一起学习1.首先，使用新浪微博账号或者Gitzhanghao 登录官网2.在搜索框搜索相关图标，将选中图表加入购物车
2021-08-10 18:07:34
387
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人