这是个栗子-CSDN博客

原创【Vue 功能总结】页面重置与组件重置的多种实现方式，以及它们与页面刷新的区别

本文系统梳理了Vue项目中页面与组件重置的六种实现方案，区分了“刷新”“重置”“重新渲染”等概念。推荐根据需求选择：表单重置用响应式数据更新；组件初始化用key或v-if+nextTick；路由页面重置结合RouterView与动态key；仅需最新数据则重新请求接口；仅在必要时使用window.location.reload()。强调“能重置数据，就不重建组件；能重建组件，就不刷新页面”，以提升性能与用户体验。

2026-11-02 01:44:12 34

原创【uni-app项目实战】心理健康服务平台（七）

本文系统介绍了基于uni-app的医疗类应用开发流程，涵盖药品订单与问诊订单功能实现。重点包括：创建subpkg_medicine分包，实现预支付、待支付订单及支付结果页面；通过云函数调用腾讯地图API获取物流路线并解压坐标，结合map组件展示配送轨迹；集成统一支付（uni-pay）支持多平台支付；实现一键登录与QQ登录，通过云函数获取用户手机号及OpenID，并完成绑定逻辑。项目还涉及分页加载、下拉刷新、实人认证等高级功能，最终通过HBuilderX完成H5、小程序及App端打包发布。

2026-10-22 19:49:26 79

原创【JS代码分析】漏写 await 导致异步流程静默失效的原理与排查

本文剖析了在JavaScript中遗漏await导致异步逻辑失效的典型问题，以uni-app支付场景为例，揭示不写await会使代码“跳过”网络等待，后续逻辑因依赖未返回的数据而静默失败。核心原因在于JS单线程与异步非阻塞机制：网络请求立即返回Promise，若不通过await或.then()等待，结果将无人消费。文章深入讲解事件循环、Promise状态不可逆等原理，总结出“依赖异步结果就必须用await”的判断法则，并对比async/await与.then()写法优劣，提醒开发者避免循环串行、回调中误用a

2026-10-17 00:20:37 314

原创【uni-app项目实战】心理健康服务平台（六）

本文系统阐述了极速问诊与问诊室功能的实现流程，涵盖患者选择、预付订单生成、支付渠道集成（支付宝/微信）、WebSocket实时通信及消息处理。重点实现基于Socket.IO的双向消息推送，支持文字、图片、处方等多类型消息交互，并通过分包架构优化性能。结合历史消息分页加载、订单状态动态展示与大图预览等功能，构建完整、流畅的在线问诊闭环体验。

2026-10-15 23:10:32 34

原创【Vue知识点总结】Pinia 中访问 Store 数据的正确方法：.value 到底加不加？

在Vue3+Pinia中，取store数据是否需加.value，关键在于变量是否为ref。通过reactive对象访问ref时自动解包，无需.value（如store.type）；普通解构会丢失响应性，但也不需.value；使用storeToRefs则返回ref，必须用.value。template中始终无需.value。理解“自动解包仅发生在reactive容器属性访问时”这一核心规则，即可彻底解决取值困惑。推荐优先使用不解构方式，兼顾响应性与简洁性。

2026-09-28 18:48:51 89

原创【uni-app项目实战】心理健康服务平台（五）

本文详细介绍了心理服务平台首页模块的布局设计与实现，涵盖自定义导航栏、搜索栏、快速入口与查看、广告轮播等组件的开发。通过封装custom-tabs和custom-sticky组件实现标签页切换与吸顶效果，并利用Vue响应式数据结构管理多类别知识列表，结合滚动加载与节流处理优化分页体验。同时，实现了咨询师关注、评估类型选择、科室联动及状态描述页面的数据绑定、文件上传与校验功能，最终通过Pinia持久化缓存关键参数与用户输入，确保跨页面数据共享与用户体验流畅性。

2026-09-23 10:14:20 43

原创【uni-app项目实战】心理健康服务平台（四）

本文系统阐述了前端权限验证与个人中心页面的实现逻辑。通过配置请求拦截器，结合Pinia管理token，在接口返回401时自动跳转登录页，并记录原页面路径；登录成功后根据路径类型（tabBar或普通页）使用uni.switchTab或uni.redirectTo精准跳转。在“我的”页面中，封装scroll-page组件实现安全区域适配、下拉刷新及自定义底部边框线，利用custom-section统一布局风格。通过接口调用获取用户信息并渲染，支持退出登录时清除token及重置状态，使用uni.reLaunch确

2026-09-17 14:07:43 53

原创【uni-app + Vue3 代码分析】一个可复用的「滚动页面」组件

本文提出封装通用ScrollPage组件，解决列表页重复编写滚动、刷新、分页及安全区适配等问题。通过<scriptsetup>实现逻辑聚合，利用defineProps与defineEmits完成父子通信，结合scroll-view的固定高度与env(safe-area-inset-bottom)实现跨端安全区适配。父组件仅需注入数据与事件处理，实现“内容与结构分离”，提升开发效率与代码复用性，打造标准化分页列表骨架。

2026-09-14 11:35:54 243

原创【小程序&多端开发】uniapp 微信小程序登录后回跳登录前页面

在小程序开发中，实现“登录后跳回原页面”需规避URL传参的局限。核心方案：通过响应拦截器捕获401时，用getCurrentPages()获取当前页面完整路径（含参数），结合$page.fullPath记录地址与跳转方式（switchTab/redirectTo），存入Pinia并持久化。登录成功后，动态调用uniuserStore.openType精准回跳。配合reLaunch兜底与navigateBack栈回退，确保冷启动、tabBar页等场景兼容。关键在于状态管理替代传参，保障回跳准确、稳定。

2026-09-13 15:45:29 449

原创【uni-app项目实战】心理健康服务平台（三）

本文介绍了基于HBuilderX创建Vue3项目“心语港湾”的完整流程，涵盖项目初始化、Prettier配置、tabBar与页面结构搭建、公共样式及字体图标引入。重点实现网络请求封装（luch-request）、轻提示工具（uni.showToast）、Pinia状态管理（含持久化插件）及用户登录功能，包括短信验证码、用户名密码登录与协议校验。通过组件化开发与模块化封装，提升代码复用性与可维护性，为后续功能扩展奠定基础。

2026-09-13 01:45:43 48

原创【算法篇】登录页双态标签切换场景下的 0/1 状态互换算法实践

本文以uni-app+Vue3实现登录页“密码/验证码登录”双态切换为例，对比三种技术方案：条件分支渲染（耦合度高）、布尔状态取反（语义受限）与配置数组+索引互换（推荐）。重点剖析“0与1索引互换”的数学原理——基于对称映射与模运算的闭环切换机制，并提出可扩展至多态场景的循环取模方案。强调数据驱动视图的设计思想，揭示微型算法在业务中的普遍性与工程价值，倡导从“能实现”迈向“可设计”的思维升级。

2026-09-11 00:07:59 292

原创【uni-app项目实战】心理健康服务平台（二）

本文介绍uni-app基础知识，涵盖节点查询（创建查询器、节点信息）、自定义组件（easycom规范、custom-tabs与custom-sticky封装、样式隔离）、uniForms表单验证、自定义字体图标（单色与多色）及应用/页面/组件生命周期，强调以Vue和小程序技术为基础。

2026-09-08 15:55:50 45

原创【uni-app项目实战】心理健康服务平台（一）

来使用相应的组件，值得注意的是如果 uni-ui 是以插件方式安装到项目中的，组件代码会存放在 uni_modules 目录中，并且组件不需要全局导入即可使用，这是 uni-app 开发所特有的特性。在创建的项目中可以看到 Vue 的单文件组件，即 uni-app 创建的项目本质上就是 Vue 的项目，代码逻辑的细节暂时先不去分析，先来看看 uni-app 的项目是如何启动的。为了解决平台的差异性，特殊情况下需要为不同平台编写合适的代码，且要保证这些代码只在某个的平台下运行，uni-app 提供了。

2026-09-05 19:20:04 40

原创【小程序&多端开发】UniApp 微信小程序开发中的屏幕安全区域适配指南

微信小程序全面屏适配需处理顶部状态栏与底部HomeIndicator。首选CSS环境变量env(safe-area-inset-*)，并兼容constant()；自定义导航栏用var(--status-bar-height)或getMenuButtonBoundingClientRect()动态计算。CSS无法覆盖时再通过uni.getSystemInfoSync().safeAreaInsets获取安全区。注意：constant()在前、env()在后，H5需viewport-fit=cover，并真机验

2026-09-05 17:28:30 588

原创【Vue知识点总结】前端异步渲染机制下数据未及时渲染的解决方案

数据安全访问，用?防御空值。改完数据操作 DOM，用nextTick等待。依赖数据变化做逻辑，用watch监听。除非万不得已，别用setTimeout兜底。

2026-08-26 15:14:43 70

原创【Vue3 项目实战】B2B商户供应链管理平台（四）

定义不同角色的 routes。

2026-08-24 17:05:55 47

原创【前端知识点总结】Nginx 指南：从开发到生产的完美衔接

Nginx在前端架构中扮演静态资源服务器和反向代理的双重角色。开发环境中，Vite/Webpack代理处理接口请求；生产环境中，Nginx接管静态文件分发（如dist目录）并解决跨域问题。核心配置包括：静态资源服务：通过root和index定位文件，try_files解决SPA路由刷新404问题；反向代理：proxy_pass转发接口请求（如/api），规避浏览器跨域限制。场景判断：同源部署（前后端同域名）：仅需静态文件服务；非同源部署：必须配置代理跨域。万能模板： server { l

2026-08-24 07:48:44 269

原创前端开发中的常用工具函数(十)：JavaScript 数组遍历

i：循环控制变量（索引）。arr.length：数组的长度，作为循环的边界条件。：数组中当前正在处理的元素。index（可选）：当前元素在数组中的索引。array（可选）：正在遍历的数组本身（极少用到）。thisArg（可选）：执行回调时用作this的值。variable：每次迭代时，接收来自iterable的值。iterable：被遍历的可迭代对象。：当前处理的元素。index（可选）：当前元素的索引。array（可选）：原数组。thisArg（可选）：执行回调时用作this的值。

2026-08-23 19:20:48 281

原创【Vue 功能总结】基于 router.addRoute() 实现路由守卫与动态菜单渲染

路由守卫实现动态菜单渲染，是指在用户访问页面时，通过 Vue Router 提供的全局前置守卫（）拦截路由跳转。在拦截期间，向后端请求该用户拥有的权限数据，利用这些数据过滤出该用户能访问的路由配置，然后动态地将这些路由注册到应用中，最后再根据这些注册的路由数据渲染左侧菜单栏。

2026-08-23 18:05:51 63

原创【Vue知识点总结】路由守卫与 Axios 拦截器的相似之处

路由守卫和拦截器都是用于统一拦截和处理公共逻辑的钩子机制，但作用场景不同。路由守卫（VueRouter）用于拦截前端路由跳转，实现页面级权限控制（如鉴权、进度条）；拦截器（如Axios）则用于拦截HTTP请求/响应，处理统一加Token、错误处理等。两者核心区别在于拦截对象（导航 vs 网络请求），路由守卫可直接阻止导航，而拦截器无法阻止请求发送但能改写配置。实际开发中常组合使用：路由守卫控制页面访问权限，拦截器管理请求/响应逻辑。

2026-08-20 23:57:23 49

原创【Vue3 知识点总结】导航(路由)守卫

本文系统介绍了Vue Router的导航守卫机制。导航守卫是Vue项目中路由管理的核心功能，用于在路由跳转过程中进行拦截和处理，主要解决登录鉴权、权限控制、数据预取、页面行为管理等问题。文章详细讲解了三种导航守卫：全局守卫（beforeEach、beforeResolve、afterEach）、路由独享守卫（beforeEnter）和组件内守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave），分别阐述了它们的作用时机、适用场景和代码示例。最后强调了使

2026-08-20 22:13:09 399

原创【Vue代码分析】在 Pinia 中获取 Store 数据时，为什么在组件外调用 Store 会报错？

在 Vue 3 项目开发中，我们经常需要在全局路由守卫（如）中获取用户信息（如 Token）来判断权限。很多开发者在这里会遭遇一个令人费解的错误：明明已经安装了 Pinia，甚至也在main.ts中引入了，为什么还是提示 “getActivePinia() was called but there was no active Pinia”？

2026-08-20 21:33:47 639

原创【Vue 功能总结】在 Vue 项目中实现加载进度条

摘要：本文介绍了在Vue项目中通过NProgress插件实现进度条的两种方案。基础方案结合VueRouter，在路由跳转时通过全局守卫控制进度条显示；进阶方案整合Axios拦截器，采用计数器机制确保所有请求完成后才隐藏进度条。文章包含具体配置步骤、自定义样式方法，并建议通过路由元信息控制触发条件，强调进度条对提升用户体验的重要性。两种方案均保持轻量级，支持主题色定制，能有效消除用户等待时的焦虑感。

2026-08-20 18:15:17 77

原创【JS代码分析】前端鉴权基础：Token 的本地存储与状态重置实践

综上所述，删除就是删除，切勿用空值污染存储。// 1. 彻底物理清除本地 Token// 2. 重置全局状态（如 Pinia / Redux 中的用户信息）// 3. 跳转到登录页是真正的状态重置，而只是状态覆盖。封装本地存储方法时，setgetremove三个方法缺一不可，不要为了少写几行代码而埋下隐患。始终使用removeItem来清理本地凭证，保持本地存储的整洁与业务逻辑的严谨。

2026-08-19 18:00:42 495

原创【Vue 功能总结】全屏模式切换

在 Vue 项目中实现全屏切换，核心在于掌握原生 Fullscreen API 并结合 Vue 的响应式系统。基础操作和控制进出。状态同步：必须监听事件，处理用户按Esc键退出的场景，保证 UI 图标同步。工程化实践：利用 Vue 3 组合式函数抽离，实现整页全屏与局部元素全屏的复用。样式兜底：别忘了用伪类处理元素全屏后的尺寸和背景样式。

2026-08-18 20:20:41 56

原创【Vue 功能总结】页面刷新

在 Vue 项目中，不要一提刷新就只想到。只需要更新数据？用类别三（数据级刷新），调函数重新请求数据。需要把整个页面的状态（表单、分页）全部重置回初始状态？用类别二（组件级刷新，用v-if或key。遇到严重错误或需要重新加载整个 Web App 的静态资源？迫不得已才用类别一（原生刷新）。

2026-08-18 18:29:02 189

原创【Vue3 知识点总结】useRoute 常用属性与应用场景

掌握useRoute的核心在于理解它是一个描述“当前位置”的快照。属性含义典型应用场景path纯路径路由守卫判断、菜单高亮params动态参数获取详情 IDquery查询参数分页、搜索条件hash锚点页面内定位fullPath完整 URL复制链接、埋点name路由名称命名视图判断meta元信息权限控制、页面标题matched匹配记录数组动态面包屑导航。

2026-08-16 20:01:39 54

原创【Vue知识点总结】Vue 跨组件通信：provide/inject 和 Pinia 的选择

特性Pinia作用域局部（祖先组件到其所有后代）全局（整个 App 及 JS 环境）适用场景组件库、局部深层嵌套组件通信全局状态管理、复杂业务逻辑调试工具较难追踪数据流向完美集成 Vue Devtools学习成本极低（原生 API）较低，但需理解 Store 概念数据流向祖先向下单向流动（推荐配合方法修改）任意组件均可直接读写 Store类型安全需借助 InjectionKey 手动声明开箱即用的完美 TS 推导。

2026-08-15 22:00:35 86

原创【前端知识点总结】彻底搞懂相对路径 ../../ 怎么写

简单来说，相对路径就是“相对于当前文件位置去寻找目标文件的路径”。绝对路径就像是在说：“中国北京市朝阳区XX街XX号”。不管你在哪，这个地址都能找到。相对路径就像是在说：“往回走两个路口，再右转进那个胡同”。如果你站在不同的地方，同样的指令（路径）指向的地方是完全不同的。./：代表当前目录（也就是当前文件所在的文件夹）。../：代表上一级目录（回到上一层文件夹）。所以，../../往上回退两层文件夹。./是当前目录，../是上一级目录。../../就是往回退两层。相对路径适合引用附近的文件。

2026-08-14 23:24:20 148

原创【Vue3 功能总结】Vue3 + TS + Element Plus 实现动态路由与菜单生成

无论路由是静态写死的还是从后端获取的，我们都需要一个规范的数据结构。在 Vue Router 中，meta字段是存放路由元信息（如标题、图标、是否隐藏）的关键场所。// 示例路由配置meta: {title: '系统管理', // 菜单显示的文字hidden: false, // 控制菜单是否显示icon: 'Lock' // 菜单对应的图标组件名},meta: { title: '员工管理', hidden: false, icon: 'User' },},// ...更多子路由],

2026-08-14 19:59:07 287

原创【Vue知识点总结】Vue 动态组件＜component :is=““＞的妙用

是 Vue 赋予我们的一把利器。它完美诠释了 Vue “数据驱动视图”的核心理念。下一次，当你准备敲下v-if来进行组件级的大切换时，不妨停下来，想想是不是用动态组件会让代码显得更优雅、更专业。记住它的口诀：动态占坑，数据说话；keep-alive保状态，shallowRef护性能。

2026-08-13 18:54:26 81

原创 JavaScript数据结构与算法（二）

任务队列就像“等待区”，把异步操作的回调存起来，等同步代码执行完（栈空），事件循环再按顺序从队列里取任务执行，这样JS就能“同时”处理异步和同步任务，不会因为等待异步操作而卡住。简单来说，

2026-08-07 14:08:36 315

原创【Vue3 项目实战】B2B商户供应链管理平台（三）

我们目前在组件内部已经可以使用scss样式,因为在配置styleLint工具的时候，项目当中已经安装过sass sass-loader，因此我们再组件内可以使用scss语法！在src/styles目录下创建一个index.scss文件，当然项目中需要用到清除默认样式，因此在index.scss引入reset.scss。开发环境（development）顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。在开发项目的时候,接口可能很多需要统一管理。

2026-08-04 22:09:40 88

原创【Vue知识点总结】全局组件注册

我是一个局部组件</div>// Parent.vue 父组件<template><div>-- 必须在 components 中声明后才能使用 -->// 关键步骤：显式注册ChildComp},

2026-08-03 16:21:43 127

原创【Vue3 知识点总结】告别手写 Import：Vue 3 自动导入指南 (unplugin-auto-import + unplugin-vue-components)

如果你想自动导入自己封装的 Hook（如里的useHttp），可以在AutoImport// 自定义导入映射dirs: ['src/composables', // 扫描该目录下的导出],})通过引入和代码更简洁：删掉了 90% 的样板import语句。开发效率更高：随用随写，无需切换到文件头部写引入。性能更优：配合 UI 库 Resolver 实现真正的组件按需加载，减小打包体积。体验无缝：配合 TypeScript 和 Volar，依然拥有完整的类型提示。一句话建议。

2026-08-03 16:20:26 175

原创【Vue3 知识点总结】告别 “…/…/” 相对路径，手把手教你配置路径别名 @

在使用 Vue 2 时，我们习惯了使用这是因为在现代化的构建工具链中，别名不再是“默认自带”的功能，而是需要我们显式地告诉构建工具和类型检查器如何识别它。今天这篇文章，就带你彻底搞懂如何在 Vue 3 + TS 项目中配置别名。

2026-08-02 00:45:30 63

原创 JavaScript数据结构与算法（一）

算法（Algorithm）是指解题方案的准确而完整的描述，是一系列解决问题的清晰指令，算法代表着用系统的方法描述解决问题的策略机制。不同的算法可能用不同的时间，空间或效率来完成同样的任务。“数据结构是数据对象，以及存在于该对象的实例和组成实例的数据元素之间的各种联系。这些联系可以通过定义相关的函数来给出。类似，只不过可以对数组中的每一项进行操作，返回一个新的数组。把原始数组中满足条件的筛选出来，组成一个新的数组返回。是截取数组中的某些内容，按照数组的索引来截取。的时候传递的那个函数，会根据数组的长度执行。

2026-08-01 14:18:50 313

空空如也

空空如也