vue-treeselect 实现懒加载 + 远程模糊搜索 支持多选,可悬浮提示选择项所有层级 已封装为组件

今天实现一个客户单位组织树的功能,不限层级,数据量巨大,采用vue-treeselect 实现懒加载 + 远程搜索

这是vue+ iview组件   element的需要改一下tooltip的写法

这个支持对选择的单位全部层级进行悬浮提示(也无法在下面下拉回显,下拉需要触发懒加载,只有远程搜索才能回显层级)

代码详细解释:

tooltip 设置了最大宽度 没有选择项  或者 下拉框弹开  会disabled禁用

limit是多选展示的最大数量,我这里设置1个

 :limitText="count => '更多' + count + '个'"          是  xxx  更多x个     对提示文字修改

flat是多选时候不设置这个回显会把 给出id的所有父级也勾选 

multiple是多选

:class="{ treeClass: isEdit }"   这个是开始想通过设置placeholder 来回显层级,后面作废

:options="product_map"    下拉框的数据源

:appendToBody="appendToBody"   相当于transfer   把组件渲染到最外层,不受父级样式影响

:value-consists-of="valueConsistsOf"   选择后@select 方法获取的数据类型(id还是node层级)

:disabled="disabled"   禁用

:placeholder="placeholder"  默认提示语

  :async="isAsync"   是否开启远程搜索模式

:load-options="isAsync ? asyncOptions : loadOptions"    懒加载和远程搜索触发的方法

  :defaultExpandLevel="expandLevel"  默认展开的层级  

  :cacheOptions="false"  是否缓存搜索的数据    这里缓存会有问题

v-model="checkRroduct"   绑定的数据id

一些为空的提示语

noChildrenText="没有数据"

noOptionsText="没有数据"

noResultsText="没有搜索结果"     

 控制打开搜索模式还是懒加载

@search-change="searchChange"

 @keydown.native="treeKeydown($event)"

@keyup.native="treeKeyup($event)"

@open="itemopen"

@close="itemClose"

下拉选项的自定义展示处理

因为选项的每一项 配置 disabled在远程搜索模式有问题,所以自己重写这个了

disabled是因为项目搜索后   一些选项要禁用 

(这个气死我了)  写的破大防

[

  {id: 151,  group_id : "150,151", group_name : "xxx,xxx" },

 {id: 152,  group_id : "150,151,152", group_name : "xxx,xxx,xxx" },

{id: 162,  group_id : "160,161,162" , group_name : "xxx,xxx,xxx"},

]

如上数据 group_id 是父级到它本身 我要把这个聚合为一条树,并且 根据id去禁用   上面的150,160,161  就需要禁用,也就是没有返回id和group_id 最后一位相同的选项 

<div slot="option-label" slot-scope="{ node }">

          <div :title="node.raw.label" v-if="node.raw.disabled" @click.prevent @click.stop :class="['labelClass', 'is-disabled']">

            {{ node.raw.label }}

          </div>

          <div :title="node.raw.label" v-else class="labelClass">

            {{ node.raw.label }}

          </div>

        </div>

选中项的自定义展示处理

<div slot="value-label" slot-scope="{ node }">{{ node.raw.longTitle }}</div>

接口讲解

queryTenantByLevel    传空查询所有一级客户    传parent_id查询用户子级(懒加载使用)

queryTenantByLike   传 staff_id查询这个id的用户信息   传company_name远程模糊搜索

方法讲解

handleEditTreeDataT   修改回显时候使用这个方法   handleEditTreeData是客户中心的特殊处理

handleEditTreeDataMuti  是多选的的回显

               上面三个都做了权限控制,queryTenantByLevel返回空证明这个客户权限低,使用登录客户的staff_id请求数据

clear()    这个是对页面重置时候要调用的  清空选择项    this.$refs.cusTree.clear()             

initTreeData   是新增和页面条件查询时候用的

toSelectProduct  选中选项后触发这个方法,返回node层级

asyncOptions  远程搜索  这里面做了一个时间控制,用户输入停止后1秒才会调接口  而且这个有  bug,必须callback(null, [])  后才能正常搜索,我这里控制第一次搜索结果为空,存在问题,后续研究吧

loadOptions 懒加载方法

后端返回数据需要这些字段

company_name  客户单位的名称

group_id   顶级到当前级别的id  如果当前是一级这个取当前用户的id

group_name  顶级到当前级别的company_name拼接

parent_id  当前用户的父级id  这个结合handleEditTreeData   客户中心是新增修改父级客户

                  所以this.checkRroduct = formData.parent_id    其他地方是staff_id

staff_id  当前用户的id

如何调用

首先全局注册一下这个组件

新建js文件

import Vue from 'vue'

import CusTree from './vue-treeselect/index.vue'

Vue.component('CusTree', CusTree)

在查询条件里面使用

<FormItem>

<CusTree style="width: 200px;" ref="cusTree" placeholder="客户单位" type="A" @getCheckRroduct="getCheckRroduct"></CusTree>

</FormItem>

//  重置 

resetData() {

      this.$refs.cusTree.clear()

      this.condition = JSON.parse(JSON.stringify(this.conditionInitCache))

      this.queryData() 

    },

//   这个是获取  checkRroduct是id     label是中文名(防止后端让你传中文搜索)

getCheckRroduct(formData) {

      this.condition.customer_id = formData.checkRroduct        //  formData.label

    },

在新增修改数据里面使用

type为A是新增  其他类型需要在下面触发handleEditTreeDataT修改回显

queryTenantByLike传staff_id是查这个用户的具体信息

<CusTree :type="params.type" ref="cusTree" placeholder="客户单位" @getCheckRroduct="getCheckRroduct"></CusTree>

if (this.params.type == 'M') {

      // console.log('params', this.params)

      this.formValidate.customerId = this.params.customer_id

      this.$http.operation.queryTenantByLike({ staff_id: this.formValidate.customerId }).then(resp => {

        if (resp && resp.result_code == '0') {

          this.$refs.cusTree.handleEditTreeDataT(resp.data[0])

        } else {

          this.$Message.error(resp.result_msg)

        }

      })

    }

在多选时候 

 <CusTree flat multiple :type="params.type" ref="cusTree" placeholder="请选择通知人员" @getCheckRroduct="getCheckRroduct"></CusTree>

if (this.params.type == 'M') {

      // console.log('params', this.params)

      this.formValidate.customerId = this.params.customer_id

      this.$http.operation.queryTenantByLike({ staff_id: this.formValidate.customerId }).then(resp => {

        if (resp && resp.result_code == '0') {

          this.$refs.cusTree.handleEditTreeDataMuti(resp.data)

        } else {

          this.$Message.error(resp.result_msg)

        }

      })

    }

完整代码  

<template><div><Tooltip max-width="200" :disabled="tooltipDisabled" :content="formData.longTitle"><treeselect:limit="1":clearable="clearable":limitText="count => '更多' + count + '个'":flat="flat":multiple="multiple":class="{ treeClass: isEdit }":options="product_map":appendToBody="appendToBody":value-consists-of="valueConsistsOf":disabled="disabled":placeholder="placeholder"@select="toSelectProduct":async="isAsync":defaultExpandLevel="expandLevel":cacheOptions="false":disableFuzzyMatching="false":load-options="isAsync ? asyncOptions : loadOptions"v-model="checkRroduct"noChildrenText="没有数据"noOptionsText="没有数据"noResultsText="没有搜索结果"@search-change="searchChange"@keydown.native="treeKeydown($event)"@keyup.native="treeKeyup($event)"@open="itemopen"@close="itemClose"><div slot="option-label" slot-scope="{ node }"><div :title="node.raw.label" v-if="node.raw.disabled" :class="['labelClass', 'is-disabled']">{{ node.raw.label }}</div><div :title="node.raw.label" v-else class="labelClass">{{ node.raw.label }}</div></div><div slot="value-label" slot-scope="{ node }">{{ node.raw.longTitle }}</div></treeselect></Tooltip></div>
</template><script>
export default {components: {},props: {placeholder: {type: String,default: '请选择'},indexTTT: {type: Number,default: 0},type: {type: String,default: 'A'},valueConsistsOf: {type: String,default: 'ALL_WITH_INDETERMINATE'},isEdit: {type: Boolean,default: false},disabled: {type: Boolean,default: false},appendToBody: {type: Boolean,default: false},multiple: {type: Boolean,default: false},flat: {type: Boolean,default: false},clearT: {type: Boolean,default: false},clearable: {type: Boolean,default: true}},data() {return {isAsync: false,checkRroductT: null,userInfo: JSON.parse(this.$libs.getSessionStorage('user-info')),tooltipDisabled: true,checkRroduct: null,expandLevel: 0,product_map: [],product_mapTemp: [],formData: {},searchQuery: '',timer: null,dataT: []}},watch: {checkRroduct(val) {this.formData.checkRroduct = val || ''this.tooltipDisabled = !valif (!val) {this.formData.label = ''this.formData.longTitle = ''}if (!(this.clearT && this.type != 'A')) {this.$emit('getCheckRroduct', this.formData, this.indexTTT)}}},mounted() {// console.log(this.type)if (this.type == 'A') {this.initTreeData()}},methods: {clear() {this.checkRroduct = nullthis.tooltipDisabled = true},// 客户中心显示父级handleEditTreeData(formData) {if (!this.isEdit) {this.$http.operation.queryTenantByLevel().then(resp => {if (resp && resp.result_code == '0') {if (resp.data.length == 0) {this.$http.operation.queryTenantByLike({ staff_id: this.userInfo.staff_id }).then(resp => {if (resp && resp.result_code == '0') {resp.data.map(item => {item.id = item.staff_iditem.label = item.company_nameitem.longTitle = item.company_nameitem.children = null})if (!formData.group_id) {this.product_map = resp.data} else {this.product_map = [this.transformData(formData.group_id, formData.group_name, formData.staff_id, formData.company_name, false)]this.checkRroduct = formData.parent_id}this.product_mapTemp = resp.data} else {this.$Message.error(resp.result_msg)}})} else {resp.data.map(item => {item.id = item.staff_iditem.label = item.company_nameitem.longTitle = item.company_nameitem.children = null})if (!formData.group_id) {this.product_map = resp.data} else {this.product_map = [this.transformData(formData.group_id, formData.group_name, formData.staff_id, formData.company_name, false)]this.formData.longTitle = formData.group_namethis.checkRroduct = formData.parent_id}this.product_mapTemp = resp.data}} else {this.$Message.error(resp.result_msg)}})} else {this.formData.longTitle = formDatathis.tooltipDisabled = false}},// 其他页面修改handleEditTreeDataT(formData) {this.$http.operation.queryTenantByLevel().then(resp => {if (resp && resp.result_code == '0') {if (resp.data.length == 0) {this.$http.operation.queryTenantByLike({ staff_id: this.userInfo.staff_id }).then(resp => {if (resp && resp.result_code == '0') {resp.data.map(item => {item.id = item.staff_iditem.label = item.company_nameitem.longTitle = item.company_nameitem.children = null})if (!formData || !formData.group_id) {this.product_map = resp.data} else {this.product_map = [this.transformData(formData.group_id, formData.group_name, formData.staff_id, formData.company_name, false)]this.formData.longTitle = formData.group_namethis.formData.label = formData.company_namethis.formData.group_id = formData.group_idthis.checkRroduct = formData.staff_idthis.checkRroductT = formData.staff_id}this.product_mapTemp = resp.data} else {this.$Message.error(resp.result_msg)}})} else {resp.data.map(item => {item.id = item.staff_iditem.label = item.company_nameitem.longTitle = item.company_nameitem.children = null})if (!formData || !formData.group_id) {this.product_map = resp.data} else {this.product_map = [this.transformData(formData.group_id, formData.group_name, formData.staff_id, formData.company_name, false)]this.formData.longTitle = formData.group_namethis.formData.label = formData.company_namethis.formData.group_id = formData.group_idthis.checkRroduct = formData.staff_idthis.checkRroductT = formData.staff_id}this.product_mapTemp = resp.data}} else {this.$Message.error(resp.result_msg)}})},// 多选逻辑handleEditTreeDataMuti(formData) {this.$http.operation.queryTenantByLevel().then(resp => {if (resp && resp.result_code == '0') {if (resp.data.length == 0) {this.$http.operation.queryTenantByLike({ staff_id: this.userInfo.staff_id }).then(resp => {if (resp && resp.result_code == '0') {resp.data.map(item => {item.id = item.staff_iditem.label = item.company_nameitem.longTitle = item.company_nameitem.children = null})const dataT = JSON.parse(JSON.stringify(this.handleTreeById(formData, true)))this.product_map = dataTthis.checkRroduct = formData.map(item => item.staff_id)this.formData.longTitle = formData.map(item => item.group_name).join(',')this.product_mapTemp = resp.data} else {this.$Message.error(resp.result_msg)}})} else {resp.data.map(item => {item.id = item.staff_iditem.label = item.company_nameitem.longTitle = item.company_nameitem.children = null})const dataT = JSON.parse(JSON.stringify(this.handleTreeById(formData, true)))this.product_map = dataTthis.checkRroduct = resp.data.map(item => item.staff_id)this.formData.longTitle = resp.data.map(item => item.group_name)this.product_mapTemp = resp.data}} else {this.$Message.error(resp.result_msg)}})},initTreeData() {this.$http.operation.queryTenantByLevel().then(resp => {if (resp && resp.result_code == '0') {if (resp.data.length == 0) {this.$http.operation.queryTenantByLike({ staff_id: this.userInfo.staff_id }).then(resp => {if (resp && resp.result_code == '0') {resp.data.map(item => {item.id = item.staff_iditem.label = item.company_nameitem.longTitle = item.company_nameitem.children = null})this.product_map = resp.datathis.product_mapTemp = resp.data} else {this.$Message.error(resp.result_msg)}})} else {resp.data.map(item => {item.id = item.staff_iditem.label = item.company_nameitem.longTitle = item.company_nameitem.children = null})this.product_map = resp.datathis.product_mapTemp = resp.data}} else {this.$Message.error(resp.result_msg)}})},toSelectProduct(val) {if (this.clearT && this.type != 'A') {this.$Modal.confirm({title: '确认',content: '是否要改变客户单位,后续数据将被清空?',onOk: () => {if (val.disabled) {this.$nextTick(() => {this.checkRroduct = null})return}if (val.group_id) {this.formData.group_id = val.group_id + '/' + val.idthis.formData.parent_id = val.id} else {this.formData.group_id = val.idthis.formData.parent_id = val.id}this.formData.label = val.labelthis.formData.longTitle = val.longTitlethis.$emit('getCheckRroduct', this.formData, this.indexTTT)},onCancel: () => {this.checkRroduct = this.checkRroductTthis.$Message.info('取消 ')}})} else {if (val.disabled) {this.$nextTick(() => {this.checkRroduct = null})return}if (val.group_id) {this.formData.group_id = val.group_id + '/' + val.idthis.formData.parent_id = val.id} else {this.formData.group_id = val.idthis.formData.parent_id = val.id}this.formData.label = val.labelthis.formData.longTitle = val.longTitlethis.$emit('getCheckRroduct', this.formData, this.indexTTT)}},asyncOptions({ action, parentNode, searchQuery, callback }) {// console.log(action, 1)// console.log('isAsync', this.isAsync)if (action == 'ASYNC_SEARCH') {this.searchQuery = searchQueryclearTimeout(this.timer)this.timer = setTimeout(() => {this.$http.operation.queryTenantByLike({ company_name: this.searchQuery }).then(resp => {if (resp && resp.result_code == '0') {resp.data.map(item => {item.id = item.staff_iditem.label = item.company_name})const dataT = JSON.parse(JSON.stringify(this.handleTreeById(resp.data)))this.dataT = dataTcallback(null, dataT)} else {this.$Message.error(resp.result_msg)}})this.timer = null}, 1000)} else {callback(null, this.dataT)}},loadOptions({ action, parentNode, searchQuery, callback }) {// console.log(action, 2)if (action == 'LOAD_CHILDREN_OPTIONS') {this.$http.operation.queryTenantByLevel({ parent_id: parentNode.id }).then(resp => {if (resp && resp.result_code == '0') {resp.data.map(item => {item.id = item.staff_iditem.label = item.company_nameitem.longTitle = parentNode.longTitle + ' / ' + item.company_nameitem.children = null})parentNode.children = resp.datacallback()} else {this.$Message.error(resp.result_msg)}})}},handleTreeById(data, flag) {const tree = []const dataT = data.map(item => String(item.staff_id))// console.log('dataT: ', dataT)data.forEach(item => {const groupId = item.group_id.split('/')const groupName = item.group_name.split('/')let currentLevel = treegroupId.forEach((id, index) => {const existingNode = currentLevel.find(node => node.id === id)if (existingNode) {currentLevel = existingNode.children} else {const newNode = {id,label: groupName[index],group_id: groupId.slice(0, index).join('/'),longTitle: groupName.slice(0, index + 1).join('/'),children: [],disabled: flag ? false : !dataT.includes(id)}currentLevel.push(newNode)currentLevel = newNode.children}})})// 遍历tree并删除children为空数组的项function pruneEmptyChildren(nodes) {return nodes.filter(node => {if (node.children && node.children.length === 0) {delete node.children // 删除children属性return true // 保留这个节点,因为它可能还有其他有用的属性}if (node.children) {pruneEmptyChildren(node.children) // 递归处理子节点}return true // 保留这个节点})}// 在完成树的构建后,调用pruneEmptyChildren函数pruneEmptyChildren(tree)return tree},searchChange(val) {// if (!val) {//   this.isAsync = false//   this.expandLevel = 0//   this.product_map = JSON.parse(JSON.stringify(this.product_mapTemp))// } else {//   this.isAsync = true//   this.expandLevel = Infinity// }},// 输入时打开异步,下拉open/close关闭异步treeKeydown() {this.isAsync = truethis.expandLevel = Infinity},treeKeyup(e) {// if (!e.target.value) {//   this.isAsync = false//   this.expandLevel = 0// }},itemopen() {this.tooltipDisabled = truethis.isAsync = falsethis.expandLevel = 0this.product_map = JSON.parse(JSON.stringify(this.product_mapTemp))},itemClose() {this.isAsync = falsethis.tooltipDisabled = !this.checkRroductthis.expandLevel = 0},transformData(groupId, groupName, staff_id, name, flag) {const groups = groupId.split('/')const names = groupName.split('/')// 检查groupId和groupName的分割是否匹配if (groups.length !== names.length) {throw new Error('groupId和groupName的分割不匹配')}// 递归函数来构建树形结构function buildTree(index) {if (flag && index >= groups.length) {// 当到达叶子节点时,添加额外的staff信息return {id: staff_id,label: name,longTitle: `${names.slice(0, index).join(' / ')} / ${name}`,children: []}} else if (index >= groups.length) {return null}const currentGroupId = groups[index]const currentGroupName = names[index]const longTitle = index === 0 ? currentGroupName : `${names.slice(0, index + 1).join(' / ')}`const child = buildTree(index + 1) // 递归构建子节点return {id: Number(currentGroupId),label: currentGroupName,longTitle: longTitle,children: child ? [child] : flag ? null : [] // 如果有子节点,则放入数组中}}// 从根节点开始构建树const root = buildTree(0)return root}}
}
</script><style lang="scss" scoped>
.labelClass {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;color: #333;
}
.treeClass {::v-deep .vue-treeselect__placeholder {color: black;}
}.is-disabled {/* 设置禁用选项的样式 */color: #ccc;cursor: not-allowed;/* 可以添加更多样式 */
}
</style>

后记: 附上vue-treeselect的组件样式修改

// 选择框的样式
::v-deep .vue-treeselect__control {background-color: rgb(10, 19, 33) !important;border: rgb(10, 19, 33);
}
// 下拉框的样式
// ::v-deep .vue-treeselect__option {
//   color: #2d8cf0;
// }
// 选中项的样式
::v-deep .vue-treeselect__single-value {color: #2d8cf0;
}
// 默认提示语的样式
::v-deep .vue-treeselect__placeholder {color: #2d8cf0;
}

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

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

相关文章

PUBG下载

https://www.pubgmobile.com/HK/events.shtml?page1&#xff08;手机版&#xff09; https://steam2.ssyxjs.cn/gameStore/detail12/2204?plan%E7%BB%9D%E5%9C%B0%E6%B1%82%E7%94%9F-18&e_creative88906878234&e_keywordid784021409904&bd_vid843425054508232313…

【Qt之·控件·样式表】

系列文章目录 文章目录 前言一、Qt样式表的基础知识1.1 Qt样式表的定义和语法规则1.2 Qt样式表中的选择器和属性1.2.1 盒子模型1.2.2 border 1.3 Qt样式表中的伪类和伪元素 二、编写基本的Qt样式表2.1 在Qt应用程序中引入样式表文件的方式2.2 设置基本的背景色、字体样式等 三、…

MacOs安装pyenv环境

pyenv介绍 Pyenv 是一个流行的 Python 版本管理工具&#xff0c;它允许你在同一台机器上安装和切换不同版本的 Python。Pyenv 的主要作用包括&#xff1a; 多版本管理: 允许你在同一台计算机上安装多个版本的 Python&#xff0c;包括官方版本、开发版本和各种发行版。这对于测试…

知识图谱与知识表示:人工智能的基石

知识图谱与知识表示&#xff1a;人工智能的基石 一、知识图谱&#xff1a;连接数据的桥梁1.1 知识图谱的构成1.2 知识图谱的应用 二、知识表示&#xff1a;AI的推理基础2.1 知识表示的定义2.2 知识表示的形式 三、从符号表示到向量表示3.1 符号表示与向量表示3.2 向量表示的优势…

搭建企业级DNS服务器真实案例精讲

搭建企业级DNS服务器真实案例精讲 1----3-2-1.1.搭建DNS服务服务器为公司的多个域名提供解析.M 2----3-2-1.2格建DNS服务服务器为公司的客不域名提供解析补 3----3-2-1.3.格建DNS服务服务器为公司的多个域名提供解析扣 4----3-2-1.4.搭建DNS服务服务器为公司的多个域名提供解析…

JAVA: Spring Boot加载 Shiro 配置 >>找不到 SecurityManager

在 Spring Boot 应用中集成和配置 Apache Shiro 通常涉及创建一个配置类来设置 SecurityManager&#xff0c;以及定义 Shiro 的 Web 支持和必要的安全策略。下面是使用 Spring Boot 配置 Apache Shiro 的步骤&#xff1a; ### 1. 添加依赖 首先&#xff0c;确保在你的 pom.xml…

跟我学C++中级篇——零长度数组

一、零长度数组 最初使用零长度数组是在串口通信和网络通信中使用的&#xff0c;它类似于下面的代码&#xff1a; struct Data {int a;char c;char buf[0]; };零长度数组又叫柔性数组&#xff0c;这个非常贴切。它早期是GNU的一个扩展&#xff0c;后来在C99中也进行了支持&am…

【经典面试题】JavaScript中的异步操作与回调地狱解决方法

JavaScript中的异步操作与回调地狱解决方法 在现代的Web开发中&#xff0c;JavaScript扮演着极为重要的角色&#xff0c;尤其是在处理网络请求、文件操作或者任何可能耗费时间的操作时。为了不阻塞程序的执行&#xff0c;JavaScript 提供了异步编程模型。本文将介绍JavaScript…

vue3 使用pinia -- vue2 vuex的plus版

接入状态store 即 vuex 呃(⊙﹏⊙)vuex这里可以略过了&#xff0c;我在研究完后&#xff0c;才发现vue3出来个pinia&#xff0c;是vuex的升级&#xff0c;体积更小更省事&#xff0c;我不删这里了&#xff0c;单纯记录下&#x1f642; --pinia用法下面有写哦 ① 执行 npm insta…

C# 实现格式化文本导入到Excel

目录 需求 Excel 的文本文件导入功能 范例运行环境 配置Office DCOM 实现 组件库引入 OpenTextToExcelFile 代码 调用 小结 需求 在一些导入功能里&#xff0c;甲方经常会给我们一些格式化的文本&#xff0c;类似 CSV 那样的纯文本。比如有关质量监督的标准文件&…

LangChain 入门6 magic不同格式文件的读取

概述&#xff1a; 除了原始文本数据&#xff0c;可能还希望从其他文件类型&#xff08;如PowerPoint演示文稿或PDF&#xff09;中提取信息。 可以使用LangChain文档加载程序将文件解析为可以输入LLM的文本格式。 基于MIME类型的解析 数据加载 import requestsresponse req…

如何理解和实现二分查找:一篇完整的解析

二分查找的基本思想 二分查找的核心思想是比较数组的中间元素与目标值。根据比较结果&#xff0c;可以排除一半的搜索空间。具体步骤如下&#xff1a; 初始化指针&#xff1a;设置两个指针&#xff0c;left 指向数组的开始位置&#xff0c;right 指向数组的结束位置。 循环搜索…

手写线程池|C语言版(二)|定义线程池的结构、创建线程池实例

文章目录 定义线程池结构任务结构体定义线程池结构体 组织头文件创建线程池实例函数原型定义线程池创建函数实现初始化线程池结构体指针初始化线程池结构体的各类参数 定义线程池的结构C代码创建线程池总体C代码 本文中&#xff0c;我们将创建线程池的结构体&#xff0c;该结构…

TCP/IP和HTTP协议

TCP/IP OSI 七层模型在提出时的出发点是基于标准化的考虑&#xff0c;而没有考虑到具体的市场需求&#xff0c;使得该模型结构复杂&#xff0c;部分功能冗余&#xff0c;因而完全实现 OSI 参考模型的系统不多。而 TCP/IP 参考模型直接面向市场需求&#xff0c;实现起来也比较…

一文掌握:Clipboard API ,让前端顺畅操作剪贴板,无论怎么复制,都显示你网站信息。

一、Clipboard API是什么 Clipboard API 是一个 Web API&#xff0c;它提供了一种在网页上读取和写入剪贴板内容的方式。通过 Clipboard API&#xff0c;网页可以访问用户的剪贴板&#xff0c;从中读取文本、图像或其他数据&#xff0c;并且可以将数据写入剪贴板&#xff0c;以…

FFmpeg基础知识详解:音频视频处理的强大工具

FFmpeg&#xff0c;这个强大的开源多媒体框架&#xff0c;已经成为全球范围内音频、视频处理和流媒体传输领域的基石。它集合了音频解码、编码、转码、混合、抓取、流化等多种功能于一身&#xff0c;几乎能满足任何与音视频处理相关的技术需求。本文将带你走进FFmpeg&#xff0…

2024五一杯C题思路代码文章成品分享:煤矿深部开采冲击地压危险预测

提供的数据分为五类&#xff1a; A:正常工作数据 B:前兆特征数据 C:干扰信号数据 D:传感器断线数据 E:工作面休息数据 任务细节&#xff1a; 任务1&#xff1a; 分析含干扰的电磁辐射和声发射信号&#xff0c;识别干扰信号的特征&#xff0c;并利用这些特征在特定时间段…

安装Kuboard管理k8s

一、Kuboard 介绍 Kuboard 是一款免费的 Kubernetes 管理工具,提供了丰富的功能,结合已有或新建的代码仓库、镜像仓库、CI/CD工具等,可以便捷的搭建一个生产可用的 Kubernetes 容器云平台,轻松管理和运行云原生应用。您也可以直接将 Kuboard 安装到现有的 Kubernetes 集群…

计算机毕业设计python_django宠物领养系统z6rfy

本宠物领养系统主要包括两大功能模块&#xff0c;即管理员模块、用户模块。下面将对这两个大功能进行具体功能需求分析。 &#xff08;1&#xff09;管理员&#xff1a;管理员登录后主要功能包括个人中心、用户管理、送养宠物管理、地区类型管理、失信黑名单管理、申请领养管理…

深入解析Jackson的ObjectMapper:核心功能与方法指南

com.fasterxml.jackson.databind.ObjectMapper 是Jackson库的核心类&#xff0c;负责JSON序列化与反序列化的重任。本文旨在详细介绍其成员属性和方法&#xff0c;帮助开发者更好地利用Jackson进行Java对象与JSON数据之间的转换操作。 初始化与配置 构造与复制 默认构造函数…