- 博客(34)
- 收藏
- 关注
RSS订阅原创 Vue.js 基础教程笔记（一）：Vue入门与环境搭建
Vue.js 入门教程笔记（一）介绍了Vue.js的基础知识和环境搭建。Vue是一个渐进式JavaScript框架，由Evan You于2014年创建，具有响应式数据绑定、组件化开发和虚拟DOM等特点。文章详细对比了Vue与React、Angular的区别，并指导如何搭建开发环境：安装Node.js、选择包管理器（npm/Yarn/pnpm）、安装Vue CLI或Vite工具。最后介绍了使用Vue CLI和Vite两种方式创建第一个Vue项目的步骤，为初学者提供了完整的入门指南。
2026-01-18 17:32:59
857
原创 【Vue错误修复】Vue模块居中问题
摘要：本文分析了Vue项目主页面在浏览器缩放时模块偏移的问题，指出主要原因是使用了不稳定的transform居中方式以及样式冲突。提出了四个修复方案：1) 改用Flexbox居中替代transform；2) 清除HTML/body默认边距；3) 移除容器宽度限制；4) 创建专用居中组件。实施后解决了居中不稳定和左侧空白问题，提升了性能和兼容性。总结出Flexbox居中、样式重置和组件化设计等最佳实践，建议项目初期统一规划样式架构以避免类似问题。
2026-01-03 19:15:54
362
原创 【Vue3】ref与reactive
这篇文章介绍了Vue3中响应式数据的使用方法，主要讲解了ref和reactive两个核心API。文章分为两部分： ref的应用： 用于创建基本类型（number/string/boolean）和对象类型的响应式数据 需要.value访问数据 包含实例演示如何用ref创建响应式对象并修改数据 reactive的使用： 专门用于创建对象/数组等复杂类型的响应式数据 通过Proxy实现深层响应式 演示了如何将普通对象转换为响应式对象 指出解构会丢失响应性的注意事项
2025-09-16 21:59:47
1098
原创 【Vue3】10-编写vue项目时，ref的应用（2）
本文介绍了在Vue3中使用ref定义对象类型响应式数据的方法。通过对比reactive，说明ref既能处理基本类型也能处理对象类型数据，其底层实际调用了reactive。文章提供了具体代码示例，展示如何将reactive代码转换为ref实现，并强调需要添加.value来访问属性值。最终效果实现了点击按钮修改年龄的功能，验证了ref处理对象类型数据的可行性。文中还提供了相关源代码下载链接和系列教程指引。
2025-09-16 14:11:16
612
原创 【Vue3】09-编写vue时，reactive的使用
本文介绍了Vue3中reactive函数的使用方法。reactive通过ES6 Proxy实现深层响应式，适用于对象和数组等复杂数据类型。文章通过具体代码示例演示了如何创建响应式对象、添加方法并实现数据修改，同时强调了reactive的使用注意事项：仅对对象类型有效，解构会失去响应性等。最终实现了一个点击按钮增加年龄的响应式功能，验证了reactive的效果。
2025-09-15 18:56:17
1260
原创 【Vue3】08-编写vue项目时，ref的使用（1）
本文介绍了Vue3中ref的使用方法，重点讲解如何将基本类型数据转换为响应式数据。文章通过具体示例演示了从普通变量到响应式变量的转换过程，包括导入ref、修改变量声明方式、正确使用.value属性等步骤。同时对比了ref和reactive的适用场景及优缺点，指出ref适合处理基本类型数据但需要通过.value访问，而reactive更适合处理对象/数组类型数据。文中还提供了完整的代码示例和效果验证过程，帮助读者理解Vue3的响应式数据实现原理。
2025-09-14 01:21:58
1042
原创 【Vue3】编写vue实现一个简单效果，并使用setup糖简化代码
本文介绍了使用Vue3实现简单效果的步骤，包括创建项目、编写组件、使用Options API和Composition API的区别。主要内容：1) 创建Vue3项目并建立备份机制；2) 实现Person组件，展示数据和方法；3) 对比Options API(分散配置)和Composition API(逻辑组合)的特点；4) 引入setup函数改进Vue3组件写法。重点分析了两种API的优缺点，说明Composition API在代码组织和维护性上的优势。
2025-09-13 11:01:34
1287
原创 【Vue3】07-利用setup编写vue（2）-setup的语法糖
本文介绍了Vue3中setup语法糖的使用方法及其优势。setup语法糖通过<script setup>标签简化了组件编写，无需手动返回数据和方法，使代码更简洁易读。文章详细讲解了从传统setup函数到语法糖的转换步骤，包括数据定义、添加name属性以及安装vite插件实现自定义组件名显示等功能。通过具体代码示例展示了语法糖如何优化代码结构、提升开发效率，同时保留了响应式和类型推断等特性。最后通过运行验证了语法糖的实际效果。
2025-09-12 19:46:13
968
原创 【Vue3】06-利用setup编写vue（1）
Vue3核心语法setup概述：setup是Vue3新增的组件选项，用于替代Vue2的beforeCreate和created钩子。它允许开发者直接在函数内声明响应式数据和方法，并通过return暴露给模板使用。相比Vue2，Vue3支持连续使用多个相同组件标签且写法更简洁。文章通过Person组件案例演示了如何将data和methods迁移到setup中，包括定义普通变量、事件函数及return暴露数据等基础用法，最终实现了一个简单的个人信息展示组件。
2025-09-12 16:17:26
964
原创 【Vue3】05-Options API和Composition API的区别
本文对比了Vue2的Options API和Vue3的Composition API。Options API通过配置对象(data/methods/computed)组织代码，但功能代码分散；Composition API则按逻辑功能组合相关代码，提升内聚性。后者优势在于：1）功能代码集中，便于维护；2）函数式组织更优雅；3）修改时无需跨配置项查找。文章还提供了Vue3项目创建和开发的相关教程链接。两种API的核心区别在于代码组织方式，Composition API显著提升了大型项目的可维护性。
2025-09-11 15:25:35
989
原创 【Vue3】04-编写vue实现一个简单效果
本文介绍了如何使用Vue3实现一个简单效果，主要包含以下内容：1. 准备工作：创建Vue3项目并建立备份文件夹；2. 实现步骤：在src/components下创建Person.vue组件，使用Vue2语法编写数据和方法；3. 在App.vue中引入并使用该组件；4. 启动项目并验证效果。文章还提供了相关篇章链接，适合Vue3初学者学习组件开发流程。
2025-09-10 09:30:00
8999
原创 【Vue3】创建并运行一个简易的Vue3项目
本文介绍了如何创建并运行一个简易的Vue3项目，主要内容包括： 环境配置：安装Node.js和Vue CLI，配置环境变量； 创建Vue工程：通过命令npm create vue@latest创建项目，选择功能模块（如TypeScript、Prettier等）； 目录分析：讲解工程目录结构，包括.vscode/extensions.json、public、src等关键文件； 运行项目：通过npm run dev启动项目，访问index.html入口文件。 适合初学者快速上手Vue3项目搭建与基础配置。
2025-09-09 18:21:03
2777
原创 【Vue3】03-编写app组件——src
本文介绍了Vue3项目中App组件的编写方法。首先解析了项目结构中的index.html和main.ts文件，重点说明了createApp创建应用并挂载到容器的过程。然后详细讲解了App.vue组件的结构，包括template、script和style三个标签的编写规范。最后通过新建工程、删除重建src目录、手动编写App组件等步骤，验证了Vue3项目的基本运行原理。文章还提供了相关篇章链接，形成一个完整的Vue3入门系列教程。
2025-09-09 18:01:58
1269
原创 【Vue3】02-Vue3工程目录分析
本文介绍了Vue3工程目录结构及关键文件作用。主要内容包括：1).vscode/extensions.json配置VS Code插件推荐；2)public目录存放静态资源；3)src目录存放主要开发文件；4)env.d.ts解决TS文件类型识别问题及常见依赖错误处理；5)index.html作为项目入口文件；6)package.json管理项目依赖；7)tsconfig相关文件配置TypeScript。文章还提供了项目运行方法(npm run dev)和常见权限问题的解决方案，帮助开发者快速理解和上手Vue
2025-09-08 22:40:31
1220
原创 【Vue3】01-创建Vue3工程
本文介绍了Vue3工程的创建流程： 环境配置 安装Node.js并验证 全局安装Vue CLI Windows系统环境变量配置 工程创建 以管理员身份运行CMD 调整工作目录 执行创建命令npm create vue@latest 按需选择功能（推荐TypeScript+Prettier） 验证与开发环境 检查生成的项目目录结构 推荐使用VS Code打开项目（官方提供插件支持） 注：初学者建议简化配置，避免过早引入路由、测试等复杂功能。
2025-09-08 17:41:01
1507
原创 华为HCIP-Datacom-Core Technology H12-831 书籍目录
8.8.13 优选Router ID（Originator_ID）最小的设备发布的路由的规则刨析。6.5.4 配置OSPF的NSSA/Totally NSSA区域示例。8.8.6 优选本地路由，手动聚合路由优于自动聚合路由的规则刨析。8.8.12 优选Cluster_List最短的路由的规则刨析。8.8.14 优选具有最小IP地址的对等体通告的路由的规则刨析。11.5.2 配置5 Hub-PE与Hub-CE之间的路由交换。8.8.11 优选到下一跳的IGP度量最小的路由的规则刨析。
2025-09-07 20:41:33
774
原创 SpringBoot-Web开发-内容协商——多端内容适配&内容协商原理&HttpMessageConverter
SpringBoot多端内容适配方案解析 本文介绍了SpringBoot实现多端内容适配的技术方案。主要内容包括： 内容协商机制： 基于请求头内容协商（默认开启） 基于请求参数内容协商（需要手动配置） 实现原理： 通过@ResponseBody注解和HttpMessageConverter实现数据格式转换 默认支持JSON格式，添加依赖后可支持XML 配置方法等。
2025-09-07 20:33:14
1059
原创 SpringBoot-Web开发-08-内容协商原理-HttpMessageConverter(上)
本文深入解析了SpringBoot中内容协商的底层原理，重点围绕HttpMessageConverter的工作机制展开。文章通过调试分析展示了@ResponseBody注解的处理流程：从DispatcherServlet的doDispatch()开始，经过HandlerAdapter适配器，最终由RequestMappingHandlerAdapter执行目标方法。内容指出自定义接口返回内容的核心在于理解HttpMessageConverter的工作原理。
2025-09-07 16:25:23
755
原创 SpringBoot-Web开发-07-内容协商——多端内容适配
本文介绍了SpringBoot如何实现多端内容适配功能，通过内容协商机制让一个接口返回不同格式的数据。主要内容包括：1）基于请求头的内容协商，客户端通过Accept请求头指定期望的数据格式（如JSON/XML）；2）基于请求参数的内容协商，通过URL参数（如?format=xml）指定返回格式。文章演示了如何通过添加XML依赖、配置参数协商功能，使同一个/person接口能够返回JSON或XML格式数据。这种方法避免了为不同格式维护多个接口，提高了系统的灵活性和可维护性。
2025-09-06 17:24:51
1077
1
原创 SpringBoot3-Web开发-06-路径匹配规则
摘要：Spring 5.3引入新的请求路径匹配策略PathPatternParser，替代原有的AntPathMatcher，在性能上有显著提升。新策略兼容Ant风格语法（如*、?、等），但限制""只能在路径末尾使用。SpringBoot默认采用PathPatternParser，可通过配置文件切换回AntPathMatcher。验证发现相关配置在WebMvcAutoConfiguration中，默认匹配策略：spring.mvc.pathmatch.matching-strategy
2025-09-05 15:01:23
513
原创 SpringBoot3-Web开发-静态资源——WebMvcAutoConfiguration原理&资源映射&资源缓存&欢迎页&Favicon&自定义
SpringBoot的静态资源处理机制主要通过WebMvcAutoConfiguration自动配置类实现。该配置类在满足特定条件（如Servlet类型Web应用、相关类存在等）时生效，会添加两个过滤器（HiddenHttpMethodFilter和FormContentFilter）并配置静态资源规则。 静态资源处理包含两种规则.
2025-09-04 10:39:55
2532
原创 SpringBoot3-Web开发(5)-静态资源——自定义配置，在配置文件中如何自定义配置静态资源规则
本文介绍了SpringBoot中自定义静态资源规则的配置方式。通过分析WebMvcAutoConfigurationAdapter绑定的WebMvcProperties和WebProperties类，可以了解如何修改静态资源相关配置：1）自定义webjars路径前缀通过spring.mvc.webjars-path-pattern配置；2）自定义静态资源访问路径前缀通过spring.mvc.static-path-pattern配置；3）自定义静态资源文件夹位置
2025-09-03 18:55:15
556
原创 SpringBoot3-日志——日志原理&日志格式&日志级别&日志分组&文件输出&文件归档&滚动切割
本文介绍了SpringBoot日志配置的基本原理和使用方法。主要内容包括：1）日志框架选择，SpringBoot默认使用SLF4j+Logback组合；2）日志格式设置，可通过配置文件修改控制台和文件输出的日志格式；3）日志级别控制，从低到高分为TRACE、DEBUG、INFO、WARN、ERROR等级别，可通过logging.level配置调整日志输出级别。文章还演示了如何在项目中配置日志、自定义日志格式，以及通过代码记录业务日志的具体实现方法。
2025-09-03 17:09:41
1150
原创 SpringBoot3-Web开发(4)-静态资源——欢迎页规则&Favicon
本文分析了SpringBoot中EnableWebMvcConfiguration组件的实现原理。该配置类继承了DelegatingWebMvcConfiguration，涉及WebMvcConfigurationSupport组件。重点解析了WelcomePageHandlerMapping的工作机制，它会在四个默认静态资源路径下查找index.html作为欢迎页。同时解释了项目中Favicon.ico图标文件的加载原理，指出这是浏览器行为而非SpringBoot特性。
2025-09-02 22:03:51
373
原创 SpringBoot3-Web开发(3)-静态资源——静态资源规则源码解析
本文解析了Spring Boot中静态资源规则的源码实现。主要包含三个规则： 访问/webjars/**时，会从classpath:/META-INF/resources/webjars/路径查找资源 访问/**时，会从四个默认路径查找资源：classpath:/META-INF/resources/、classpath:/resources/、classpath:/static/、classpath:/public/ 静态资源默认启用缓存机制，包括缓存周期、HTTP缓存控制和最后修改时间验证
2025-09-02 11:27:09
424
原创 SpringBoot3-Web开发(2)-静态资源——WebMvcAutoConfiguration原理
本文解析了Spring Boot的WebMvcAutoConfiguration自动配置原理。其生效条件包括：在指定自动配置完成后执行、必须是Servlet类型Web应用、需存在相关核心类且容器中没有WebMvcConfigurationSupport实例。该配置会注册两个Filter（支持REST表单提交和请求体处理）以及一个实现WebMvcConfigurer的内部类，后者为容器添加多种功能组件，包括参数解析器、跨域支持、静态资源处理、视图控制等核心Web功能，全面支持Spring MVC的各项特性。通
2025-09-01 09:00:00
876
原创 SpringBoot3-Web开发(1)-自动配置原理
本文介绍了SpringBoot对Web开发场景的自动配置流程。首先创建一个包含Lombok和Spring Web依赖的模块项目，删除无用文件。通过分析POM.xml文件，展示了SpringBoot如何通过spring-boot-starter-web整合Web场景，并自动导入spring-boot-autoconfigure包。重点说明了@EnableAutoConfiguration注解如何批量导入组件，以及META-INF/spring/*.imports文件中配置的Web相关组件列表。最后提到这些自动
2025-08-30 15:13:58
479
原创 SpringBoot3-日志(4)-文件输出&文件归档与滚动切割
本文介绍了SpringBoot中日志文件输出与归档切割的配置方法。通过logging.file.name属性可指定日志文件路径和名称，而logging.file.path仅指定路径时会使用默认文件名。日志归档与切割功能可通过logging.logback.rollingpolicy系列属性配置，包括设置文件名格式、单个文件大小上限(如1KB或10MB)、启动时是否清除旧日志、最大保存天数和总容量限制等参数。这些配置能有效管理日志文件，防止单个文件过大，实现日志按日期或大小自动分割存储。
2025-08-29 18:10:34
615
原创 SpringBoot3-日志(3)-日志级别与日志分组
日志级别从低到高分为ALL、TRACE、DEBUG、INFO、WARN、ERROR、FATAL、OFF，默认只打印INFO及以上级别日志。SpringBoot支持精确调整单个类或包的日志级别，通过logging.level配置项实现。开发中可利用log.info()输出格式化日志进行参数验证。对于多个包需要统一设置日志级别时，可使用日志分组功能简化配置，如logging.group自定义分组或使用预定义的web、sql分组。这种灵活的日志级别控制机制能有效辅助开发和问题排查。
2025-08-29 09:00:00
1301
原创 SpringBoot3-日志(2)-日志格式
摘要： 本文介绍了Spring Boot日志配置方法。默认日志格式包含时间、级别、进程ID、线程名、类名和消息等内容。通过修改application.properties中的logging.pattern.console/file参数可自定义日志格式，支持调整日期格式、对齐方式等。文中还演示了在业务代码中使用LoggerFactory记录日志的方法，并展示了修改后的日志输出效果。默认格式定义在Spring Boot包内的配置文件中，可根据需要选择性修改部分参数。
2025-08-27 15:59:58
451
原创 SpringBoot3-日志(1)-日志原理
摘要：本文介绍了SpringBoot日志配置原理，演示了如何创建一个带日志功能的SpringBoot项目。重点讲解了日志框架的选择（默认使用SLF4j+Logback组合），SpringBoot自动配置机制（通过spring-boot-starter-logging实现），以及日志与自动配置的区别（日志使用监听器机制）。文章还指出所有日志配置都可以通过修改以logging开头的配置文件来实现，无需使用System.out.println()进行调试。
2025-08-26 15:29:40
764
原创 SpringBoot3-学习笔记（1）-新项目开发流程
学习笔记，本文介绍了使用SpringBoot3快速搭建Web应用的步骤：1）创建Maven项目并配置SpringBoot父依赖；2）添加web场景启动器依赖；3）编写主程序类并用@SpringBootApplication注解标记；4）创建Controller处理请求，使用@RestController简化注解；5）测试运行后，通过Maven插件打包成可执行jar；6）部署时可通过外部配置文件修改端口等参数。教程涵盖了从项目创建、开发到打包部署的全流程，适合SpringBoot初学者快速入门。
2025-08-25 16:08:53
1413
原创 《算法入门经典》笔记 2.4 算法竞赛中的输入输出框架
输入一些整数，求出它们的最小值、最大值和平均值（保留3位小数）。输入保证这些 数都是不超过1000的整数。样例输入： 2 8 3 5 1 7 3 6 样例输出： 1 8 4.375。
2023-08-23 20:13:35
117
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人