12 2023 档案
摘要:SpringBoot内置Tomcat启动原理 当依赖Spring-boot-starter-web依赖时会在SpringBoot中添加:ServletWebServerFactoryAutoConfiguration servlet容器自动配置类 该自动配置类通过@Import导入了可用(通过@Co
阅读全文
摘要:运行main方法:初始化SpringApplication,从spring.factories读取listener ApplicationContextLnitializer. 运行run方法 读取环境变量 配置信息等 创建SpringApplication上下文:ServletWebServerA
阅读全文
摘要:为什么SpringBoot的jar可以直接运行? SpringBoot 提供了一个插件spring-boot-maven-plugin 用于把程序打包成一个可执行的jar包 <build> <plugins> <plugin> <groupId>org.springframework.boot</g
阅读全文
摘要:通过@SpringBootConfiguration 引入了@EnableAutoConfiguration(负责启动自动配置功能) @EnableAutoConfiguration 引入了@Import 注解 Spring容器启动时:加载Ioc容器时会解析@Import注解 @Import导入了一
阅读全文
摘要:效果实现: 功能拆解: 左侧滑块跟随鼠标移动 右则大图放大效果实现 鼠标移入控制滑块和大图显示隐藏 滑块跟随鼠标移动 思路:获取到当前的鼠标在盒子内的相对位置(useMouseInElement),控制滑块跟随鼠标移动(left/top) 获取鼠标相对位置 控制滑块跟随移动 有效移动范围内的计算逻辑
阅读全文
摘要:场景和指令用法 场景:某些网站首页通常会很长,用户不一定能访问到页面靠下面的图片,这类图片通过懒加载优化手段可以做到,只有进入视口区域才发送图片请求 指令用法: <img v-img-lazy="item.picture"/> 在图片img身上绑定指令,该图片只有正式进入到视口区域时才会发送图片网络
阅读全文
摘要:要求 浏览器在上下滚动的过程中,如果距离顶部的滚动距离大于78px,吸顶导航显示,小于78px隐藏 步骤: 准备吸顶导航组件 <script setup></script> <template> <div class="app-header-sticky show"> <div class="con
阅读全文
摘要:scss 变量替换方案 步骤: 安装scss pnpm add sass -D 准备定制样式文件 styles/element/index.scss /* 只需要重写你需要的即可 */ @forward 'element-plus/theme-chalk/src/common/var.scss' w
阅读全文
摘要:安装环境 官网:https://vueup.github.io/vue-quill/guide/modules.html npm安装:npm install @vueup/vue-quill@latest --save pnpm安装:pnpm add @vueup/vue-quill@latest
阅读全文
摘要:官网:https://element-plus.org/zh-CN/component/upload.html 简单使用: 场景:与表单项一起提交,但是需要回显功能,可以用过本地url预览方式实现 <!-- 此处需要关闭 element-plus的自动上传,不需要配置 action等参数 只需要做前
阅读全文
摘要:官网 https://element-plus.org/zh-CN/component/form.html#自定义校验规则 需求 在日常开发中,我们需要对表单的内容进行校验,确保用户输入的符合我们正常的业务,并赋予正确的提示,以登录注册举例: 功能需求说明: 注册功能(校验+注册) 当用户输入用户名
阅读全文
摘要:pnpm安装 一些优势:比同类工具快 2倍 左右、节省磁盘空间... https://www.pnpm.cn/ 安装方式:npm install -g pnpm 创建项目:pnpm create vue ESLint & prettier 配置代码风格 环境同步: 安装了插件 ESlint,开启保存
阅读全文
摘要:什么是Pinia 官方文档:https://pinia.vuejs.org/zh/introduction.html Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话,你可能会认为可以通过一行简单的 export const state = re
阅读全文