Vue3描述列表（Descriptions）

😁 整体功能效果与 ant design vue 保持高度一致 😁

包含两种组件：Descriptions 和 DescriptionsItem（必须搭配使用！）

效果如下图：在线预览

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

APIs

Descriptions

参数说明类型默认值必传
title描述列表的标题，显示在最顶部string | slot‘’false
bordered是否展示边框booleanfalsefalse
column一行的 DescriptionItems 数量，可以写成数值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24}number | Responsive{xs: 1, sm: 2, md: 3}false
extra描述列表的操作区域，显示在右上方string | slot‘’false
size设置列表的大小‘default’ | ‘middle’ | ‘small’‘default’
labelStyle自定义标签样式，优先级低于 DescriptionItemsCSSProperties{}false
contentStyle自定义内容样式，优先级低于 DescriptionItemsCSSProperties{}false

Responsive Type

名称说明类型必传
xs<576px 响应式栅格numberfalse
sm≥576px 响应式栅格numberfalse
md≥768px 响应式栅格numberfalse
lg≥992px 响应式栅格numberfalse
xl≥1200px 响应式栅格numberfalse
xxl≥1600px 响应式栅格numberfalse

DescriptionsItem

参数说明类型默认值必传
label内容的描述标签string | slot‘’false
span包含列的数量number1false
labelStyle自定义标签样式，优先级高于 DescriptionCSSProperties{}false
contentStyle自定义内容样式，优先级高于 DescriptionCSSProperties{}false

Descriptions组件

<script setup lang="ts">
import { onMounted, onUnmounted, computed, nextTick, ref, watch, watchEffect } from 'vue'
import type { CSSProperties } from 'vue'
interface Responsive {xs?: number // <576px 响应式栅格sm?: number // ≥576px 响应式栅格md?: number // ≥768px 响应式栅格lg?: number // ≥992px 响应式栅格xl?: number // ≥1200px 响应式栅格xxl?: number // ≥1600px 响应式栅格
}
interface Props {title?: string // 描述列表的标题，显示在最顶部 string | slotbordered?: boolean // 是否展示边框column?: number|Responsive // 一行的 DescriptionItems 数量，可以写成数值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24}extra?: string // 描述列表的操作区域，显示在右上方 string | slotsize?: 'default'|'middle'|'small' // 设置列表的大小labelStyle?: CSSProperties // 自定义标签样式，优先级低于 DescriptionItemscontentStyle?: CSSProperties // 自定义内容样式，优先级低于 DescriptionItems
}
const props = withDefaults(defineProps<Props>(), {title: '',bordered: false,column: () => ({xs: 1, sm: 2, md: 3}),extra: '',size: 'default',labelStyle: () => ({}),contentStyle: () => ({})
})
const clientWidth = ref(document.documentElement.clientWidth)
onMounted(() => {window.addEventListener('resize', getBrowserSize)
})
onUnmounted(() => {window.removeEventListener('resize', getBrowserSize)
})
function getBrowserSize () {// document.documentElement返回<html>元素clientWidth.value = document.documentElement.clientWidth
}
const responsiveColumn = computed(() => {if (typeof props.column === 'object') {if (clientWidth.value >= 1600 && props.column.xxl) {return props.column.xxl}if (clientWidth.value >= 1200 && props.column.xl) {return props.column.xl}if (clientWidth.value >= 992 && props.column.lg) {return props.column.lg}if (clientWidth.value >= 768 && props.column.md) {return props.column.md}if (clientWidth.value >= 576 && props.column.sm) {return props.column.sm}if (clientWidth.value < 576 && props.column.xs) {return props.column.xs}}return props.column
})
const view = ref()
const children = ref<any[]>() // DescriptionsItems 节点
const cols = ref() // 放置 DescriptionsItems 节点的模板引用数组
const rows = ref() // 放置 DescriptionsItems 节点的模板引用数组（带边框）
const groupItems = ref<any[]>([]) // 处理后的 DescriptionsItems 节点数组
const groupRows = computed(() => {return groupItems.value.length
})
watchEffect(() => {if (props.bordered) {children.value = Array.from(view.value.children).filter((element: any) => element.className === 'm-desc-item-bordered')} else {children.value = Array.from(view.value.children).filter((element: any) => element.className === 'm-desc-item')}
}, {flush: 'post'})
watch(children, (to) => {groupItems.value = []nextTick(() => {getGroupItems(to, responsiveColumn.value as number)})
})
watch(responsiveColumn, (to) => {groupItems.value = []nextTick(() => {getGroupItems(children.value, to as number)})
})
// 根据不同 cloumn 处理 DescriptionsItems 节点
function getGroupItems (children: any, responsiveColumn: number) {const len = children.lengthlet group: any[] = []for (let n = 0; n < len; n++) {const item = {span: Math.min(children[n].dataset.span, responsiveColumn),element: children[n]}if (getTotalSpan(group) < responsiveColumn) { // 已有 items 的 totalSpan ＜ columnitem.span = Math.min(item.span, responsiveColumn - getTotalSpan(group))if (n === len - 1) { // 最后一个item.span = responsiveColumn - getTotalSpan(group)}group.push(item)if (n === len - 1) {groupItems.value.push(group)}} else {groupItems.value.push(group)group = [item]if (n === len - 1) { // 最后一个item.span = responsiveColumngroupItems.value.push(group)}}}if (props.bordered) { // 带边框nextTick(() => {groupItems.value.forEach((items: any, index: number) => {// 每一行 tritems.forEach((item: any) => {const itemChildren: any[] = Array.from(item.element.children)// 创建节点副本，否则原节点将先被移除，后插入到新位置，影响后续响应式布局计算const th = itemChildren[0].cloneNode(true)th.colSpan = 1// 动态添加节点样式setStyle(th, props.labelStyle)setStyle(th, JSON.parse(item.element.dataset.labelStyle))const td = itemChildren[1].cloneNode(true)td.colSpan = item.span * 2 - 1// 动态添加节点样式setStyle(td, props.contentStyle)setStyle(td, JSON.parse(item.element.dataset.contentStyle))// 插入节点到指定位置rows.value[index].appendChild(th)rows.value[index].appendChild(td)})})})} else {nextTick(() => {children.forEach((element: any, index: number) => {const elementChildren: any[] = Array.from(element.children)const label = elementChildren[0]// 动态添加节点样式setStyle(label, props.labelStyle)setStyle(label, JSON.parse(element.dataset.labelStyle))const content = elementChildren[1]// 动态添加节点样式setStyle(content, props.contentStyle)setStyle(content, JSON.parse(element.dataset.contentStyle))// 插入节点到指定位置cols.value[index].appendChild(element)})})}
}
// 计算当前 group 中所有 span 之和
function getTotalSpan (group: any): number {return group.reduce((accumulator: number, currentValue: any) => accumulator + currentValue.span, 0)
}
// 为元素添加内联样式
function setStyle(element: any, style: any) {if (JSON.stringify(style) !== "{}") {Object.keys(style).forEach(key => {element.style[key] = style[key]})}
}
</script>
<template><div class="m-desc" :class="`desc-${size}`"><div class="m-header"><div class="u-title"><slot name="title">{{ title }}</slot></div><div class="u-extra"><slot name="extra">{{ extra }}</slot></div></div><div ref="view" v-show="false"><slot></slot></div><div class="m-desc-view" :class="{'m-bordered': bordered}"><table><tbody v-if="!bordered"><tr v-for="(items, row) in groupItems" :key="row"><tdref="cols"class="u-item-td":colspan="item.span"v-for="(item, col) in items" :key="col"></td></tr></tbody><tbody v-else><template v-if="groupRows"><trref="rows"class="tr-bordered"v-for="row of groupRows" :key="row"></tr></template></tbody></table></div></div>
</template>
<style lang="less" scoped>
.m-desc {font-size: 14px;color: rgba(0, 0, 0, .88);line-height: 1.5714285714285714;.m-header {display: flex;align-items: center;margin-bottom: 20px;.u-title {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;flex: auto;font-weight: 600;font-size: 16px;color: rgba(0, 0, 0, .88);line-height: 1.5;}.u-extra {margin-inline-start: auto;color: rgba(0, 0, 0, .88);font-size: 14px;}}.m-desc-view {width: 100%;border-radius: 8px;table {width: 100%;table-layout: fixed;display: table; // 可选，只为兼容 vitepress 总 .vp-doc 的样式入侵，下同border-collapse: separate; // 可选margin: 0; // 可选tr { // 可选border: none;background: transparent;}.u-item-td {padding: 0; // 可选border: none; // 可选padding-bottom: 16px;vertical-align: top;}}}.m-bordered {border: 1px solid rgba(5, 5, 5, .06);table {table-layout: auto;border-collapse: collapse;display: table; // 可选margin: 0; // 可选.tr-bordered {border-bottom: 1px solid rgba(5, 5, 5, .06);&:last-child {border-bottom: none;}:deep(.u-label-th) {border: none; // 可选color: rgba(0, 0, 0, .88);font-weight: normal;font-size: 14px;line-height: 1.5714285714285714;text-align: start;background-color: rgba(0, 0, 0, .02);padding: 16px 24px;border-inline-end: 1px solid rgba(5, 5, 5, .06);}:deep(.u-content-td) {border: none; // 可选display: table-cell;flex: 1;padding: 16px 24px;border-inline-end: 1px solid rgba(5, 5, 5, .06);color: rgba(0, 0, 0, .88);font-size: 14px;line-height: 1.5714285714285714;word-break: break-word;overflow-wrap: break-word;&:last-child {border-inline-end: none;}}}}}
}
.desc-middle {.m-desc-view {.u-item-td {padding-bottom: 12px !important;}}.m-bordered {:deep(.u-label-th) {padding: 12px 24px !important;}:deep(.u-content-td) {padding: 12px 24px !important;}}
}
.desc-small {.m-desc-view {.u-item-td {padding-bottom: 8px !important;}}.m-bordered {:deep(.u-label-th) {padding: 8px 16px !important;}:deep(.u-content-td) {padding: 8px 16px !important;}}
}
</style>

DescriptionsItem组件

<script setup lang="ts">
import type { CSSProperties } from 'vue'
interface Props {label?: string // 内容的描述标签 string | slotspan?: number // 包含列的数量labelStyle?: CSSProperties // 自定义标签样式，优先级高于 DescriptioncontentStyle?: CSSProperties // 自定义内容样式，优先级高于 Description
}
withDefaults(defineProps<Props>(), {label: '',span: 1,labelStyle: () => ({}),contentStyle: () => ({})
})
</script>
<template><div class="m-desc-item" :data-span="span" :data-label-style="JSON.stringify(labelStyle)" :data-content-style="JSON.stringify(contentStyle)"><span class="u-label"><slot name="label">{{ label }}</slot></span><span class="u-content"><slot></slot></span></div><div class="m-desc-item-bordered" :data-span="span" :data-label-style="JSON.stringify(labelStyle)" :data-content-style="JSON.stringify(contentStyle)"><th class="u-label-th"><slot name="label">{{ label }}</slot></th><td class="u-content-td"><slot></slot></td></div>
</template>
<style lang="less" scoped>
.m-desc-item {display: flex;.u-label {display: inline-flex;align-items: baseline;color: rgba(0, 0, 0, .88);font-weight: normal;font-size: 14px;line-height: 1.5714285714285714;text-align: start;&::after {content: ":";position: relative;top: -.5px;margin-inline: 2px 8px;}}.u-content {display: inline-flex;align-items: baseline;flex: 1;color: rgba(0, 0, 0, .88);font-size: 14px;line-height: 1.5714285714285714;word-break: break-word;overflow-wrap: break-word;}
}
</style>

在要使用的页面引入

其中引入使用了 Vue3单选（Radio）

<script setup lang="ts">
import { ref } from 'vue'
const size = ref('default')
const options = ref([{label: 'default',value: 'default'},{label: 'middle',value: 'middle'},{label: 'small',value: 'small'}
])
const onChange = (value: any) => {console.log('size checked', value)size.value = value
}
</script>
<template><div><h1>Descriptions 描述列表</h1><h2 class="mt30 mb10">基本使用</h2><Descriptions title="User Info"><template #extra><a href="#">more</a></template><DescriptionsItem label="UserName">Zhou Maomao</DescriptionsItem><DescriptionsItem label="Telephone">1810000000</DescriptionsItem><DescriptionsItem label="Live">Hangzhou, Zhejiang</DescriptionsItem><DescriptionsItem label="Remark">empty</DescriptionsItem><DescriptionsItem label="Address">No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</DescriptionsItem></Descriptions><h2 class="mt30 mb10">带边框的</h2><Descriptions title="User Info" bordered><DescriptionsItem label="Product">Cloud Database</DescriptionsItem><DescriptionsItem label="Billing Mode">Prepaid</DescriptionsItem><DescriptionsItem label="Automatic Renewal">YES</DescriptionsItem><DescriptionsItem label="Order time">2018-04-24 18:00:00</DescriptionsItem><DescriptionsItem label="Usage Time" :span="2">2019-04-24 18:00:00</DescriptionsItem><DescriptionsItem label="Status" :span="3"><Badge status="processing" text="Running" /></DescriptionsItem><DescriptionsItem label="Negotiated Amount">$80.00</DescriptionsItem><DescriptionsItem label="Discount">$20.00</DescriptionsItem><DescriptionsItem label="Official Receipts">$60.00</DescriptionsItem><DescriptionsItem label="Config Info">Data disk type: MongoDB<br />Database version: 3.4<br />Package: dds.mongo.mid<br />Storage space: 10 GB<br />Replication factor: 3<br />Region: East China 1<br /></DescriptionsItem></Descriptions><h2 class="mt30 mb10">响应式描述列表</h2><Descriptionstitle="Responsive Descriptions"bordered:column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"><DescriptionsItem label="Product">Cloud Database</DescriptionsItem><DescriptionsItem label="Billing">Prepaid</DescriptionsItem><DescriptionsItem label="Time">18:00:00</DescriptionsItem><DescriptionsItem label="Amount">$80.00</DescriptionsItem><DescriptionsItem label="Discount">$20.00</DescriptionsItem><DescriptionsItem label="Official">$60.00</DescriptionsItem><DescriptionsItem label="Config Info">Data disk type: MongoDB<br />Database version: 3.4<br />Package: dds.mongo.mid<br />Storage space: 10 GB<br />Replication factor: 3<br />Region: East China 1</DescriptionsItem></Descriptions><h2 class="mt30 mb10">自定义尺寸</h2><Radio :options="options" v-model:value="size" @change="onChange" /><br /><br /><Descriptions bordered title="Custom Size" :size="size"><template #extra><Button type="primary">Edit</Button></template><DescriptionsItem label="Product">Cloud Database</DescriptionsItem><DescriptionsItem label="Billing">Prepaid</DescriptionsItem><DescriptionsItem label="Time">18:00:00</DescriptionsItem><DescriptionsItem label="Amount">$80.00</DescriptionsItem><DescriptionsItem label="Discount">$20.00</DescriptionsItem><DescriptionsItem label="Official">$60.00</DescriptionsItem><DescriptionsItem label="Config Info">Data disk type: MongoDB<br />Database version: 3.4<br />Package: dds.mongo.mid<br />Storage space: 10 GB<br />Replication factor: 3<br />Region: East China 1<br /></DescriptionsItem></Descriptions><br /><br /><Descriptions title="Custom Size" :size="size"><template #extra><Button type="primary">Edit</Button></template><DescriptionsItem label="Product">Cloud Database</DescriptionsItem><DescriptionsItem label="Billing">Prepaid</DescriptionsItem><DescriptionsItem label="Time">18:00:00</DescriptionsItem><DescriptionsItem label="Amount">$80.00</DescriptionsItem><DescriptionsItem label="Discount">$20.00</DescriptionsItem><DescriptionsItem label="Official">$60.00</DescriptionsItem></Descriptions><h2 class="mt30 mb10">自定义内容 & 标签样式</h2><Descriptionsborderedtitle="Custom Style":labelStyle="{fontWeight: 800, color: '#faad14'}":contentStyle="{fontWeight: 600, color: '#1677ff'}"><template #extra><Button type="primary">Edit</Button></template><DescriptionsItem label="Product">Cloud Database</DescriptionsItem><DescriptionsItem label="Billing">Prepaid</DescriptionsItem><DescriptionsItem label="Time">18:00:00</DescriptionsItem><DescriptionsItem label="Amount" :labelStyle="{color: '#52c41a'}" :contentStyle="{color: '#ff4d4f'}">$80.00</DescriptionsItem><DescriptionsItem label="Discount">$20.00</DescriptionsItem><DescriptionsItem label="Official">$60.00</DescriptionsItem><DescriptionsItem label="Config Info">Data disk type: MongoDB<br />Database version: 3.4<br />Package: dds.mongo.mid<br />Storage space: 10 GB<br />Replication factor: 3<br />Region: East China 1<br /></DescriptionsItem></Descriptions><br /><br /><Descriptionstitle="Custom Style":labelStyle="{fontWeight: 800, color: '#faad14'}":contentStyle="{fontWeight: 600, color: '#1677ff'}"><template #extra><Button type="primary">Edit</Button></template><DescriptionsItem label="Product">Cloud Database</DescriptionsItem><DescriptionsItem label="Billing">Prepaid</DescriptionsItem><DescriptionsItem label="Time">18:00:00</DescriptionsItem><DescriptionsItem label="Amount" :labelStyle="{color: '#52c41a'}" :contentStyle="{color: '#ff4d4f'}">$80.00</DescriptionsItem><DescriptionsItem label="Discount">$20.00</DescriptionsItem><DescriptionsItem label="Official">$60.00</DescriptionsItem></Descriptions></div>
</template>

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

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

相关文章

删除注释（力扣）

删除注释（力扣）

删除注释 题目 给一个 C 程序&#xff0c;删除程序中的注释。这个程序source是一个数组&#xff0c;其中source[i]表示第 i 行源码。 这表示每行源码由 ‘\n’ 分隔。 在 C 中有两种注释风格&#xff0c;行内注释和块注释。 字符串// 表示行注释&#xff0c;表示//和其右侧…
阅读更多...
冒泡排序【Java算法】

冒泡排序【Java算法】

文章目录 1. 概念2. 思路3. 代码实现 1. 概念 比较前后相邻的两个数据&#xff0c;如果前面数据大于后面的数据&#xff0c;就将这两个数据互换。这样对数组的第0个数据到第 N - 1 个数据进行一次遍历后&#xff0c;最大的一个数据就 “沉” 到数组的第 N - 1 个位置。 N N - …
阅读更多...
知识区博主转型——兼做知识区和改造区博主！！！！！

知识区博主转型——兼做知识区和改造区博主！！！！！

想脱单的进来&#xff0c;一起交流如何能脱单&#xff01;&#xff01;&#xff01; 为什么——我太羡慕有对象的人了哭死&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 你是不是很羡慕别人怎么都有女朋友 别人家的女朋友怎么都那么好&#xff…
阅读更多...
FPGA学习—通过数码管实现电子秒表模拟

FPGA学习—通过数码管实现电子秒表模拟

文章目录 一、数码管简介二、项目分析三、项目源码及分析四、实现效果五、总结 一、数码管简介 请参阅博主以前写过的一篇电子时钟模拟&#xff0c;在此不再赘述。 https://blog.csdn.net/qq_54347584/article/details/130402287 二、项目分析 项目说明&#xff1a;本次项目…
阅读更多...
RISCV 5 RISC-V调用规则

RISCV 5 RISC-V调用规则

RISCV 5 RISC-V调用规则 1 Register Convention1.1 Integer Register Convention1.2 Floating-point Register Convention 2. Procedure Calling Convention2.1 Integer Calling Convention2.2 Hardware Floating-point Calling Convention2.3 ILP32E Calling Convention2.4 Na…
阅读更多...
大数据课程F4——HIve的其他操作

大数据课程F4——HIve的其他操作

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 掌握HIve的join&#xff1b; ⚪ 掌握HIve的查询和排序 ⚪ 掌握HIve的beeline ⚪ 掌握HIve的文件格式 ⚪ 掌握HIve的基本架构 ⚪ 掌握HIve的优化&#xff1b; 一、jo…
阅读更多...
想了解好用的翻译pdf的软件吗？

想了解好用的翻译pdf的软件吗？

在全球化的时代背景下&#xff0c;跨国贸易越来越普遍&#xff0c;跨语言沟通也越来越频繁。小黄是一家跨国公司的员工&#xff0c;他梦想能在全球各地拓展自己的业务&#xff0c;奈何遇到了一个巨大的挑战&#xff1a;跨语言沟通。在这其中&#xff0c;pdf文件是他经常接收到的…
阅读更多...
linux基本功系列之cd命令实战

linux基本功系列之cd命令实战

文章目录 前言一. cd命令的介绍二. 语法格式及常用选项三. 参考案例总结 前言 居然发现了落下了CD命令&#xff0c;也不算落下把&#xff0c;主要是cd命令内容太少&#xff0c;撑不起一篇文章&#xff0c;今天也写一写&#xff0c;就当记个笔记吧 &#x1f3e0;个人主页&#…
阅读更多...
ubuntu下，在vscode中使用platformio出现 Can not find working Python 3.6+ Interpreter的问题

ubuntu下，在vscode中使用platformio出现 Can not find working Python 3.6+ Interpreter的问题

有一段时间没有使用platformio了&#xff0c;今天突然使用的时候&#xff0c;发现用不了&#xff0c;报错&#xff1a; Ubuntu PlatformIO: Can not find working Python 3.6 Interpreter. Please install the latest Python 3 and restart VSCode。 上网一查&#xff0c;发现…
阅读更多...
【Liux下6818开发板(ARM)】触摸屏

【Liux下6818开发板(ARM)】触摸屏

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…
阅读更多...
MacOS上用docker运行mongo及mongo-express

MacOS上用docker运行mongo及mongo-express

MongoDB简介 MongoDB 是一个基于分布式文件存储的数据库。由 C 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。 MongoDB 是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据库的。 前提 要求…
阅读更多...
高校陆续拥抱chatgpt，人工智能会给学术带来什么变化会有什么影响

高校陆续拥抱chatgpt，人工智能会给学术带来什么变化会有什么影响

在当今信息爆炸的时代&#xff0c;人工智能在各行各业都发挥着越来越重要的作用&#xff0c;高校教育领域也不例外。最近&#xff0c;越来越多的高校开始陆续拥抱chatgpt&#xff08;Chatbot GPT&#xff09;这一人工智能技术&#xff0c;在学术领域会带来了怎样的变化与影响&a…
阅读更多...
【RabbitMQ（day3）】扇形交换机和主题交换机的应用

【RabbitMQ（day3）】扇形交换机和主题交换机的应用

文章目录 第三种模型&#xff08;Publish/Subscribe 发布/订阅&#xff09;扇型&#xff08;funout&#xff09;交换机Public/Subscribe 模型绑定 第四、第五种模型&#xff08;Routing、Topics&#xff09;第四种模型&#xff08;Routing&#xff09;主题交换机&#xff08;To…
阅读更多...
在线五子棋对战

在线五子棋对战

目录 数据管理模块&#xff08;数据库设计&#xff09; 前端界面模块 业务处理模块 会话管理模块网络通信模块(session,cookie) 在线管理模块 房间管理模块 用户匹配模块 项目扩展 数据管理模块&#xff08;数据库设计&#xff09; 数据库中有可能存在很多张表&#xf…
阅读更多...
微信小程序接入腾讯云天御验证码

微信小程序接入腾讯云天御验证码

腾讯云新一代行为验证码&#xff08;Captcha&#xff09;&#xff0c;基于十道安全防护策略&#xff0c;为网页、APP、小程序开发者打造立体、全面的人机验证。在保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时&#xff0c;提供更精细化的用户体验。 …
阅读更多...
DataSphere Studio- 1.1.1 安装部署(自动化脚本)

DataSphere Studio- 1.1.1 安装部署(自动化脚本)

DSSLinkis Ansible一键安装脚本 DSS1.1.1 & Linkis 1.3.0 Ansible 一键部署脚本 作者&#xff1a;wubolive Q Q&#xff1a;1049635685 邮箱&#xff1a;wubolivefoxmai.com Github&#xff1a;https://github.com/wubolive/dss-linkis-ansible 一、简介 为解决繁琐…
阅读更多...
消息疯狂堆积！RocketMQ出Bug了？

消息疯狂堆积！RocketMQ出Bug了？

前言 用过 MQ 的同学&#xff0c;可能会遇到过消息堆积的问题。而肥壕最近也踩上了这个坑&#xff0c;但是发现结果竟然是这么一个意料之外的原因而导致的。 正文 那一晚月黑风高&#xff0c;肥壕正准备踏上回家的路&#xff0c;突然收到告警短信轰炸&#xff01;“MQ 消息堆…
阅读更多...
nvm安装和使用

nvm安装和使用

公司不同系统用的node版本不一样&#xff0c;所以就需要安装多版本了&#xff0c;那么使用nvm来管理就大大方便了开发。 使用nvm有哪些好处呢 安装node很方便&#xff0c;只需要一条命令可以轻松切换node版本可以多版本node并存 需要注意的是安装之前先把原有的node给卸载掉…
阅读更多...
Mysql面试突击班索引，事务与锁

Mysql面试突击班索引，事务与锁

Mysql面试突击班索引&#xff0c;事务与锁 1.为什么Mysql要使用B树做为索引而不用B树 B树能显著减少IO次数&#xff0c;提高效率B树的查询效率更加稳定&#xff0c;因为数据放在叶子节点B树能提高范围查询的效率&#xff0c;因为叶子节点指向下一个叶子节点B树采取顺序读 2.…
阅读更多...
一 关于idea如何在svn进行项目下载并运行成功

一 关于idea如何在svn进行项目下载并运行成功

安装svn客户端 如图 安装时请选择该选项&#xff08;Will be installed on local hard drive&#xff09;并选择自己想要安装的目录路径 如图 svn安装成功 如图 注意 安装完成后&#xff0c;使用svn进行一次checkout的项目导出完成以上五步时&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023