- 博客(176)
- 收藏
- 关注
RSS订阅原创 【Vue3项目】电商前台项目（六）
如何判断当前用户已经选择了所有有效的规格？已选择项数组['蓝色'，'20cm'，undefined]中找不到undefined，那么用户已经选择了所有的有效规格，此时可以产出数据。如何获取当前的SKU信息对象？把已选择项数组拼接为路径字典的key，去路径字典pathMap中找即可。
2026-03-30 00:03:36
389
原创 【Vue 功能总结】点击规格动态更新禁用状态——底层逻辑“有效路径字典”解析
有效路径字典”并不是 Vue 的某个 API，而是一种前端数据处理与存储的设计思想。它将后端返回的复杂的多维对象数组，扁平化、降维成一个一维的映射表，里面只记录仓库中真实存在（有货）的规格组合路径。// 模拟后端返回的数据{ id: 1, specs: { 颜色: '红', 尺码: 'S' }, stock: 100 },{ id: 2, specs: { 颜色: '红', 尺码: 'M' }, stock: 50 },
2026-03-29 23:09:24
26
原创 【Vue 功能总结】动态面包屑导航
在Web前端领域，它是一种辅助性的用户界面导航方式。通常表现为一串由分隔符（如或首页 > 系统管理 > 用户管理 > 编辑用户一个优秀的面包屑导航组件，不仅能提升用户体验，更是前端架构规范性的体现。通过本文的路由元信息+ 监听路由方案，我们可以实现完全自动化、低维护成本的导航系统。路由定义规范化 + 组件监听自动化 = 优雅的企业级交互。
2026-03-28 17:35:49
15
原创 【Vue知识点总结】如何在二级路由下默认渲染三级路由
在 Vue 中实现二级路由默认渲染三级路由，核心思路在于“指定默认出口”。方案适用场景URL 变化推荐指数redirect 重定向绝大多数中后台系统、常规页面跳转变为目标路由 URL⭐⭐⭐⭐⭐空路径子路由需要隐藏具体路径、简单的嵌套展示保持父路由 URL⭐⭐⭐建议在常规开发中优先使用 redirect。
2026-03-28 17:01:43
118
原创 【Vue 功能总结】地址激活交互实现
地址切换是前端开发中常见的交互模式，本质上是的一种具体应用场景。它通过点击不同的地址项来切换激活状态，同时更新界面显示和URL地址，实现状态持久化。
2026-03-26 14:42:35
88
原创 前端开发中的常用工具函数(六)
后台管理系统中，用户勾选了多条数据进行“批量删除”，要求所有选中的数据状态必须是“待审核”才能删除。这符合数学逻辑（空真，Vacuous truth）：因为数组中没有元素，所以“没有元素不满足条件”。不会改变原数组，但在回调函数中修改数组元素是可能的，但不推荐，这会降低代码可读性并引发副作用。它是数组校验的“守门员”，只要有一个“违规”，大门就会关闭。在前端业务逻辑中，我们经常需要判断一个数组是否“全部满足”某个条件。分步表单中，只有当前步骤的所有必填项都已填写且合法，才能点击“下一步”。
2026-03-23 22:05:36
612
原创 前端开发中的常用工具函数(五)
如果你累积器是对象或数组，请注意不要直接修改累积器的引用（除非你很清楚自己在做什么），这可能会带来副作用。函数，每一次运行会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。在后端接口对接中，有时需要将数组转换为以 ID 为 Key 的对象，以便快速查找。：将数组“压缩”成一个值（这个值可以是数字、对象、数组，甚至是另一个函数）。的强大在于它的返回值可以是任意类型，这使得它能处理非常复杂的业务逻辑。将数组中的元素按类别分组，例如按角色分组用户。虽然强大，但也是最容易出错的数组方法之一。
2026-03-18 22:29:01
356
原创 前端开发中的常用工具函数(四)
在企业开发中（特别是 Vue 响应式系统），这可能导致难以排查的数据污染问题。在前端路由守卫中，判断用户是否有权限访问某个页面，可能需要在权限列表中查找是否存在匹配项。点击“编辑”按钮，需要在一个列表中找到当前行的详细数据，并填充到弹窗表单中。这意味着如果你修改了返回的对象，原数组中的数据也会被修改。这是前端开发中最常见的场景，例如根据 ID 查找用户信息。好用，但在实际开发中如果不注意细节，可能会引发 Bug。如果你需要的是元素的位置（索引）而不是元素本身，请使用。查找数组中第一个大于 10 的元素。
2026-03-18 17:46:32
399
原创 【Vue3项目】电商前台项目（四）
目录二、项目实现2.4 二级分类 + 详情2.4.1 二级分类1. 整体认识和路由配置2. 面包屑导航实现3. 商品列表实现4. 定制路由scrollBehavior2.4.2 详情页1. 整体认识和路由配置2. 基础数据渲染3. 热榜区域实现4. 图片预览组件封装5. 认识SKU组件6. 通用组件统一注册全局2.5 登录2.5.1 登录1. 整体认识和路由配置2. 表单校验实现3. Pinia管理用户数据4. Pinia用户数据持久化5. 登录和非登录状态的模版适配6. 请求拦截器携带Token7. 退出
2026-03-17 20:23:36
544
原创 【Vue知识点总结】请求拦截器携带Token
简单来说，请求拦截器就像是发送请求前的一座“安检站”或“预处理车间”。当你在代码中调用或时，请求并不会立刻通过网络飞向服务器，而是会先经过拦截器。在这里，你可以对即将发出的请求进行“为所欲为”的修改。为什么需要它？核心目的：统一处理，避免重复。// 😫 痛苦的写法headers: {'Authorization': 'Bearer ' + localStorage.getItem('token') // 每次都要写})
2026-03-17 17:56:58
104
原创 【Vue 功能总结】电商购物车图片预览“放大镜”组件实现
步骤动作目的关键点Step 1监听mousemove获取鼠标实时位置使用确保位置计算不受页面滚动影响。Step 2计算遮罩坐标确定放大区域需减去遮罩宽高的一半，使鼠标居中。Step 3边界判断防止遮罩溢出Math.max和Math.min的灵活运用，遮罩必须限制在0到容器宽-遮罩宽之间。Step 4映射大图位置实现放大效果移动方向取反（负值），并根据图片比例计算移动距离。通过本文，我们不仅仅实现了一个 Vue 版本的图片放大镜，更重要的是掌握了其背后的坐标映射原理。
2026-03-14 21:55:54
114
原创 【JS知识点总结】对象属性的“动态访问”
静态访问（点表示法）obj.key这里的key必须是代码中写死的标识符，不能是变量。动态访问（方括号表示法）obj[key]这里的key可以是一个变量表达式或计算结果。const obj = { name: '前端小白', age: 18 };// 静态访问// '前端小白'// 动态访问// '前端小白' -> 这里的 key 是变量使用点表示法时，如果属性名拼错，IDE 通常会报错或提示；但在方括号中使用变量时，如果变量名拼错或变量为undefined。
2026-03-13 20:26:29
24
原创 【Vue知识点总结】Vue路由缓存问题
在实际企业开发中，通常结合两种方法需要保留状态的页面（如列表页、表单页）：使用keep-alive缓存组件，避免重复加载（如若需缓存特定组件（如列表页），可使用keep-alive结合include属性。未缓存的组件（如详情页）会正常销毁重建，避免数据陈旧。需要更新的页面（如详情页、动态路由页面）：简单场景：给加key（强制重建）；复杂场景：使用钩子（精准控制）。示例（结合keep-alive和key<template><div>-- 缓存列表页（保留滚动位置、筛选条件） -->
2026-03-11 18:27:08
181
原创 【JS开发规范】默认导出与命名导出
理由：工具库通常包含多个函数或常量，命名导出能强制开发者使用标准名称，便于 IDE 自动补全和跳转定义。// ✅ 推荐：utils/math.js// 使用时命名导出：适合函数库、常量、工具类，强调严谨性、多导出和 IDE 支持。默认导出：适合组件、单例、主入口，强调简洁性和模块的单一职责。一句话建议如果你的文件只做一件事（如一个组件），使用默认导出；如果你的文件包含多个相关的辅助功能（如工具集），使用命名导出。清晰的模块导出规范，是构建可扩展前端架构的基石。
2026-03-07 18:03:07
371
原创 【Vue3项目】电商前台项目（二）
Pinia 是 Vue 的专属状态管理库，可以实现跨组件或页面共享状态，是 vuex 状态管理工具的替代品，和 Vuex相比，具备以下优势：提供更加简单的API （去掉了 mutation ）提供符合组合式API风格的API （和 Vue3 新语法统一）去掉了modules的概念，每一个store都是一个独立的模块搭配 TypeScript 一起使用提供可靠的类型推断。
2026-03-05 18:07:30
258
原创 【Vue2项目】人力资源后台管理项目（七）
安装echarts包放置两个图表的div，并给定高宽，代码位置(在mounted中初始化图表-代码位置(这里为什么要用watch，因为获取数据在created，初始化图表在mounted，执行mouted时，数据并不能保证能够获取到，所以采用获取watch监听数据变化，只要数据变化，就设置图表的options。
2026-02-26 18:11:55
493
原创 【Vue代码分析】异步数据加载与生命周期
Vue.js 响应式系统Vue 的data属性是响应式的，当数据发生变化时，视图会自动更新。但需要注意的是，在初始状态下访问未定义的嵌套属性（如）会导致运行时错误。
2026-02-25 16:59:14
654
原创 前端开发中的常用工具函数(三)
如果你的项目涉及大量 Emoji 或特殊 Unicode 字符处理，建议使用 ES6 的 str.codePointAt() 配合 String.fromCodePoint()，或者使用扩展运算符 [...str] 将字符串转为数组后再通过下标访问。这意味着对于大于 0xFFFF 的 Unicode 字符（如某些 Emoji 表情 😊 或生僻字），charAt() 可能会返回“代理对”中的一半，导致显示乱码或意外字符。：如果传入的参数不是数字，JavaScript 会尝试转换为整数。
2026-02-24 23:13:06
835
原创 【Vue知识点总结】Vue封装自定义指令
Vue 提供了一系列内置指令，如 v-model、v-show、v-if 等。自定义指令就是以 v- 为前缀，开发者自己定义的指令，用于对普通 DOM 元素进行底层操作。它本质上是一个包含多个钩子函数的对象，这些钩子函数会在元素生命周期的不同阶段被调用。复用 DOM 操作逻辑：将相同的 DOM 操作抽离出来，避免重复代码。提升可维护性：将与数据无关的 DOM 操作集中管理，使组件逻辑更清晰。扩展 Vue 能力：在 Vue 的响应式系统之外，直接与 DOM 交互。指令可以全局注册或局部注册。
2026-02-24 16:59:08
74
原创 【Vue知识点总结】Vue Router动态路由添加与转发机制
动态路由用于按权限加载页面，核心 API 是。转发机制用于解决刷新页面时，新路由未被及时匹配的问题，核心代码是。原理：通过传入参数打断旧导航，强制 Router 重新初始化导航流程并读取最新的路由表。
2026-02-23 16:58:08
66
原创 【Vue2项目】人力资源后台管理项目（五）
default-checked-keys的属性是设置当前选中的节点，但是必须配合node-key属性，因为permIds变量中存储的都是id，必须el-tree组件知道key是哪个字段，所以设置node-key="id"注意，这里我们特地调整了弹层的顺序，因为获取已经拥有的角色是一个异步的过程，如果弹层显示在前，会出现卡顿的效果，表现出缓慢的效果，所以等到获取所有数据之后再弹层。注意：二级权限和一级权限的区别为type，当type为1时，为一级权限，当type为2时，为二级权限。
2026-02-22 20:04:22
445
原创 AI辅助编程工具(十) - MarsCode
作为字节跳动推出的 AI 编程助手，MarsCode 背靠字节强大的“豆包大模型”和“云开发”技术体系。它不仅是一个代码补全插件，更是一个集成了云端开发环境的全能工具。对于开发者而言，它可能是你快速搭建 Demo、修复复杂 Bug 的最佳搭档。
2026-02-15 23:04:22
703
1
原创 AI辅助编程工具(九) - Cursor配合通义干问
通义千问是阿里云推出的大语言模型，具有强大的自然语言理解和代码生成能力，特别适合处理复杂的编程任务描述。
2026-02-15 22:11:51
543
原创 AI辅助编程工具(八) - Baidu Comate
在前几篇文章中，我们体验了 Copilot 的标杆地位、通义灵码的阿里生态、Fitten Code 的极速以及 Cursor 的 IDE 变革。但在国内 AI 编程助手的赛道上，还有一位重量级选手不容忽视——。作为百度“文心一言”在编程领域的垂直落地产品，Comate 不仅仅是一个代码补全工具，更像是一个懂业务、懂文档、懂中文的“全能技术顾问”。对于开发者而言，如果你需要一个在中文语境下表现完美、且能无缝接入企业内部知识的助手，Baidu Comate 绝对值得一试。
2026-02-15 20:18:58
1062
原创 AI辅助编程工具(七) - Cursor
如果说 Copilot 是给自行车装上了马达，那么Cursor 就是造了一辆特斯拉。它让我们看到了 AI 辅助编程的未来：不再是简单的补全，而是全代码库的理解与多文件的协同操作。对于前端开发者来说，Cursor 极大地降低了维护复杂项目的认知负担。虽然它目前对个人免费版有一定的次数限制，但其带来的效率提升完全值得你每天去“薅羊毛”，或者为此付费。如果你厌倦了在 VS Code 里频繁切换窗口，不妨下载 Cursor 试试。也许，这就是你开发工具链的“最后一块拼图”。
2026-02-15 19:51:59
1165
原创 AI辅助编程工具(六) - CodeGeeX
在前几篇文章中，我们体验了以及。但有些开发者，特别是对极其敏感、或者对有情怀的技术极客，总会问：“有没有一款完全自主可控、且表现优异的 AI 编程助手？答案就是。这款由清华大学知识工程实验室（KEG）开发的 AI 编程助手，不仅完全免费，更以其，收获了大量好评。
2026-02-15 17:37:05
794
原创 AI辅助编程工具(五) - Fitten Code
在 AI 辅助编程的赛道上，虽然和占据了大量篇幅，但开发者们始终在寻找一款更“轻”、更“快”、且对个人开发者友好的工具。最近，一款名为的 AI 编程助手在技术社区悄然走红。它号称拥有比 Copilot 更快的响应速度，并且目前对个人用户完全免费。
2026-02-14 11:08:17
724
原创 AI辅助编程工具(四) - 通义灵码
在 AI 辅助编程的浪潮中，GitHub Copilot 无疑是标杆，但对于国内开发者而言，网络环境的限制、订阅费用的门槛以及对中文语境的原生支持，往往成为使用路上的绊脚石。如果你正在寻找一款免费、强大且懂中的代码助手，那么阿里云推出的绝对值得你重点关注。
2026-02-14 10:35:33
1228
原创 【Vue知识点总结】v-for 与 :key
在 Vue 开发中，v-for负责量，而:key负责质。:key是节点的“身份证”，帮助 Virtual DOM 算法识别节点。为了高效的 Diff 算法，为了避免状态复用导致的 Bug（如输入框错乱），为了在数组变动时正确维护组件状态。始终使用数据中唯一的、稳定的、基本类型的值（如id）作为 key。除非你非常清楚自己在做什么，否则永远不要在使用v-for时省略:key，并且永远不要使用index作为:key。
2026-02-08 22:26:24
118
原创 AI辅助编程工具(三) - Github Copilot
简单来说，GitHub Copilot 是由 GitHub 和 OpenAI 共同开发的人工智能编程助手。它基于 OpenAI 的 GPT-4 等大模型，并在海量的开源代码库上进行过训练。它不只是一个简单的“自动补全”工具。它会读取你的——包括你刚刚写的变量名、光标所在的文件、甚至是项目中其他相关文件的代码——然后实时预测你接下来想写什么。对于前端开发者而言，它最迷人的地方在于：它。
2026-02-03 00:13:04
1204
原创 【JS知识点总结】双重否定操作符 !!（字符串转布尔值）
!!!是由两个逻辑非操作符组成的。第一个!：将值转换为布尔值并取反。第二个!：再次将布尔值取反，从而变回原来的逻辑真/假。本质上，!!就是Boolean()函数的简写形式。
2026-02-02 18:28:08
120
原创 【Vue2项目】人力资源后台管理项目（四）
这里我们加了一个判断，就是只有当前节点有子节点时才添加children属性，否则会造成级联组件本身就已经是最末端了，但是发现它的children属性存在，就会呈现不同的表现形式。因为不论成功或者失败，再点击上传都会去选择一个新的excel，所以这里使用finally等到最后，将内容清空。点击按钮调用接口，使用file-saver将blob转化成文件下载-代码位置(拦截器判断是不是blob类型，如果是直接返回数据，不再进行解构-代码位置(在当编辑模式时，让手机号不可编辑-代码位置(
2026-02-02 17:57:35
590
原创 【JS类型转换符】字符串转布尔值的真实应用
disabledundefined:disabled因此，这个:disabled属性的作用是，确保在编辑已有员工时手机号不能被修改。
2026-02-02 17:39:04
340
原创 AI辅助编程工具(二) - 通译千问
在众多的 AI 工具中，凭借其对中文语境的深度理解、对阿里生态（如 Ant Design、钉钉小程序等）的友好支持，成为了国内开发者手中的“神兵利器”。
2026-02-01 16:25:53
941
原创 AI辅助编程工具(一) - ChatGPT
在后端还没开发完时，我们可以利用 AI 生成 Mock 数据结构。“基于上面的购物车需求，请生成一份符合 RESTful 风格的 API 接口定义列表，包含 URL、Method、Params 和 Response 的 TypeScript 类型定义。这一过程能帮你理清逻辑漏洞。如果 AI 都没法理解你的需求逻辑，那写出来的代码一定全是 Bug。
2026-02-01 14:59:39
1143
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人