记录--vue 拉伸指令

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

前言

在我们项目开发中,经常会有布局拉伸的需求,接下来 让我们一步步用 vue指令 实现这个需求

动手开发

在线体验

codesandbox.io/s/dawn-cdn-…

常规使用

解决拉伸触发时机

既然我们使用了指令的方式,也就是牺牲了组件方式的绑定事件的便捷性.

那么我们如何来解决这个触发时机的问题呢?

在参考了 Element UI 的表格拉伸功能后,笔者受到了启发

 有点抽象,这个红色区域可不是真实节点,只是笔者模拟的一个 boder-right 多说无益 直接上代码吧

const pointermove = e => {const { right } = el.getBoundingClientRect() // 获取到节点的右边界const { clientX } = e // 此时鼠标位置if (right - clientX < 8) // 表明在右边界的 8px 的过渡区 可以拉伸
}

实现一个简单的右拉伸

下面让我们来实现一个简单的右拉伸功能, 既然用指令 肯定是越简单越好

笔者决定用 vue提供的 修饰符, v-resize.right

实现 v-resize.right

1.首先我们创建两个相邻 div

<template><div class="container"><divv-resize.rightclass="left"/><div class="right" /></div>
</template>
<style lang="scss" scoped>
.container {width: 400px;height: 100px;> div {float: left;height: 100%;width: 50%;}.left {background-color: lightcoral;}.right {background-color: lightblue;}
}
</style>

2.实现 resize 触发时机

export const resize = {inserted: function(el, binding) {el.addEventListener('pointermove', (e) => {const { right } = el.getBoundingClientRect()if (right - e.clientX < 8) {// 此时表明可以拉伸,时机成熟el.style.cursor = 'col-resize'} else {el.style.cursor = ''}})}
}

3.实现右拉伸功能

el.addEventListener('pointerdown', (e) => {const rightDom = el.nextElementSibling // 获取右节点const startX = e.clientX // 获取当前点击坐标const { width } = el.getBoundingClientRect() // 获取当前节点宽度const { width: nextWidth } = rightDom.getBoundingClientRect() // 获取右节点宽度el.setPointerCapture(e.pointerId) // HTML5 的 API 自行百度~const onDocumentMouseMove = (e) => {const offsetX = e.clientX - startX // 此时的 x 坐标偏差// 更新左右节点宽度el.style.width = width + offsetX + 'px'rightDom.style.width = nextWidth - offsetX + 'px'}// 因为此时我们要在整个屏幕移动 所以我们要在 document 挂上 mousemovedocument.addEventListener('mousemove',onDocumentMouseMove)

让我们看看此时的效果

会发现有两个问题

  1. 左边宽度会>左右之和,右边宽度会 < 0
  2. 当我们鼠标弹起的时候 还能继续拉伸

让我们首先解决第一个问题

方案一:限制最小宽度
const MIN_WIDTH = 10
document.addEventListener('mousemove', (e) => {const offsetX = e.clientX - startX // 此时的 x 坐标偏差+if (width + offsetX < MIN_WIDTH || nextWidth - offsetX < MIN_WIDTH) return// 更新左右节点宽度el.style.width = width + offsetX + 'px'rightDom.style.width = nextWidth - offsetX + 'px'
})

第二个问题,其实非常简单

方案二:鼠标弹起后释放对应拉伸事件

el.addEventListener('pointerup', (e) => {el.releasePointerCapture(e.pointerId)document.removeEventListener('mousemove', onDocumentMouseMove)
})

此时最最最基础的 v-resize 左右拉伸版本 我们已经实现了,来看下效果吧

 看下此时的完整代码

export const resize = {inserted: function (el, binding) {el.addEventListener('pointermove', (e) => {const { right } = el.getBoundingClientRect()if (right - e.clientX < 8) {// 此时表明可以拉伸el.style.cursor = 'col-resize'} else {el.style.cursor = ''}})const MIN_WIDTH = 10el.addEventListener('pointerdown', (e) => {const rightDom = el.nextElementSibling // 获取右节点const startX = e.clientX // 获取当前点击坐标const { width } = el.getBoundingClientRect() // 获取当前节点宽度const { width: nextWidth } = rightDom.getBoundingClientRect() // 获取右节点宽度el.setPointerCapture(e.pointerId) // HTML5 的 API 自行百度~const onDocumentMouseMove = (e) => {const offsetX = e.clientX - startX // 此时的 x 坐标偏差if (width + offsetX < MIN_WIDTH || nextWidth - offsetX < MIN_WIDTH) {return}// 更新左右节点宽度el.style.width = width + offsetX + 'px'rightDom.style.width = nextWidth - offsetX + 'px'}// 因为此时我们要在整个屏幕移动 所以我们要在 document 挂上 mousemovedocument.addEventListener('mousemove', onDocumentMouseMove)el.addEventListener('pointerup', (e) => {el.releasePointerCapture(e.pointerId)document.removeEventListener('mousemove', onDocumentMouseMove)})})},
}

作为 一名 优秀的前端性能优化专家,红盾大大已经开始吐槽,这么多 EventListener 都不移除吗? 还有'top' 'left'这些硬编码,能维护吗?

是的,后续代码我们将会移除这些被绑定的事件,以及处理硬编码(此处非重点 不做赘叙)

实现完 右拉伸 想必你对 左,上,下拉伸 也已经有了自己的思路

开始进阶

接下来让我们看下这种场景

我们 想实现一个 两边能同时拉伸的功能, 也就是 v-resize.left.right

实现左右拉伸功能

这种场景比较复杂,就需要我们维护一个拉伸方向上的变量 position

实现 v-resize.left.right

export const resize = {inserted: function (el, binding) {let position = '',resizing = falseel.addEventListener('pointermove', (e) => {if (resizing) returnconst { left, right } = el.getBoundingClientRect()const { clientX } = eif (right - clientX < 8) {position = 'right' // 此时表明右拉伸el.style.cursor = 'col-resize'} else if (clientX - left < 8) {position = 'left' // 此时表明左拉伸el.style.cursor = 'col-resize'} else {position = ''el.style.cursor = ''}})const MIN_WIDTH = 10el.addEventListener('pointerdown', (e) => {if (position === '') returnconst sibling = position === 'right' ? el.nextElementSibling : el.previousElementSibling // 获取相邻节点const startX = e.clientX // 获取当前点击坐标const { width } = el.getBoundingClientRect() // 获取当前节点宽度const { width: siblingWidth } = sibling.getBoundingClientRect() // 获取右节点宽度el.setPointerCapture(e.pointerId) // HTML5 的 API 自行百度~const onDocumentMouseMove = (e) => {resizing = trueif (position === '') returnconst offsetX = e.clientX - startXconst _elWidth = position === 'right' ? width + offsetX : width - offsetX //判断左右拉伸 所影响的当前节点宽度const _siblingWidth = position === 'right' ? siblingWidth - offsetX : siblingWidth + offsetX //判断左右拉伸 所影响的相邻节点宽度if (_elWidth <= MIN_WIDTH || _siblingWidth <= MIN_WIDTH) return// 更新左右节点宽度el.style.width = _elWidth + 'px'sibling.style.width = _siblingWidth + 'px'}document.addEventListener('mousemove', onDocumentMouseMove)el.addEventListener('pointerup', (e) => {position = ''resizing = falseel.releasePointerCapture(e.pointerId)document.removeEventListener('mousemove', onDocumentMouseMove)})})},
}
看下此时的效果

非常丝滑, 当然 我们还需要考虑 传递 最小宽度 最大宽度 过渡区 等多种业务属性,但是这对于各位彦祖来说都是鸡毛蒜皮的小事. 自行改造就行了

完整代码

Js版本

const elEventsWeakMap = new WeakMap()
const MIN_WIDTH = 50
const MIN_HEIGHT = 50
const TRIGGER_SIZE = 8
const TOP = 'top'
const BOTTOM = 'bottom'
const LEFT = 'left'
const RIGHT = 'right'
const COL_RESIZE = 'col-resize'
const ROW_RESIZE = 'row-resize'function getElStyleAttr(element, attr) {const styles = window.getComputedStyle(element)return styles[attr]
}function getSiblingByPosition(el, position) {const siblingMap = {left: el.previousElementSibling,right: el.nextElementSibling,bottom: el.nextElementSibling,top: el.previousElementSibling}return siblingMap[position]
}function getSiblingsSize(el, attr) {const siblings = el.parentNode.childNodesreturn [...siblings].reduce((prev, next) => (next.getBoundingClientRect()[attr] + prev), 0)
}function updateSize({el,sibling,formatter = 'px',elSize,siblingSize,attr = 'width'
}) {let totalSize = elSize + siblingSizeif (formatter === 'px') {el.style[attr] = elSize + formattersibling.style[attr] = siblingSize + formatter} else if (formatter === 'flex') {totalSize = getSiblingsSize(el, attr)el.style.flex = elSize / totalSize * 10 // 修复 flex-grow <1sibling.style.flex = siblingSize / totalSize * 10}
}const initResize = ({el,positions,minWidth = MIN_WIDTH,minHeight = MIN_HEIGHT,triggerSize = TRIGGER_SIZE,formatter = 'px'
}) => {if (!el) returnconst resizeState = {}const defaultCursor = getElStyleAttr(el, 'cursor')const elStyle = el.styleconst canLeftResize = positions.includes(LEFT)const canRightResize = positions.includes(RIGHT)const canTopResize = positions.includes(TOP)const canBottomResize = positions.includes(BOTTOM)if (!canLeftResize && !canRightResize && !canTopResize && !canBottomResize) { return } // 未指定方向const pointermove = (e) => {if (resizeState.resizing) returne.preventDefault()const { left, right, top, bottom } = el.getBoundingClientRect()const { clientX, clientY } = e// 左右拉伸if (canLeftResize || canRightResize) {if (clientX - left < triggerSize) resizeState.position = LEFTelse if (right - clientX < triggerSize) resizeState.position = RIGHTelse resizeState.position = ''if (resizeState.position === '') {elStyle.cursor = defaultCursor} else {if (getSiblingByPosition(el, resizeState.position)) { elStyle.cursor = COL_RESIZE }e.stopPropagation()}} else if (canTopResize || canBottomResize) {// 上下拉伸if (clientY - top < triggerSize) resizeState.position = TOPelse if (bottom - clientY < triggerSize) resizeState.position = BOTTOMelse resizeState.position = ''if (resizeState.position === '') {elStyle.cursor = defaultCursor} else {if (getSiblingByPosition(el, resizeState.position)) { elStyle.cursor = ROW_RESIZE }e.stopPropagation()}}}const pointerleave = (e) => {e.stopPropagation()resizeState.position = ''elStyle.cursor = defaultCursorel.releasePointerCapture(e.pointerId)}const pointerdown = (e) => {const { resizing, position } = resizeStateif (resizing || !position) returnif (position) e.stopPropagation() // 如果当前节点存在拉伸方向 需要阻止冒泡(用于嵌套拉伸)el.setPointerCapture(e.pointerId)const isFlex = getElStyleAttr(el.parentNode, 'display') === 'flex'if (isFlex) formatter = 'flex'resizeState.resizing = trueresizeState.startPointerX = e.clientXresizeState.startPointerY = e.clientYconst { width, height } = el.getBoundingClientRect()const sibling = getSiblingByPosition(el, position)if (!sibling) {console.error('未找到兄弟节点', position)return}const rectSibling = sibling.getBoundingClientRect()const { startPointerX, startPointerY } = resizeStateconst onDocumentMouseMove = (e) => {if (!resizeState.resizing) returnelStyle.cursor =canLeftResize || canRightResize ? COL_RESIZE : ROW_RESIZEconst { clientX, clientY } = eif (position === LEFT || position === RIGHT) {const offsetX = clientX - startPointerXconst elSize = position === RIGHT ? width + offsetX : width - offsetXconst siblingSize =position === RIGHT? rectSibling.width - offsetX: rectSibling.width + offsetXif (elSize <= minWidth || siblingSize <= minWidth) returnupdateSize({ el, sibling, elSize, siblingSize, formatter })} else if (position === TOP || position === BOTTOM) {const offsetY = clientY - startPointerYconst elSize =position === BOTTOM ? height + offsetY : height - offsetYconst siblingSize =position === BOTTOM? rectSibling.height - offsetY: rectSibling.height + offsetYif (elSize <= minHeight || siblingSize <= minHeight) returnupdateSize({ el, sibling, elSize, siblingSize, formatter })}}const onDocumentMouseUp = (e) => {document.removeEventListener('mousemove', onDocumentMouseMove)document.removeEventListener('mouseup', onDocumentMouseUp)resizeState.resizing = falseelStyle.cursor = defaultCursor}document.addEventListener('mousemove', onDocumentMouseMove)document.addEventListener('mouseup', onDocumentMouseUp)}const bindElEvents = () => {el.addEventListener('pointermove', pointermove)el.addEventListener('pointerleave', pointerleave)el.addEventListener('pointerup', pointerleave)el.addEventListener('pointerdown', pointerdown)}const unBindElEvents = () => {el.removeEventListener('pointermove', pointermove)el.removeEventListener('pointerleave', pointerleave)el.removeEventListener('pointerup', pointerleave)el.removeEventListener('pointerdown', pointerdown)}bindElEvents()// 设置解绑事件elEventsWeakMap.set(el, unBindElEvents)
}
export const resize = {inserted: function(el, binding) {const { modifiers, value } = bindingconst positions = Object.keys(modifiers)initResize({ el, positions, ...value })},unbind: function(el) {const unBindElEvents = elEventsWeakMap.get(el)unBindElEvents()}
}

Ts版本

import type { DirectiveBinding } from 'vue'const elEventsWeakMap = new WeakMap()
const MIN_WIDTH = 50
const MIN_HEIGHT = 50
const TRIGGER_SIZE = 8enum RESIZE_CURSOR {COL_RESIZE = 'col-resize',ROW_RESIZE = 'row-resize',
}enum POSITION {TOP = 'top',BOTTOM = 'bottom',LEFT = 'left',RIGHT = 'right',
}type Positions = [POSITION.TOP, POSITION.BOTTOM, POSITION.LEFT, POSITION.RIGHT]interface ResizeState {resizing: booleanposition?: POSITIONstartPointerX?: numberstartPointerY?: number
}
type WidthHeight = 'width' | 'height'type ElAttr = WidthHeight | 'cursor' | 'display' // 后面补充type ResizeFormatter = 'px' | 'flex'interface ResizeInfo {el: HTMLElementpositions: PositionsminWidth: numberminHeight: numbertriggerSize: numberformatter: ResizeFormatter
}function getElStyleAttr(element: HTMLElement, attr: ElAttr) {const styles = window.getComputedStyle(element)return styles[attr]
}function getSiblingByPosition(el: HTMLElement, position: POSITION) {const siblingMap = {left: el.previousElementSibling,right: el.nextElementSibling,bottom: el.nextElementSibling,top: el.previousElementSibling,}return siblingMap[position]
}function getSiblingsSize(el: HTMLElement, attr: WidthHeight) {const siblings = (el.parentNode && el.parentNode.children) || []return [...siblings].reduce((prev, next) => next.getBoundingClientRect()[attr] + prev,0,)
}function updateSize({el,sibling,formatter = 'px',elSize,siblingSize,attr = 'width',
}: {el: HTMLElementsibling: HTMLElementformatter: ResizeFormatterelSize: numbersiblingSize: numberattr?: WidthHeight
}) {let totalSize = elSize + siblingSizeif (formatter === 'px') {el.style[attr] = elSize + formattersibling.style[attr] = siblingSize + formatter} else if (formatter === 'flex') {totalSize = getSiblingsSize(el as HTMLElement, attr)el.style.flex = `${(elSize / totalSize) * 10}` // 修复 flex-grow <1sibling.style.flex = `${(siblingSize / totalSize) * 10}`}
}const initResize = ({el,positions,minWidth = MIN_WIDTH,minHeight = MIN_HEIGHT,triggerSize = TRIGGER_SIZE,formatter = 'px',
}: ResizeInfo) => {if (!el || !(el instanceof HTMLElement)) returnconst resizeState: ResizeState = {resizing: false,}const defaultCursor = getElStyleAttr(el, 'cursor')const elStyle = el.styleconst canLeftResize = positions.includes(POSITION.LEFT)const canRightResize = positions.includes(POSITION.RIGHT)const canTopResize = positions.includes(POSITION.TOP)const canBottomResize = positions.includes(POSITION.BOTTOM)if (!canLeftResize && !canRightResize && !canTopResize && !canBottomResize) {return} // 未指定方向const pointermove = (e: PointerEvent) => {if (resizeState.resizing) returne.preventDefault()const { left, right, top, bottom } = el.getBoundingClientRect()const { clientX, clientY } = e// 左右拉伸if (canLeftResize || canRightResize) {if (clientX - left < triggerSize) resizeState.position = POSITION.LEFTelse if (right - clientX < triggerSize)resizeState.position = POSITION.RIGHTelse resizeState.position = undefinedif (resizeState.position === undefined) {elStyle.cursor = defaultCursor} else {if (getSiblingByPosition(el, resizeState.position)) {elStyle.cursor = RESIZE_CURSOR.COL_RESIZE}e.stopPropagation()}} else if (canTopResize || canBottomResize) {// 上下拉伸if (clientY - top < triggerSize) resizeState.position = POSITION.TOPelse if (bottom - clientY < triggerSize)resizeState.position = POSITION.BOTTOMelse resizeState.position = undefinedif (resizeState.position === undefined) {elStyle.cursor = defaultCursor} else {if (getSiblingByPosition(el, resizeState.position)) {elStyle.cursor = RESIZE_CURSOR.ROW_RESIZE}e.stopPropagation()}}}const pointerleave = (e: PointerEvent) => {e.stopPropagation()resizeState.position = undefinedelStyle.cursor = defaultCursorel.releasePointerCapture(e.pointerId)}const pointerdown = (e: PointerEvent) => {const { resizing, position } = resizeStateif (resizing || !position) returnif (position) e.stopPropagation() // 如果当前节点存在拉伸方向 需要阻止冒泡(用于嵌套拉伸)el.setPointerCapture(e.pointerId)if (el.parentElement) {const isFlex = getElStyleAttr(el.parentElement, 'display') === 'flex'if (isFlex) formatter = 'flex'}resizeState.resizing = trueresizeState.startPointerX = e.clientXresizeState.startPointerY = e.clientYconst { width, height } = el.getBoundingClientRect()const sibling: HTMLElement = getSiblingByPosition(el,position,) as HTMLElementif (!sibling || !(sibling instanceof HTMLElement)) {console.error('未找到兄弟节点', position)return}const rectSibling = sibling.getBoundingClientRect()const { startPointerX, startPointerY } = resizeStateconst onDocumentMouseMove = (e: MouseEvent) => {if (!resizeState.resizing) returnelStyle.cursor =canLeftResize || canRightResize? RESIZE_CURSOR.COL_RESIZE: RESIZE_CURSOR.ROW_RESIZEconst { clientX, clientY } = eif (position === POSITION.LEFT || position === POSITION.RIGHT) {const offsetX = clientX - startPointerXconst elSize =position === POSITION.RIGHT ? width + offsetX : width - offsetXconst siblingSize =position === POSITION.RIGHT? rectSibling.width - offsetX: rectSibling.width + offsetXif (elSize <= minWidth || siblingSize <= minWidth) returnupdateSize({ el, sibling, elSize, siblingSize, formatter })} else if (position === POSITION.TOP || position === POSITION.BOTTOM) {const offsetY = clientY - startPointerYconst elSize =position === POSITION.BOTTOM ? height + offsetY : height - offsetYconst siblingSize =position === POSITION.BOTTOM? rectSibling.height - offsetY: rectSibling.height + offsetYif (elSize <= minHeight || siblingSize <= minHeight) returnupdateSize({el,sibling,elSize,siblingSize,formatter,attr: 'height',})}}const onDocumentMouseUp = () => {document.removeEventListener('mousemove', onDocumentMouseMove)document.removeEventListener('mouseup', onDocumentMouseUp)resizeState.resizing = falseelStyle.cursor = defaultCursor}document.addEventListener('mousemove', onDocumentMouseMove)document.addEventListener('mouseup', onDocumentMouseUp)}const bindElEvents = () => {el.addEventListener('pointermove', pointermove)el.addEventListener('pointerleave', pointerleave)el.addEventListener('pointerup', pointerleave)el.addEventListener('pointerdown', pointerdown)}const unBindElEvents = () => {el.removeEventListener('pointermove', pointermove)el.removeEventListener('pointerleave', pointerleave)el.removeEventListener('pointerup', pointerleave)el.removeEventListener('pointerdown', pointerdown)}bindElEvents()// 设置解绑事件elEventsWeakMap.set(el, unBindElEvents)
}
export const resize = {mounted: function (el: HTMLElement, binding: DirectiveBinding) {const { modifiers, value } = bindingconst positions = Object.keys(modifiers)initResize({ el, positions, ...value })},beforeUnmount: function (el: HTMLElement) {const unBindElEvents = elEventsWeakMap.get(el)unBindElEvents()},
}

本文转载于:

https://juejin.cn/post/7250402828378914876

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/115231.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C语言每日一练----Day(12)

C语言每日一练----Day(12)

本专栏为c语言练习专栏&#xff0c;适合刚刚学完c语言的初学者。本专栏每天会不定时更新&#xff0c;通过每天练习&#xff0c;进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字&#xff1a;最大连续1的个数 完全数计算 &#x1f493;博主csdn个人主页&#xff1…
阅读更多...
【爬虫】5.6 Selenium等待HTML元素

【爬虫】5.6 Selenium等待HTML元素

目录 任务目标 创建Ajax网站 创建服务器程序 Selenium XX 等待 1. Selenium强制等待 2. Selenium隐性等待 3. Selenium循环等待 4. Selenium显示等待 等待方法 任务目标 在浏览器加载网页的过程中&#xff0c;网页的有些元素时常会有延迟的现象&#xff0c;在HTML元素…
阅读更多...
实战系列（一）| Dubbo和Spring Cloud的区别，包含代码详解

实战系列（一）| Dubbo和Spring Cloud的区别，包含代码详解

目录 1. 概述2. 核心功能3. 代码示例4. 适用场景 Dubbo 和 Spring Cloud 都是微服务架构中的重要框架&#xff0c;但它们的定位和关注点不同。Dubbo 是阿里巴巴开源的一个高性能、轻量级的 RPC 框架&#xff0c;主要用于构建微服务之间的服务治理。而 Spring Cloud 是基于 Spri…
阅读更多...
华为OD机试 - 字符串分割（Java 2023 B卷 100分）

华为OD机试 - 字符串分割（Java 2023 B卷 100分）

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路1、根据题意&#xff1a;2、例如&#xff1a;3、解题思路&#xff1a; 五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《…
阅读更多...
金仓数据库KingbaseES Windows版本启动时报错的问题

金仓数据库KingbaseES Windows版本启动时报错的问题

服务启动提示&#xff1a; 原因是使用的授权版本不对&#xff0c;导致服务总是启动不了 先卸载&#xff0c;重启&#xff0c;重新安装&#xff0c;选择下面这个授权文件 再启动开发工具&#xff0c;成功
阅读更多...
Mybatis 里面的缓存机制

Mybatis 里面的缓存机制

Mybatis 里面设计的二级缓存是用来提升数据的检索效率&#xff0c;避免每次数据的访问都需要去查询数据库。 一级缓存&#xff0c;是 SqlSession 级别的缓存&#xff0c;也叫本地缓存&#xff0c;因为每个用户在执行查询的时 候都需要使用 SqlSession 来执行&#xff0c; 为了避…
阅读更多...
Redis进阶 - JVM进程缓存

Redis进阶 - JVM进程缓存

原文首更地址&#xff0c;阅读效果更佳&#xff01; Redis进阶 - JVM进程缓存 | CoderMast编程桅杆https://www.codermast.com/database/redis/redis-advance-jvm-process-cache.html 传统缓存的问题 传统的缓存策略一般是请求到达 Tomcat 后&#xff0c;先查询 Redis &…
阅读更多...
Gitlab创建一个空项目

Gitlab创建一个空项目

1. 创建项目 Project slug是访问地址的后缀&#xff0c;跟前边的ProjectUrl拼在一起&#xff0c;就是此项目的首页地址&#xff1b; Visibility Level选择默认私有即可&#xff0c;选择内部或者公开&#xff0c;就会暴露代码。 勾选Readme选项&#xff0c;这样项目内默认会带…
阅读更多...
CANalyzer panel

CANalyzer panel

(1205条消息) CAPL 脚本中对信号&#xff0c;系统变量&#xff0c;环境变量的 事件响应_capl programs脚本怎么写信号运算_蚂蚁小兵的博客-CSDN博客 注意环境变量是在工程关联的dbc中创建的&#xff1b;而系统变量是在CANoe工程工具栏的”Environment”下的”System Variables”…
阅读更多...
不可变集合、Lambda表达式、Stream流

不可变集合、Lambda表达式、Stream流

不可变集合、Lambda表达式、Stream流 创建不可变集合 不能被修改的集合 应用场景 如果某个数据不能被修改&#xff0c;把它防御性的拷贝到不可变集合中是个很好的实践。 当集合对象被不可信的库调用时&#xff0c;不可变形式是安全的。 创建不可变集合 在List、Set、Map接口中…
阅读更多...
DP读书：鲲鹏处理器 架构与编程（十一）鲲鹏生态软件架构 AND 硬件特定软件

DP读书：鲲鹏处理器 架构与编程（十一）鲲鹏生态软件架构 AND 硬件特定软件

鲲鹏生态软硬件构成 鲲鹏软件构成硬件特定软件1. Boot Loader2. SBSA 与 SBBR3. UEFI4. ACPI 鲲鹏软件构成 鲲鹏处理器的软件生态是一个不断发展的软件生态&#xff0c;服务器本身也具有复杂度多样性&#xff0c;经过很长时间的发展服务器硬件有不同的操作系统方案&#xff0c…
阅读更多...
C语言递归写n的k次方

C语言递归写n的k次方

int Func(int n,int k) {if (k 0){return 1;}else if (k > 1){return n * Func(n, k - 1);;}}int main() {int i 0;int j 0;printf("请输入数n和他的k次方\n");scanf("%d %d", &i,&j);int r Func(i,j);printf("%d的%d次方 %d\n"…
阅读更多...
解决无法远程连接MySQL服务的问题

解决无法远程连接MySQL服务的问题

① 设置MySQL中root用户的权限&#xff1a; [rootnginx-dev etc]# mysql -uroot -pRoot123 mysql> use mysql; mysql> GRANT ALL PRIVILEGES ON *.* TO root% IDENTIFIED BY Root123 WITH GRANT OPTION; mysql> select host,user,authentication_string from user; -…
阅读更多...
InnoDB的Buffer

InnoDB的Buffer

一、Buffer内存结构 MySQL 服务器启动的时候就向操作系统申请了一片连续的内存&#xff0c;默认128M&#xff0c;可通过从参数修改。 [server] innodb_buffer_pool_size 268435456 1.1 控制块 控制块包括该页所属的 表空间编号、页号、缓存页在 Buffer Pool 中的地址、链表…
阅读更多...
25.选择排序，归并排序，基数排序

25.选择排序，归并排序，基数排序

目录 一. 选择排序 &#xff08;1&#xff09;简单选择排序 &#xff08;2&#xff09;堆排序 二. 归并排序 三. 基数排序 四. 各种排序方法的比较 &#xff08;1&#xff09;时间性能 &#xff08;2&#xff09;空间性能 &#xff08;3&#xff09;排序方法的稳定性能…
阅读更多...
MyBatis查询数据库

MyBatis查询数据库

文章目录 一.基础概念1.什么是MyBatis2.添加MyBatis依赖3.配置MyBatis中的xml路径 二.MyBatis的使用1.添加用户实体类2.添加 mapper 接⼝3.配置xml4.接口实现5.添加Service6.添加Controller 三.其它情况下Mybatis的使用1.返回自增主键值2.数据库字段和类属性不匹配 四.动态SQL1…
阅读更多...
MybatisPlus-Generator

MybatisPlus-Generator

文章目录 一、前言二、MybatisPlus代码生成器1、引入依赖2、编写生成代码3、配置说明3.1、全局配置(GlobalConfig)3.2、包配置(PackageConfig)3.3、模板配置(TemplateConfig)3.4、策略配置(StrategyConfig)3.4.1、Entity 策略配置3.4.2、Controller 策略配置3.4.3、Service 策略…
阅读更多...
Ceph IO流程及数据分布

Ceph IO流程及数据分布

1. Ceph IO流程及数据分布 1.1 正常IO流程图 步骤&#xff1a; client 创建cluster handler。client 读取配置文件。client 连接上monitor&#xff0c;获取集群map信息。client 读写io 根据crshmap 算法请求对应的主osd数据节点。主osd数据节点同时写入另外两个副本节点数据。…
阅读更多...
C++ vector

C++ vector

目录 一、vector的介绍及使用 1.1 vector的介绍 1.1.1 认识vector 1.1.2 成员类型​​​​​​​ 1.1.3 成员函数一览 1.1.4 非成员函数重载 1.2 vector的使用 1.2.1 构造、析构与赋值操作符重载 1.2.2 reserve 与 resize 1.2.3 insert、erase 与 find extra train 1. 二叉树的…
阅读更多...
工厂人员作业行为动作识别检测算法

工厂人员作业行为动作识别检测算法

工厂人员作业行为动作识别检测算法通过yolov7python深度学习算法框架模型&#xff0c;工厂人员作业行为动作识别检测算法实时识别并分析现场人员操作动作行为是否符合SOP安全规范流程作业标准&#xff0c;如果不符合则立即抓拍告警提醒。Python是一种由Guido van Rossum开发的通…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023