输入搜索、分组展示选项、下拉选取，el-select 实现：即输入关键字检索，返回分组选项，选取跳转到相应内容页 —— VUE 项目-全局模糊检索
后端数据代码写于下一篇：输入搜索、分组展示选项、下拉选取，全局跳转页，el-select 实现 —— 后端数据处理代码，抛砖引玉展思路
【效果图】：分组展示选项 【去界面操作感受一下】—> 便捷简洁的企业官网
【录制效果视频展示】：
菜单栏-快速检索1
【流程】：
（1）读取目标数据，如果是多个，需要多次读取；
（2）对数据进行分组，放入特定分组数据结构；
（3）各分组，做相应设置；
（4）数据组装到 el-select 控件；
（5）点击选项，跳转到相应位置。现将关键代码及结构附于下方：
1. 分组数据结构示例：
（1）标准结构示例：
groupSelectOptions2: [{id: 1,label: '超期',options: [{value: 'cqwbj',label: '超期未办结'},{value: 'ycq',label: '已超期'}]},{id: 2,label: '按天',options: [{value: 't1',label: '1天'},{value: 't2',label: '2天'},{value: 't3',label: '3天'}]},{id: 3,label: '按小时',options: [{value: 'h1',label: '1小时'},{value: 'h2',label: '2小时'}]}]（2）项目数据结构示例：
主要的就 label 和 srcPath 这两个属性（其余省略）：label，用于显示；srcPath，存储选取跳转的 url 地址。
[{label:'',options:[{srcPath: ''}]},
]2. 封装 el-select 成组件：
<template><div style="height: 15px; justify-content: center; align-items: center;"><template><el-selectv-model="innerValue"filterable:remote="true":likeQuery="false"@change="changeSelect":clearable="clearable":multiple="multiple":remote-method="fetchOptions"size="small"popper-class="productGroupSelector":placeholder="placeholder"><el-option-group class="productGroupSelector-group" v-for="group in localOptions" :key="group.label" :label="group.label"><div style="" v-if="multiple"><div style=""><el-checkbox v-model="group.checked" @change="selectAll($event, group.id)" :indeterminate="group.isIndeterminate"></el-checkbox></div><div><el-optionclass="productGroupSelector-option"v-for="item in group.options":key="item.value":label="item.label":value="item"></el-option></div></div><div v-else><el-optionclass="productGroupSelector-option"v-for="(item,index) in group.options":key="index":label="item.label":value="item"></el-option></div></el-option-group></el-select></template></div>
</template>3. javascript 和 css
<script>import $ from 'jquery';
import {getRequest} from "@/api/api";
export default {name: 'LiloGroupSelect',model: {prop: 'value',event: 'change'},props: {value: {type: [String, Array],default: () => []},options: {type: Array,default: () => []},placeholder: {type: String,default: '请选择'},multiple: {type: Boolean,default: false},clearable: {type: Boolean,default: false},collapseTags: {type: Boolean,default: false},likeQuery: {type: Boolean,default: false},searchApi: {type: String,default: '' // 后端搜索API地址}},data() {return {innerValue: this.value,inputValue: '' ,// 添加这一行来定义 inputValueselectedOption: '',// searchQuery: '',filteredOptions: [],loading: false,allOptions: [], // 存储所有后端返回的选项，用于筛选localOptions: [...this.options], // 新增属性，用于存储当前选项groupSelectOptions2: [{id: 1,label: '超期',options: [{value: 'cqwbj',label: '超期未办结'},{value: 'ycq',label: '已超期'}]},{id: 2,label: '按天',options: [{value: 't1',label: '1天'},{value: 't2',label: '2天'}]},{id: 3,label: '按小时',options: [{value: 'h1',label: '1小时'},{value: 'h2',label: '2小时'}]}],isDropdownVisible: false, // 控制下拉列表的显示状态(默认收起)隐藏};},mounted() {this.innerValue = this.value;this.allOptions = [...this.options, ...this.groupSelectOptions2]; // 初始化所有选项this.filteredOptions = [...this.options]; // 初始化过滤后的选项},watch: {value(newVal, odlVal) {this.innerValue = newVal;console.log("当前输入值或选择值："+this.innerValue)},searchQuery(newVal) {console.log("监听查询输入："+newVal)this.fetchOptions(newVal);}},methods: {// 模拟后端查询，直接返回 groupSelectOptions2fetchOptions(queryString) {console.log("调用后端，请求数据....查询条件：【"+queryString+"】查询接口为："+this.searchApi)if (this.loading) return;this.loading = true;try {// 此处模拟为直接返回 groupSelectOptions2，实际应调用后端APIthis.allOptions = [...this.options, ...this.groupSelectOptions2]; // 合并原始选项和后端返回的选项（去重应在后端处理或此处额外处理）if(this.likeQuery) queryString = '%'+queryString+'%';this.getRequest(this.searchApi, {query: queryString}).then(resp =>{if (resp){this.localOptions = [...resp];// console.log("调用后端，返回结果："+JSON.stringify(resp))}});// this.localOptions = [...this.groupSelectOptions2]; // 更新 localOptions 而不是 this.options// this.filteredOptions = this.filterOptionsByQuery(this.allOptions, queryString);console.log("调用后端，数据处理结束。。。")} catch (error) {console.error('搜索失败:', error);} finally {this.loading = false;}},async query(queryString){if(this.likeQuery) queryString = '%'+queryString+'%';this.getRequest(this.searchApi, {query: queryString}).then(resp =>{if (resp){this.localOptions = [...resp];}});},filterOptionsByQuery(options, query) {return this.allOptions.reduce((acc, group) => {const filteredGroup = { ...group, options: group.options.filter(option => option.label.toLowerCase().includes(query.toLowerCase())) };// const filteredGroup = { ...group, options: group.options.filter(option => option.label.includes(query)) };if (filteredGroup.options.length > 0) {acc.push(filteredGroup);}return acc;}, []);},selectAll(val, id) {const selectOption = this.options.find(f => f.id === id);const arr = selectOption.options.map(m => m.value);if (val) {if((typeof this.innerValue !== 'object') || this.innerValue.constructor !== Array) {this.innerValue = [];}arr.forEach(item => {if (!this.innerValue.includes(item)) {this.innerValue.push(item);}});} else {this.innerValue.forEach((item, index) => {if (arr.includes(item)) {this.innerValue.splice(index, 1, '');}});}this.innerValue = this.innerValue.filter(f => f !== '');if (selectOption.checked) {selectOption.isIndeterminate = false;}this.$emit('change', this.innerValue);},changeSelect(val) {console.log("选项变更值："+val)if (this.multiple) {this.options.forEach(item => {const arr = item.options.map(m => m.value);item.isIndeterminate = arr.some(v => {return val.some(s => s === v);});item.checked = arr.every(v => {return val.some(s => s === v);});if (item.checked) {item.isIndeterminate = false;}});this.$emit('change', this.innerValue);} else {this.$emit('change', val);}},}
};
</script><style>.productGroupSelector {min-width: initial !important;width: 415px;}
</style><style lang="scss" scoped>
::v-deep {.el-select-group {width: 400px;display: flex;flex-wrap: wrap;justify-content: start;padding: 0px 10px;}.el-select-group__title {padding-left: 20px;font-size: 12px;}
}.productGroupSelector-group {padding-top: 5px;display: flex;// align-items: center;// flex-wrap: wrap;// width: 400px;padding-bottom: 5px;flex-direction: column;margin: 0 5px;// &:not(:last-child) {// border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);// }&::after {display: none;}
}.productGroupSelector-option {display: inline-flex;align-items: center;flex-wrap: wrap;
}// .productGroupSelector {
// .el-scrollbar__view .el-select-dropdown__list {
// display: flex;
// flex-wrap: wrap;
// justify-content: space-between;
// align-items: baseline;
// padding-top: 0;
// overflow-x: hidden;
// }
// .el-select-dropdown__wrap .el-scrollbar__wrap {
// max-height: 650px;
// }
// }
</style>4. 引用 LiloGroupSelect
<el-row :gutter="20" style="display: flex; border-radius: 5px;" ><el-col style="margin-bottom: 7px;"><lilo-group-select @change="groupSelectChange" :multiple="false" :likeQuery="true" :searchApi="'/api/list/search'" clearable placeholder="请输入快速搜索" ></lilo-group-select></el-col>
</el-row><script>
import LiloGroupSelect from "@/components/common/help/ElementUIGroupSelect";
export default {name: "***",components: {LiloGroupSelect},data(){return{}},methods: {groupSelectChange(option) {console.log("下拉选项选中："+JSON.stringify(option));if(option==''|| option.srcPath=='')return;// this.$router.push(option.srcPath);this.$router.push(option.srcPath).catch(err => {if (err.name !== 'NavigationDuplicated') {// 处理其他可能的错误console.error(err);}// 对于 NavigationDuplicated 错误，可以选择不做任何处理});},}
}
【效果图】：分组展示选项
参考资源：
1. Vue【原创】基于elementui的【分组多选下拉框group-select】
2. el-select选择器组件封装 下拉菜单 elementui
3. Vue Element 分组+多选+可搜索Select选择器实现示例
4. 基于Vue和Element-UI自定义分组以及分组全选Select 选择器
【项目实际效果】： 便捷简洁的企业官网
后端数据代码写于下一篇：输入搜索、分组展示选项、下拉选取，全局跳转页，el-select 实现 —— 后端数据处理代码，抛砖引玉展思路
相关文章：
输入搜索、分组展示选项、下拉选取，el-select 实现：即输入关键字检索，返回分组选项，选取跳转到相应内容页 —— VUE 项目-全局模糊检索
后端数据代码写于下一篇：输入搜索、分组展示选项、下拉选取，全局跳转页，el-select 实现 —— 后端数据处理代码，抛砖引玉展思路 【效果图】：分组展示选项 【去界面操作感受一下】—> 便捷简洁的企业官网 【录制效…...
Transformer为什么需要多头注意力（Multi-Head Attention）？如果没有多头会怎么样？
直接回答 关键点： Transformer 中的多头注意力（Multi-Head Attention）允许模型同时关注输入数据的不同方面，提升性能。 如果没有多头，模型可能无法捕捉复杂关系，表现会下降。 什么是多头注意力ÿ…...
VUE中的组件加载方式
加载方式有哪些，及如何进行选择 常规的静态引入是在组件初始化时就加载所有依赖的组件，而懒加载则是等到组件需要被渲染的时候才加载。 对于大型应用，可能会有很多组件，如果一开始都加载，可能会影响首屏加载时间。如…...
Linux自启动fastapi服务
步骤一 在/etc/systemd/system/文件夹下创建pyod.service（其中/path/to/conda/bin/activate要改为activate实际存放位置，例如miniconda的实际存放位置为/root/miniconda3/bin/activate） [Unit] DescriptionPyOD Uvicorn Service Afternetwo…...
C++与Python：两种编程语言的区别
C和Python都是当今编程领域广泛使用的语言，它们各有特色，适用于不同的开发场景。本文将从语言特性、性能、学习难度、应用领域等多个方面探讨C与Python之间的区别。 一、语言特性 类型系统： C：是一种静态类型语言…...
进程线程的创建、退出、回收
1. 进程相关知识点 1.1 进程创建 fork()： 功能：创建一个子进程。 返回值： 父进程中返回子进程的 PID。 子进程中返回 0。 失败返回 -1。 特点：子进程是父进程的副本，拥有独立的内存空间。 vfork()：…...
深度学习-6.用于计算机视觉的深度学习
Deep Learning - Lecture 6 Deep Learning for Computer Vision 简介深度学习在计算机视觉领域的发展时间线 语义分割语义分割系统的类型上采样层语义分割的 SegNet 架构软件中的SegNet 架构数据标注 目标检测与识别目标检测与识别问题两阶段和一阶段目标检测与识别两阶段检测器…...
低概率发生调用`pthread_cond_wait`的线程没有被唤醒
低概率发生调用pthread_cond_wait的线程没有被唤醒 背景： 你是否也踩过坑，在A线程调用pthread_cond_wait等待，在B线程调用pthread_cond_signal唤醒A线程进行工作处理，然后在某一次用户产品反馈中发现了低概率问题。A线程像是卡住…...
MATLAB学习之旅：数据插值与曲线拟合
在MATLAB的奇妙世界里，我们已经走过了一段又一段的学习旅程。从基础的语法和数据处理，到如今，我们即将踏入数据插值与曲线拟合这片充满魅力的领域。这个领域就像是魔法中的艺术创作，能够让我们根据现有的数据点，构建出更加丰富的曲线和曲面，从而更好地理解和描述数据背后…...
Python复习
第一章 Python概述 python特点 优点： 简单易学；开发效率高；典型的工具语言；强大丰富的模块库；优秀的跨平台； 缺点： 执行效率不高；代码不能加密；用缩进区分语句关系&…...
通信系统中物理层与网络层联系与区别
在通信系统中，物理层和网络层是OSI（开放系统互连）模型中的两个重要层次，分别位于协议栈的最底层和第三层。它们在功能、职责和实现方式上有显著的区别，但同时也在某些方面存在联系。以下是物理层与网络层的联系与区别的…...
go 错误处理 error
普通错误处理 // 包路径 package mainimport ("errors""fmt" )func sqrt(f1, f2 float64) (float64, error) {if f2 < 0 {return 0, errors.New("error: f2 < 0")}return f1 / f2, nil }func sqrt1(f1, f2 float64) {if re, err : sqrt(f…...
Redis 缓存穿透、击穿、雪崩：问题与解决方案
在使用 Redis 作为缓存中间件时，系统可能会面临一些常见的问题，如 缓存穿透、缓存击穿 和 缓存雪崩。这些问题如果不加以解决，可能会导致数据库压力过大、系统响应变慢甚至崩溃。本文将详细分析这三种问题的起因，并提供有效的解决…...
Spring容器初始化扩展点：ApplicationContextInitializer
目录 一、什么是ApplicationContextInitializer？ 1、核心作用2、适用场景 二、ApplicationContextInitializer的使用方式 1、实现ApplicationContextInitializer接口2、注册初始化器 三、ApplicationContextInitializer的执行时机四、实际应用案例 1、动态设置环境…...
冯·诺依曼体系结构、理解操作系统管理
在谈操作系统概念之前，先简单讲解一下冯诺伊曼体系结构，理解了在硬件层面上数据流的走向，这对后续的理解有很大的帮助。 文章目录 一.冯诺依曼结构冯诺依曼体系结构内存存在的意义 二.理解操作系统管理操作系统的作用管理的本质系统调用 一.…...
Linux初体验：从零开始掌握操作系统的发展与多样性
Linux初体验：从零开始掌握操作系统的发展与多样性 前言一、什么是Linux？1. Linux的定义2. Linux的组成 二、Linux的发展历史1. Unix的诞生2. Linux的诞生3. Linux的普及 三、Linux的发行版1. **Ubuntu**2. **CentOS**3. **Debian**4. **Fedora**5. **Arc…...
文心一言大模型的“三级跳”：从收费到免费再到开源，一场AI生态的重构实验
2025年2月，百度文心大模型接连抛出两枚“重磅炸弹”：4月1日起全面免费，6月30日正式开源文心大模型4.5系列。这一系列动作不仅颠覆了李彦宏此前坚持的“闭源优势论”13，更标志着中国AI大模型竞争进入了一个全新的阶段——从技术壁垒…...
技术教程 | 如何实现1v1音视频通话（含源码）
今天，给大家讲一下怎么实现1v1音视频通话，以下是教程内容： 开发环境 开发环境要求如下： 环境要求说明JDK 版本1.8.0 及以上版本Android API 版本API 21、Android Studio 5.0 及以上版本CPU架构ARM 64、ARMV7IDEAndroid Studio其…...
mysql实时同步到es
测试了多个方案同步，最终选择oceanu产品，底层基于Flink cdc 1、实时性能够保证，binlog量很大时也不产生延迟 2、配置SQL即可完成，操作上简单 下面示例mysql的100张分表实时同步到es，优化备注等文本字段的like查询 创…...
Linux-ubuntu系统移植之Uboot启动流程
Linux-ubuntu系统移植之Uboot启动流程 一，Uboot启动流程1.Uboot的两阶段1.1.第一阶段1.11.硬件初始化1.12.复制 U-Boot 到 RAM1.13.跳转到第二阶段 1.2.第二阶段1.21.C 语言环境初始化1.22. 硬件设备初始化1.23. 加载环境变量1.24. 显示启动信息1.25. 等待用户输入&…...
《Operating System Concepts》阅读笔记：p62-p75
《Operating System Concepts》学习第 10 天，p62-p75 总结，总计 14 页。 一、技术总结 1. system call (1) 定义 The primary interface between processes and the operating system, providing a means to invoke services made available by th…...
【Java场景题】MySQL死锁排查
大家好，今天XiXi给大家分享一个MySQL死锁排查的实验，文章主要有： 通过show engine innodb status，查看最近一次死锁信息开启innodb_print_all_deadlocks，在错误日志中能够记录所有死锁信息通过解析binlog日志定位死锁…...
JSON格式，C语言自己实现，以及直接调用库函数（一）
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。以下为你提供不同场景下常见的 JSON 格式示例。 1. 简单对象 JSON 对象是由键值对组成，用花括号 {} 包裹&…...
leetcode刷题第十三天——二叉树Ⅲ
本次刷题顺序是按照卡尔的代码随想录中给出的顺序 翻转二叉树 226. 翻转二叉树 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*//*总体思路就是，对于每一个结点&…...
spring boot知识点5
1.如何你有俩套配置环境，运行时如何选择 如果有俩套配置环境，则需要三个yml application.yml 用于配置你用那个配置环境 application-dev.yml 用于开发配置环境 application-prod.yml 用于发布配置环境 spring:profiles:active: prod # 指定当前激…...
bboss v7.3.5来袭！新增异地灾备机制和Kerberos认证机制，助力企业数据安全
ETL & 流批一体化框架 bboss v7.3.5 发布，多源输出插件增加为特定输出插件设置记录过滤功能；Elasticsearch 客户端新增异地双中心灾备机制，提升框架高可用性；Elasticsearch client 和 http 微服务框架增加对 Kerberos 认证支持…...
Android自带的省电模式主要做什么呢？
Android自带的省电模式主要做什么呢？ 省电模式支持的策略 LOCATION 灭屏后开启GPS待机省电模式 VIBRATION 关闭触摸震动和来电震动 ANIMATION 关闭动画 FULL_BACKUP 全备份 KEYVALUE_BACKUP 键值备份 NETWORK_FIREWALL 网络防火墙，限制 Doze …...
tp6上传文件大小超过了最大值+验证文件上传大小和格式函数
问题： 最近用tp6的文件上传方法上传文件时报文件过大错误。如下所示： $file $this->request->file(file);{"code": 1,"msg": "上传文件大小超过了最大值！","data": {"code": 1,&q…...
将RocketMQ集成到了Spring Boot项目中，实现站内信功能
1. 添加依赖 首先，在pom.xml中添加RocketMQ的依赖： <dependencies><!-- Spring Boot Starter Web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifac…...
Spring Boot文件上传
5.3.1文件上传 开发Web应用时，文件上传是很常见的一个需求浏览器通过表单形式将文件以流的形式传递给服务器，服务器再对上传的数据解析处理。下面我们通过一个案例讲解如何使用SpringBoot实现文件上传，具体步骤如下。 1.编写文件上传的表单…...
动态规划算法
动态规划算法模板 public class DynamicProgramming {public int solve(int n, int[] nums) {// Step 1: 初始化 dp 数组，dp[i] 表示从0到i的最优解int[] dp new int[n 1]; // Step 2: 设置初始条件，通常是dp数组的第一个元素dp[0] 0; // 假设从第0个…...
Python中常见库 PyTorch和Pydantic 讲解
PyTorch 简介 PyTorch 是一个开源的深度学习框架，由 Facebook 的 AI 研究团队开发。它提供了丰富的工具和库，用于构建和训练各种深度学习模型，如卷积神经网络（CNN）、循环神经网络（RNN）及其变体&…...
74. 搜索二维矩阵（LeetCode 热题 100）
题目来源; 74. 搜索二维矩阵 - 力扣（LeetCode） 题目内容： 给你一个满足下述两条属性的 m x n 整数矩阵： 每行中的整数从左到右按非严格递增顺序排列。 每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &am…...
高防服务器的适用场景有哪些？
高防服务器作为具有着较高防御能力的网络设备，可以抵御DDOS和CC等常见的网络攻击类型，保障企业服务的连续性和稳定性，那高防服务器的适用场景有哪些呢？ 对于大型的网站和电商平台来说，高流量的用户访问和数据信息让它们…...
HTTP与网络安全
一、HTTPS和HTTP有怎样的区别呢？HTTPS HTTP SSL/TLS（SSL或者TLS） HTTP：应用层 SSL/TLS：协议中间层 TCP：传输层 IP：网络层 HTTPS 是安全的HTTP，他的安全是由SSL或者TLS来决定的&a…...
UE地编材质世界对齐纹理旋转
帖子地址 https://forums.unrealengine.com/t/how-to-rotate-a-world-aligned-texture/32532/4世界对齐纹理本身不能改 自己创建了个函数 把世界对齐纹理的内容赋值粘贴 在纹理偏移里给值 不要局限0-1 给值给大一点...
SpringBoot使用Nacos进行application.yml配置管理
Nacos是阿里巴巴开源的一个微服务配置管理和服务发现的解决方案。它提供了动态服务发现、配置管理和 服务管理平台。Nacos的核心功能包括服务发现、配置管理和动态服务管理，使得微服务架构下的服务治理 变得简单高效。 Nacos的设计基于服务注册与发现、配置管理、动…...
JavaScript中的symbol类型的意义和使用
JavaScript 中的Symbol类型是 ES6（ECMAScript 2015）引入的一种原始数据类型，它表示独一无二的值。下面详细介绍 Symbol 的意义和使用方法。 意义 1. 避免属性名冲突 在 JavaScript 中，对象的属性名通常是字符串。当多个模块或者…...
C++ 设计模式-状态模式
火箭状态模式，涵盖发射、多级分离、入轨、返航、紧急状态等流程，以及状态间的转换逻辑： 状态设计 状态列表： IdleState（待机）PreparingState（准备）LaunchingState（发射中）FirstStageSeparatingState（一级分离）SecondStageSeparatingState（二级分离）ThirdStageSep…...
verilog基础知识
一，Verilog和VHDL区别 全世界高层次数字系统设计领域中，应用Verilog和VHDL的比率是80％和20％；这两种语言都是用于数字电路系统设计的硬件描述语言， 而且都已经是 IEEE 的标准。 VHDL 是美国军方组织开发的，VHDL1987年成为标准；Verilog 是由一个公司的私有财产转化而来，…...
14.8 Auto-GPT 自主智能体设计解密：构建具备长期记忆的智能决策系统
Auto-GPT 自主智能体设计解密：构建具备长期记忆的智能决策系统 关键词：Auto-GPT 架构设计、自主智能体开发、LangChain Agents、长期记忆系统、工具链编排 1. 自主智能体的核心架构设计 Auto-GPT 系统架构图解： #mermaid-svg-NuDU1eo6sXqhA6Ve {font-family:"trebuch…...
ubuntu安装docker docker/DockerHub 国内镜像源/加速列表【持续更新】
ubuntu安装docker & docker镜像代理【持续更新】 在Ubuntu上安装Docker，你可以选择两种主要方法：从Ubuntu的仓库安装，或者使用Docker的官方仓库安装。下面我会详细解释这两种方法。 方法一：从Ubuntu的仓库安装Docker 这种方…...
模拟实现分布式文件存储
Q1:如何解决海量数据存的下的问题 传统做法是在单机存储。但是随着数据变多，会遇到存储瓶颈。 单机纵向扩展：内存不够加内存，磁盘不够加磁盘。有上限限制，不能无限制加下去。 多机横向扩展：采用多台机器存储&#x…...
HW面试经验分享 | 北京蓝中研判岗
目录： 所面试的公司介绍 面试官的问题： 1、面试官先就是很常态化的让我做了一个自我介绍 2、自我介绍不错，听你讲熟悉TOP10漏洞，可以讲下自己熟悉哪些方面吗？ 3、sql注入原理可以讲下吗？ 4、sql注入绕WAF有…...
HarmonyOS学习第3天: 环境搭建开启鸿蒙开发新世界
一、引言 在数字化时代，操作系统作为连接用户与硬件设备的桥梁，其重要性不言而喻。HarmonyOS 作为华为公司推出的面向全场景的分布式操作系统，以其创新的理念和卓越的性能，正逐渐在全球范围内崭露头角。它打破了设备之间的界限&a…...
基于STM32与BD623x的电机控制实战——从零搭建无人机/机器人驱动系统
系列文章目录 1.元件基础 2.电路设计 3.PCB设计 4.元件焊接 5.板子调试 6.程序设计 7.算法学习 8.编写exe 9.检测标准 10.项目举例 11.职业规划 文章目录 一、为什么选择这两个芯片？1.1 STM32微控制器1.2 ROHM BD623x电机驱动 二、核心控制原理详解2.1 H桥驱动奥…...
【react18】如何使用useReducer和useContext来实现一个todoList功能
重点知识点就是使用useReducer来攻坚小型的公共状态管理，useImmerReducer来实现数据的不可变 实现效果 实现代码 项目工程结构 App.js文件 import logo from "./logo.svg"; import "./App.css"; import TodoLists from "./comps/TodoLi…...
Java多线程三：补充知识
精心整理了最新的面试资料，有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 Lambda表达式 简介： 希腊字母表中排序第十一位的字母，英语名称为Lambda避免匿名内部类定义过多其实质属于函数式编程的概念 为什么要使用lam…...
go WEB框架
推荐选型 https://chat.deepseek.com/a/chat/s/e6061607-8f33-4768-a5f0-8970cb1ffefd echo github：https://github.com/labstack/echo wiki：https://echo.labstack.com/docs/quick-start block：https://blog.csdn.net/qq_38105536/artic…...
】探索数据可视化的魔法世界)
【Python爬虫(27)】探索数据可视化的魔法世界
【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取ÿ…...