从头带你撸一个 SpringBoot Starter
Posted 无仔水稻研发
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从头带你撸一个 SpringBoot Starter相关的知识，希望对你有一定的参考价值。
文件，然后根据文件中配置的启动类完成 Starter 的初始化，同 Java 的 SPI 机制类似。
文件指定了AutoConfiguration 类列表，只有在列表中的自动配置才会被检索到。Spring 会检测 classpath 下所有的文件；若要引入自定义的自动配置，需要将自定义的 AutoConfiguration 类添加到 文件中。
和 @SpringBootApplication 都有开启 AutoConfig 能力。
文件指定了AutoConfiguration类列表，只有在列表中的自动配置才会被检索到。Spring 会检测 classpath 下所有的 META-INF/spring.factories 文件；若要引入自定义的自动配置，需要将自定义的AutoConfiguration 类添加到 spring.factories 文件中。
的解析由 SpringFactoriesLoader 负责。SpringFactoriesLoader.loadFactoryNames() 扫描所有 jar 包类路径下 META-INF/spring.factories文件， 把扫描到的这些文件的内容包装成 properties 对象从 properties 中获取到 EnableAutoConfiguration.class 类（类名）对应的值，然后把他们添加在容器中 。
为 enable 时条件的布尔值为 true，如果没有设置的情况下也为 true 的时候这个类才会被加载。
类要先加载。EnableRedisSentinel 是一个注解：
，application.yml 文件中配置：rickiyang:
redis:
sentinel:
masterName: redis-sentinel-test
sentinels: 127.0.0.1:20012::,127.0.0.2:20012::,127.0.0.3:20012
maxTotal: 1000
maxIdle: 50
minIdle: 16
maxWaitMillis: 15000
启动项目就能看到我们的 Starter 被加载起来。
引用：
[1]
redis-sentinel-spring-boot-starter: https://github.com/rickiyang/redis-sentinel-spring-boot-starter
记录--手摸手带你撸一个拖拽效果
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
前言
最近看见一个拖拽效果的视频(抖音：艾恩小灰灰)，看好多人评论说跟着敲也没效果，还有就是作者也不回复大家提出的一些疑问，本着知其然必要知其所以然的心理，我把实现效果研究了一遍，并且了解了其实现原理，这里给大家复盘其原理，学到就是赚到
准备
这里我们要用到字体图标，所以我们从iconfont阿里图标库直接引入
- 找到需要的图标，添加进项目
- 找到图标所在的项目，点击查看链接
- 复制地址，或者点击地址复制跳转后地址链接
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_2579455_c6xlnvkj0j.cssspm=a313x.7781069.1998910419.53&file=font_2579455_c6xlnvkj0j.css">
创建所需要结构
把我们需要结构先写出来
draggable:让盒子可以进行拖拽
<div class="list">
<div class="list-item" draggable="true" >
<i class="iconfont icon-shuangyuzuo constellation"></i>
<span class="list-item-title">双鱼座</span>
</div>
<div class="list-item" draggable="true" >
<i class="iconfont icon-shuipingzuo constellation"></i>
<span class="list-item-title">水平座</span>
</div>
<div class="list-item" draggable="true" >
<i class="iconfont icon-mojiezuo constellation"></i>
<span class="list-item-title">摩羯座</span>
</div>
<div class="list-item" draggable="true" >
<i class="iconfont icon-chunvzuo constellation"></i>
<span class="list-item-title">处女座</span>
</div>
<div class="list-item" draggable="true" >
<i class="iconfont icon-shizizuo constellation"></i>
<span class="list-item-title">狮子座</span>
</div>
</div>
编写样式
这里直接采用flex对盒子进行排版布局
background-color: var(--color);var(--color)是或者自定义属性的颜色
body
background-color: #000;
.list
width: 300px;
height: 360px;
/* padding: 20px 0; */
margin: 100px auto 0;
display: flex;
flex-direction: column;
justify-content: space-around;
.list-item
width: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 10px;
/* margin-bottom: 20px; */
background-color: var(--color);
.constellation
line-height: 2.5em;
font-size: 20px;
color: #fff;
.list-item-img
width: 30px;
height: 30px;
.list-item-title
margin-left: 20px;
color: #fff;
// 移动动画class
.list-item.moving
background-color: transparent;
border: 2px dashed #ccc;
js编写拖拽效果
首先获取需要用到的元素
// 获取整个list
const list = document.querySelector(\'.list\')
// 获取每一个盒子
const item = document.querySelectorAll(\'.list-item\')
开始拖动的时候需要加上移动的类，并且设置移动效果
// 开始拖动
list.ondragstart = e =>
source_node = e.target
recode(item)
setTimeout(() =>
// 拖拽时样式
e.target.classList.add(\'moving\')
, 0)
// 设置拖动效果
e.dataTransfer.effectAllowed = \'move\'
拖拽中需要判断是从上往下还是从下往上，根据拖拽元素和放入元素的索引进行比对，从而对拖拽元素进行插入节点操作
注意： 在码上掘金从上往下的时候会出现bug，在浏览器不会，我个人觉得应该是是码上掘金的问题
// 拖拽放入有效目标触发
list.ondragenter = e =>
e.preventDefault()
console.log(e.target.id, list)
if (e.target === list || e.target === source_node)
return false
const childer = Array.from(list.children)
const sourceIndex = childer.indexOf(source_node)
const targetIndex = childer.indexOf(e.target)
// console.log(sourceIndex, targetIndex)
if (sourceIndex < targetIndex)
// 从下往上拖动
list.insertBefore(source_node, e.target.nextElementSibling)
else
// 从上往下拖动
list.insertBefore(source_node, e.target)
// 动画效果函数
last([e.target, source_node])
拖拽结束后把拖拽时的样式移除
// 拖放结束
list.ondragend = e =>
e.target.classList.remove(\'moving\')
解释方法
这里有好多没有用过或者比较少用的方法，这里给大家解释一下
ondragstart:当用户开始拖动一个元素或文本选择时，会触发dragstart事件ondragover:当元素或文本选择被拖到有效的拖放目标上时(每几百毫秒一次)，就会触发拖放事件ondragenter:当被拖动的元素或文本选择进入有效的拖放目标时，会触发dragenter事件ondragend: 当拖放操作结束时(通过释放鼠标按钮或点击escape键)触发dragend事件。e.dataTransfer.effectAllowed:用于设置拖放时的效果，常用参数有（move,link,copy）getBoundingClientRect:返回元素对于视口的信息requestAnimationFrame:重绘动画cancelAnimationFrame：用于取消requestAnimationFrame调用请求
所有代码
HTML
<div class="list">
<div class="list-item" draggable="true" >
<i class="iconfont icon-shuangyuzuo constellation"></i>
<span class="list-item-title">双鱼座</span>
</div>
<div class="list-item" draggable="true" >
<i class="iconfont icon-shuipingzuo constellation"></i>
<span class="list-item-title">水平座</span>
</div>
<div class="list-item" draggable="true" >
<i class="iconfont icon-mojiezuo constellation"></i>
<span class="list-item-title">摩羯座</span>
</div>
<div class="list-item" draggable="true" >
<i class="iconfont icon-chunvzuo constellation"></i>
<span class="list-item-title">处女座</span>
</div>
<div class="list-item" draggable="true" >
<i class="iconfont icon-shizizuo constellation"></i>
<span class="list-item-title">狮子座</span>
</div>
</div>
JS
// 操作dom元素
const list = document.querySelector(\'.list\')
const item = document.querySelectorAll(\'.list-item\')
// 判断当前元素
let source_node
// 开始拖动
list.ondragstart = e =>
source_node = e.target
recode(item)
setTimeout(() =>
e.target.classList.add(\'moving\')
, 0)
// 设置拖动效果
e.dataTransfer.effectAllowed = \'move\'
// 拖动在有效目标
list.ondragover = e =>
// 防止默认情况下允许删除
e.preventDefault()
// 拖拽放入有效目标触发
list.ondragenter = e =>
e.preventDefault()
console.log(e.target.id, list)
if (e.target === list || e.target === source_node)
return false
const childer = Array.from(list.children)
const sourceIndex = childer.indexOf(source_node)
const targetIndex = childer.indexOf(e.target)
console.log(sourceIndex, targetIndex)
if (sourceIndex < targetIndex)
// 从下往上拖动
// console.log(source_node,e.target.nextElementSibling)
// if()
list.insertBefore(source_node, e.target.nextElementSibling)
else
// 从上往下拖动
console.log(e.target,e.target)
if (!e.target==null||source_node==null)
return
list.insertBefore(source_node, e.target)
last([e.target, source_node])
// 拖放结束
list.ondragend = e =>
e.target.classList.remove(\'moving\')
// 重新计算位置
function recode(eleAll)
// getBoundingClientRect 返回元素对于视口信息
for (let i = 0; i < eleAll.length; i++)
const
top,
left
= eleAll[i].getBoundingClientRect()
eleAll[i]._top = top
eleAll[i]._left = left
// 添加移动动画效果
function last(eleAll)
for (let i = 0; i < eleAll.length; i++)
const dom = eleAll[i]
const
top,
left
= dom.getBoundingClientRect()
if (dom._left)
dom.style.transform = `translate3d($dom._left-leftpx,$dom._top-toppx,0px)`
// 重绘动画
let rafId = requestAnimationFrame(function ()
dom.style.transition = `transform 0.3s ease-out`
dom.style.transform = \'none\'
)
dom.addEventListener(\'transitionend\', () =>
dom.style.transition = \'none\'
// 取消requestAnimationFrame调用请求
cancelAnimationFrame(rafId)
)
CSS
body
background-color: #000;
.list
width: 300px;
height: 360px;
/* padding: 20px 0; */
margin: 100px auto 0;
display: flex;
flex-direction: column;
justify-content: space-around;
.list-item
width: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 10px;
/* margin-bottom: 20px; */
background-color: var(--color);
.constellation
line-height: 2.5em;
font-size: 20px;
color: #fff;
.list-item-img
width: 30px;
height: 30px;
.list-item-title
margin-left: 20px;
color: #fff;
.list-item.moving
background-color: transparent;
border: 2px dashed #ccc;
本文转载于:
https://juejin.cn/post/7171269067729272868
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
以上是关于从头带你撸一个 SpringBoot Starter的主要内容，如果未能解决你的问题，请参考以下文章