- 博客(137)
- 收藏
- 关注
RSS订阅原创 前端-async、await、Promise
本文介绍了JavaScript中异步编程的三个核心概念：async、Promise和await。async用于声明异步函数，自动将返回值封装为Promise对象；Promise作为异步操作的状态容器，具有pending、fulfilled和rejected三种状态；await则用于在async函数中暂停执行，等待Promise完成。通过async/await组合，可以像编写同步代码一样处理异步操作，使代码更易读和维护。文章还对比了传统Promise链式调用与async/await的写法差异，展示了后者在流程
2025-10-24 10:18:42
412
原创 前端-Vue3项目创建以及初始化
本文介绍了使用pnpm搭建Vue3项目的完整流程：1）安装pnpm并创建Vue3项目；2）配置ESLint和Prettier代码规范；3）使用husky设置Git提交前检查；4）调整项目目录结构并安装sass；5）引入Element-Plus组件库并配置按需加载；6）集成Pinia状态管理并实现持久化存储；7）封装axios请求，配置请求/响应拦截器，实现统一错误处理和Token验证。整个过程涵盖了Vue3项目开发的基础配置和常用工具整合，为前端项目开发提供了标准化的工作流。
2025-10-20 17:47:35
962
原创 前端-配置Prettier与ESLint9
本文介绍了如何配置Prettier和ESLint来统一前端代码风格。首先通过npm安装prettier、eslint-plugin-prettier和eslint-config-prettier依赖包。然后配置Prettier规则（如单引号、无分号等）和ESLint配置，集成Vue插件和Prettier插件，设置相关校验规则。最后通过npx eslint命令测试配置是否生效，若无效可尝试重启VSCode。该配置支持JavaScript和Vue文件，并设置了全局忽略目录。
2025-10-16 15:56:09
330
原创 前端-Vuex
Vuex是Vue的状态管理工具，用于管理多组件共享数据。核心概念包括State（状态数据）、Mutations（同步修改）、Actions（异步操作）、Getters（派生状态）和Modules（模块拆分）。State提供公共数据源，Mutations确保状态变更可追踪，Actions处理异步逻辑，Getters派生新状态。Modules用于组织复杂状态树，可通过命名空间隔离模块状态。Vuex通过响应式机制和辅助函数（mapState等）简化操作，实现数据集中管理，适用于用户信息、购物车等共享数据场景。
2025-10-13 11:25:58
837
原创 前端-编程式导航
本文介绍了Vue路由的跳转和传参方法。基本跳转可通过编程式导航实现，使用this.$router.push()方法，支持path路径跳转和name命名路由跳转两种方式。路由传参分为查询参数和动态路由传参两种形式，均兼容path和name跳转方式。查询参数通过query对象传递，动态路由则通过params对象或直接在路径中传递参数值。具体语法包括：path跳转传参的query和params用法，以及name跳转传参的对应语法规则。
2025-10-09 16:17:04
178
原创 前端-VueRouter
VueRouter是Vue.js官方路由插件，用于SPA应用的URL与组件映射。使用步骤包括：1）安装VueRouter；2）引入并注册；3）创建路由对象；4）注入Vue实例；5）配置路由规则。核心功能包含声明式导航、路由传参（查询参数和动态路由）、重定向、404页面处理，以及hash/history路由模式切换。最佳实践建议将路由配置抽离为独立模块，并按功能组织组件目录结构（views页面级组件、components可复用组件）。
2025-10-09 11:50:58
1141
原创 前端-路由
Vue路由是路径与组件的映射关系，通过URL路径匹配对应组件实现页面跳转。核心概念是将不同路径映射到不同Vue组件，实现单页应用(SPA)的页面切换功能。路由建立路径与组件的对应关系，当访问特定路径时自动渲染对应组件，无需重新加载页面。这种机制使前端页面切换更流畅，提升用户体验。
2025-09-26 10:48:11
210
原创 前端-单页应用程序与多页应用程序的区别
本文对比分析了单页面应用(SPA)和多页面应用(MPA)的核心特点与实践方案。SPA适合交互复杂、状态管理要求高的后台系统，通过路由懒加载、状态管理优化性能；MPA则更适合内容型网站，具备天然SEO优势。文章从路由、首屏、SEO、缓存策略等维度进行对比，并给出Vue技术栈下的具体实现建议。针对不同业务场景，提供了SPA与MPA的决策清单，同时探讨了SSR/SSG等进阶方案。最后强调应根据首屏性能、SEO需求和团队协作方式选择合适架构，必要时可采用混合模式。
2025-09-26 10:43:18
744
原创 前端-前端工程师需要掌握的技术
前端工程师技能图谱涵盖了从基础到进阶的完整技术体系。基础层包括HTML5、CSS3、JavaScript核心知识及浏览器原理；框架层需掌握Vue/React等主流技术；工程化方面要熟悉Vite、Webpack等工具；还需了解网络通信、移动端开发、UI框架、数据可视化等专项技能。进阶方向包含Node.js全栈开发和性能优化等。建议采用"Vue3+TypeScript"主流技术栈，在掌握硬技能的同时培养代码规范、团队协作等软实力。保持好奇心与持续实践是成长为优秀前端开发者的关键，前端工程师本
2025-09-24 11:58:48
556
原创 前端-插槽
本文系统介绍了Vue.js中的插槽机制，主要包含以下内容：1. 插槽的核心概念：子组件预留"洞"，父组件填充内容，实现内容分发；2. 三种常见插槽：默认插槽、具名插槽和作用域插槽（子组件向父组件传递数据）；3. 高级用法：动态插槽名、默认插槽速写、条件渲染与兜底内容；4. 在Element-UI/Element-Plus中的实际应用案例；5. 最佳实践建议和可直接复用的卡片组件示例。文章强调"编译看父，渲染看子"的心法，并提供了从基础到进阶的完整插槽使用指南。
2025-09-24 11:43:54
771
原创 MySQL-详解数据库中的触发器
数据库触发器是一种自动执行的数据库对象，在数据操作（INSERT/UPDATE/DELETE）时触发预设SQL代码。主要包括触发时机（BEFORE/AFTER）、操作类型、作用表和执行逻辑。MySQL仅支持行级触发器（每行操作触发一次）。常见应用包括日志记录、数据同步和自动校验。使用触发器时需注意避免滥用、调试困难和嵌套限制等问题。NEW和OLD分别代表操作前后的数据值。合理使用触发器可简化业务逻辑，但需谨慎维护。
2025-09-22 17:44:33
716
1
原创 前端-Vue自定义指令
Vue自定义指令摘要： Vue自定义指令用于直接操作DOM元素，适用于内置指令无法满足的场景。分为全局注册（Vue.directive）和局部注册（组件directives选项）两种方式。指令包含生命周期钩子如inserted（元素插入时调用）和update（指令值变化时调用）。通过binding.value可获取指令参数值，实现动态功能（如设置文字颜色）。示例包含自动聚焦(v-focus)和动态颜色(v-color)两种典型应用，展示了从注册到使用的完整流程。
2025-09-18 11:16:39
251
原创 前端-详解Vue异步更新
Vue异步更新机制解析：通过批量处理数据变更优化性能。当连续修改数据时，Vue不会立即更新DOM，而是将变更合并后在下个tick统一渲染，减少不必要的重渲染。其核心实现包括：1）使用队列管理更新任务；2）对相同watcher去重；3）优先采用微任务执行更新。开发者可通过nextTick读取更新后的DOM，Vue3还新增了watch的执行时机控制选项。该机制显著提升了框架在高频交互场景下的性能表现，但也需注意修改数据后立即读取DOM可能获取的是旧值的问题。
2025-09-18 10:32:05
1071
原创 前端-重渲染
前端"重渲染"指数据变化引发UI更新的过程，分为局部和全量两种。局部重渲染（如Vue响应式数据更新）只刷新变化部分，高效精准；全量重渲染（如v-if切换）会重建整个组件，性能较差。Vue通过依赖追踪实现智能更新，但需注意避免非唯一key、无效数组引用变更等性能陷阱。合理控制重渲染范围是优化前端性能的关键。
2025-09-18 10:06:15
901
原创 前端-详解ref和$refs
摘要：ref和$refs是Vue中用于获取DOM元素或组件实例的机制。ref作为模板指令标记目标元素，$refs则是组件实例上收集这些标记的集合。ref标记原生元素可获取DOM节点，标记子组件则获取组件实例。在v-for中使用同名ref会生成数组。需注意：$refs仅在mounted及之后可用，非响应式，更新需配合$nextTick。典型用法包括聚焦输入框、调用子组件方法等，但需避免依赖数组顺序。设计上应优先使用声明式（props/emit），仅在必须命令式操作时使用$refs。Vue3中推荐使用变量式模板
2025-09-15 14:37:38
890
原创 前端-.sync修饰符
摘要：.sync是Vue提供的一种语法糖，用于简化父子组件间的数据同步，本质上仍是单向数据流+事件回调。它通过:prop.sync="val"自动生成@update:prop事件监听，子组件需用$emit('update:prop', newVal)触发更新。适用于弹窗、分页等多prop同步场景，相比v-model更灵活。使用时需注意事件名规范、避免直接修改prop，推荐配合计算属性实现复杂逻辑。Vue3中v-model已支持参数化，功能与.sync趋同。
2025-09-12 11:57:50
1190
原创 前端-JavaScript 事件大全 & 速查清单
本文全面介绍了JavaScript事件处理机制，包括事件模型与术语、注册方式、传播阶段、常见事件类型等核心概念。重点讲解了事件捕获与冒泡机制、阻止默认行为方法、事件对象属性、高性能的事件委托模式，以及自定义事件的创建与触发。文章还提供了事件监听器的高级配置选项、常见事件类型速查表，并针对指针事件、表单处理等场景给出实用建议。最后涵盖了移除事件监听的注意事项、Shadow DOM事件处理以及性能优化技巧，是一份全面的事件处理参考指南。
2025-09-12 11:14:36
1070
原创 前端-插值表达式
Vue2插值表达式摘要：通过双大括号{{}}语法实现数据动态绑定，仅适用于标签内容（textContent），不支持HTML属性（需用v-bind）。支持简单表达式（运算/方法调用/三元运算），但不支持语句和流程控制。与指令（v-bind/v-if等）分工明确：插值表达式处理文本渲染，指令控制属性与逻辑结构。是Vue2中实现数据动态显示的基础特性。
2025-09-11 12:00:33
212
原创 前端-v-model原理
本文主要讲解Vue中v-model的实现原理及在父子组件通信中的应用。v-model本质上是:value和@input的语法糖，实现双向数据绑定。在父子组件中，直接使用v-model会导致子组件修改父组件数据而报错。解决方案是拆解v-model为:value绑定和@change事件，子组件通过props接收value，通过$emit('input')触发更新。最后通过简化代码展示了如何在父组件使用v-model直接绑定数据，实现父子组件数据的双向绑定。
2025-09-11 11:24:05
811
原创 前端-什么是事件对象
摘要： 事件对象（EventObject）是浏览器在用户操作（如点击、输入）时自动生成的对象，包含事件相关数据（如触发元素、鼠标位置、按键等）。在JS中，通过事件处理函数的参数（如e或event）获取；Vue中需用$event语法显式传递，尤其在需要同时传递自定义参数时（如@click="func(param, $event)"）。常用属性和方法包括e.target（触发元素）、e.preventDefault()（阻止默认行为）等。Vue模板中直接写event无效，必须通过$event
2025-09-08 12:00:28
524
原创 MySQL-安装MySQL
MySQL 8.0 Windows版官方下载页面提供安装程序下载，支持32位和64位系统。官网提供完整的安装包、开发工具及相关文档，用户可免费获取社区版。页面包含版本选择、系统要求说明及详细安装指南，适合开发者快速部署MySQL数据库环境。下载前需确认Windows系统版本兼容性。
2025-09-05 17:39:26
195
原创 前端-组件通信
组件通信是指组件间的数据传递方式。主要分为父子组件通信和非父子组件通信两种类型。父子通信通过props实现，父组件向子组件传递数据，props支持类型校验和非空校验等。值得注意的是，props遵循单向数据流原则，子组件不能直接修改父组件传来的数据。非父子组件通信则通过事件总线(eventbus)实现，需要创建专门的事件总线实例来协调不同组件间的通信。组件通信机制确保了组件的数据独立性，同时又能实现必要的数据共享。
2025-09-05 11:21:21
551
原创 前端-组件化开发
本文介绍了Vue组件的基本概念和使用方法。主要内容包括：1）组件化思想，将页面拆分为独立组件便于维护和复用；2）根组件作为应用最上层组件；3）单文件组件的结构（template、script、style）及支持less的方法；4）普通组件的注册方式（局部注册和全局注册）及使用注意事项。特别指出Vue2中组件模板必须包含单个根元素，并推荐使用多单词命名组件以避免冲突。文章还提供了VSCode快速生成组件模板和注册组件的实用技巧。
2025-09-04 11:51:44
662
原创 前端-安装VueCLI
Vue CLI是Vue官方提供的标准化开发工具，可快速搭建Vue项目基础框架（集成webpack）。安装步骤：1.全局安装yarn/npm包；2.查看版本；3.创建项目（英文名）；4.按package.json配置启动项目。项目结构建议在WebStorm/VSCode中打开，启动前需安装依赖。注意不同项目的启动指令可能不同。
2025-09-03 17:04:29
636
原创 前端-Vue的生命周期和生命周期的四个阶段
Vue生命周期分为四个阶段：创建（beforeCreate→created）、挂载（beforeMount→mounted）、更新（beforeUpdate→updated）和销毁（beforeDestroy→destroyed）。创建阶段完成数据初始化，建议在created发起异步请求；挂载阶段DOM准备就绪，适合操作DOM和初始化插件；更新阶段响应数据变化，应使用watcher精准控制；销毁阶段需清理定时器、事件监听等资源防止内存泄漏。合理利用生命周期钩子能优化性能并避免常见问题。
2025-09-03 15:06:21
1006
1
原创 前端-Vue指令
本文介绍了Vue.js中常用的指令及其功能：1. v-html：设置元素的innerHTML；2. v-if/v-show：控制元素显示隐藏，v-if会移除DOM节点，v-show切换display；3. v-else/v-else-if：配合v-if使用；4. v-on：注册事件，简写为@；5. v-bind：动态设置HTML属性，简写为:；6. v-for：循环渲染元素，需配合key使用；7. v-model：实现表单元素双向绑定；8. 指令修饰符：如.lazy、.number等简化操作。文章通过代码示
2025-09-03 11:49:41
660
原创 前端-初识Vue实例
1.作用：利用表达式进行插值，渲染到页面中，表达式是可以被求出值的代码，JS引擎会将其计算出一共结果。{{}}是插值表达式，插值表达式是一种Vue的模板语法。插值表达式中只支持表达式，而不是语句。不能子啊标签中使用插值表达式。使用的数据必须是存在的。2.语法：{{表达式}}
2025-08-29 15:33:40
341
原创 前端-什么是Vue
Vue是一款由尤雨溪开发的渐进式JavaScript框架，核心特点是数据响应式和组件化。它通过简洁的模板语法实现数据绑定，支持指令系统和扩展插件。Vue学习曲线平缓，文档完善，既适合小型项目快速开发，也能配合VueRouter等工具构建大型应用。相比React和Angular，Vue以优雅的代码结构和高效的开发体验著称，让开发者专注于业务逻辑而非DOM操作。
2025-08-29 15:14:41
537
原创 JavaSE-什么是语法糖
程序设计中的"语法糖"指对已有语法的简洁写法，虽不增加功能但提升代码可读性和编写效率。文章以Java为例展示：数组初始化从new int[]{1,2,3}简化为{1,2,3}；用foreach循环替代传统for循环；通过Lombok注解自动生成Getter/Setter。语法糖能减少代码量、降低错误率，但编译器仍会将其转换为标准语法。这种"甜味"写法让编程更高效愉快，其实质是开发者友好型的语法简写形式。
2025-08-29 14:42:46
190
原创 WebStorm-在WebStorm中使用Git管理项目
功能作用拉取远程代码Commit提交代码到本地 GitPush推送代码到远程New Branch新建分支切换版本或标签Local 分支显示本地有哪些分支Remote 分支显示远程分支。
2025-08-29 14:26:41
555
原创 Git-Git和TortoiseGit的安装以及使用
本文介绍了Git和TortoiseGit的安装与使用指南。Git安装建议勾选资源管理器集成、Bash关联等实用选项；TortoiseGit提供图形化界面，适合新手。使用Git需掌握"三板斧"操作：add、commit、push，首次使用需输入平台账号密码。两者配合可高效管理代码版本，支持分支协作和开源贡献。
2025-08-29 11:36:56
940
原创 WebStorm-如何设置前端项目快捷启动
WebStorm提供了快捷配置前端项目启动/打包命令的功能。通过在IDE中设置package.json路径和指定运行指令（如yarn start或npm run build），开发者可以一键执行项目启动或打包操作，避免重复手动输入命令行，显著提升开发效率。该功能会自动匹配项目配置，简化了日常开发流程。
2025-08-27 17:46:20
155
原创 前端-从零开始在本机部署一个前端项目
本文介绍了nvm(Node Version Manager)的安装和使用方法。在Linux/macOS上通过官方脚本安装，Windows需使用nvm-windows，安装后可通过命令管理多版本Node.js。详细说明了查看nvm安装位置的方法，以及Node.js版本安装路径。同时提供了前端项目运行指南，包括npm依赖安装、国内源切换（临时/永久）、cnpm使用和yarn安装等实用技巧，帮助开发者解决依赖安装问题。
2025-08-27 16:50:29
654
原创 前端-npm、yarn、pnpm、cnpm的安装以及区别
本文介绍了Yarn和npm的安装与配置方法。主要内容包括：1）Yarn在macOS/Linux/Windows系统的多种安装方式；2）如何将npm和Yarn切换为国内淘宝镜像源以提高下载速度；3）二者的性能比较、锁文件机制、命令差异等特性对比；4）Yarn在确定性安装和工作区管理方面的优势；5）两者的社区生态现状。文章指出，虽然Yarn在大型项目上仍具优势，但随着npm的持续改进，两者差距已逐渐缩小，新手和小项目使用npm即可满足需求。
2025-08-27 15:07:37
612
原创 前端-如何将前端页面输出为PDF并打包的压缩包中
本文介绍了一个将HTML内容导出为PDF并打包下载的实现方案。主要使用html2canvas将DOM转为Canvas，再通过jsPDF进行分页处理，最后利用JSZip和FileSaver实现文件打包下载。核心功能包括：1）通过html2canvas渲染DOM为Canvas；2）按照A4纸尺寸（210mm×297mm）计算分页位置；3）循环截取Canvas内容并分页添加到PDF；4）支持添加其他附件文件打包下载；5）提供加载状态提示。文章还提到可通过v-if控制不同场景下的内容显示，并处理了异步操作和内存释放
2025-08-26 16:32:10
219
原创 WebStorm-使用CTRL+/快捷键插入注释时，注释从开头开始而不是从光标处开始的解决办法
WebStorm注释快捷键默认在行首生成注释，影响代码可读性。可通过修改设置调整注释位置，让注释符与代码保持对齐。
2025-08-25 10:56:56
166
1
原创 Spring-解决项目依赖异常问题
【摘要】检查Maven项目配置时，首先需确认项目使用的Maven路径是否与本地配置一致。若路径不符，即使依赖库已存在于本地仓库，仍可能导致依赖问题。因此，在接手新项目时，应优先核对Maven路径设置，确保其指向正确的本地仓库位置（150字）
2025-08-14 15:37:08
442
原创 Spring-从零开始将前后端项目和MySQL数据库部署到Linux云服务器上
本文介绍了在云服务器上部署前后端项目的完整流程。首先指导购买2核2G配置的云服务器（如阿里云），并完成服务器初始化设置。接着详细说明MySQL数据库的安装、安全配置和SQL文件导入步骤。后端部署部分包含Java环境搭建、项目打包及启动方法。前端部署则涉及项目打包、Nginx安装配置以及反向代理设置。整篇文章提供了从服务器初始化到前后端项目上线的完整操作指南，适合个人开发者参考实施。文中特别提醒注意Linux系统对大小写的敏感性，并推荐使用开源OpenJDK简化部署流程。
2025-08-14 15:15:08
786
原创 Spring-IoC&DI
本文介绍了Spring框架的核心概念IoC（控制反转）容器及其实现方式DI（依赖注入）。主要内容包括：1. Spring是一个包含众多工具的IoC容器，通过控制反转思想管理对象；2. 传统开发模式的高耦合问题及IoC解决方案；3. Spring容器的对象存储方式（五大类注解和@Bean方法注解）；4. 三种依赖注入方式（属性注入、构造方法注入和Setter注入）及其优缺点；5. 解决同类型多个Bean的四种方法（名称匹配、@Primary、@Qualifier、@Resource）。文章通过汽车制造示例生动
2025-07-23 22:33:12
1065
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人