当前位置： 首页 > news >正文

鸿蒙OSUniApp 制作动态加载的瀑布流布局#三方框架 #Uniapp

news 来源：原创 2025/6/29 23:55:40

使用 UniApp 制作动态加载的瀑布流布局

前言

最近在开发一个小程序项目时，遇到了需要实现瀑布流布局的需求。众所周知，瀑布流布局在展示不规则尺寸内容（如图片、商品卡片等）时非常美观和实用。但在实际开发过程中，我发现普通的 flex 或 grid 布局很难满足这一需求，尤其是当需要配合上拉加载更多功能时，更是增加了实现难度。

经过一番摸索和实践，我总结出了一套在 UniApp 中实现动态加载瀑布流布局的方案，希望能给大家提供一些参考和帮助。

瀑布流布局原理

瀑布流布局的核心思想是：将元素按照自上而下的方式依次排列，但不是简单地一列一列排，而是始终将新元素放置在当前高度最小的那一列，这样就能保证各列高度尽可能接近，整体视觉效果更加协调。

技术实现思路

在 UniApp 中实现瀑布流布局，我尝试过以下几种方案：

  1. 使用原生 CSS 的 column 属性
  2. 使用 flex 布局模拟
  3. 使用 JavaScript 计算每个元素的位置

最终我选择了第三种方案，因为它具有最好的兼容性和最大的灵活性，特别是在处理动态加载数据时。

具体实现步骤

1. 页面结构设计

首先，我们需要创建一个基本的页面结构：

<template><view class="waterfall-container"><view class="waterfall-column" v-for="(column, columnIndex) in columns" :key="columnIndex"><view class="waterfall-item" v-for="(item, itemIndex) in column" :key="item.id"@click="handleItemClick(item)"><image class="item-image" :src="item.imageUrl" :style="{ height: item.height + 'rpx' }"mode="widthFix"@load="onImageLoad(item, columnIndex, itemIndex)"/><view class="item-content"><text class="item-title">{{ item.title }}</text><view class="item-info"><text class="item-price">¥{{ item.price }}</text><text class="item-likes">{{ item.likes }}赞</text></view></view></view></view></view>
</template>

2. 数据结构和状态管理

<script>
export default {data() {return {columns: [[], []], // 默认两列瀑布流columnHeights: [0, 0], // 记录每列的当前高度page: 1,loading: false,hasMore: true,dataList: []};},onLoad() {this.loadInitialData();},// 上拉加载更多onReachBottom() {if (this.hasMore && !this.loading) {this.loadMoreData();}},methods: {async loadInitialData() {this.loading = true;try {const result = await this.fetchData(1);this.dataList = result.data;this.arrangeItems(this.dataList);this.hasMore = result.hasMore;this.page = 1;} catch (error) {console.error('加载数据失败：', error);uni.showToast({title: '加载失败，请重试',icon: 'none'});} finally {this.loading = false;}},async loadMoreData() {if (this.loading) return;this.loading = true;uni.showLoading({title: '加载中...'});try {const nextPage = this.page + 1;const result = await this.fetchData(nextPage);if (result.data && result.data.length > 0) {this.dataList = [...this.dataList, ...result.data];this.arrangeItems(result.data);this.page = nextPage;this.hasMore = result.hasMore;} else {this.hasMore = false;}} catch (error) {console.error('加载更多数据失败：', error);uni.showToast({title: '加载失败，请重试',icon: 'none'});} finally {this.loading = false;uni.hideLoading();}},// 模拟从服务器获取数据fetchData(page) {return new Promise((resolve) => {setTimeout(() => {// 模拟数据，实际项目中应该从服务器获取const mockData = Array.from({ length: 10 }, (_, i) => ({id: page * 100 + i,title: `商品${page * 100 + i}`,price: Math.floor(Math.random() * 1000 + 100),likes: Math.floor(Math.random() * 1000),imageUrl: `https://picsum.photos/200/300?random=${page * 100 + i}`,height: Math.floor(Math.random() * 200 + 200) // 随机高度，让瀑布流效果更明显}));resolve({data: mockData,hasMore: page < 5 // 模拟只有5页数据});}, 1000);});},// 核心算法：将新项目添加到高度最小的列中arrangeItems(items) {items.forEach(item => {// 找出当前高度最小的列const minHeightIndex = this.columnHeights.indexOf(Math.min(...this.columnHeights));// 将项目添加到该列this.columns[minHeightIndex].push(item);// 更新该列的高度（这里用item.height加上内容区域的估计高度）this.columnHeights[minHeightIndex] += (item.height + 120); // 120是内容区域的估计高度});},// 图片加载完成后，调整列高度计算onImageLoad(item, columnIndex, itemIndex) {// 这里可以根据实际加载后的图片高度重新计算列高度// 真实项目中可能需要获取图片实际渲染高度console.log('图片加载完成', item.id);},handleItemClick(item) {uni.navigateTo({url: `/pages/detail/detail?id=${item.id}`});}}
};
</script>

3. 样式设计

<style lang="scss">
.waterfall-container {display: flex;padding: 20rpx;box-sizing: border-box;background-color: #f5f5f5;
}.waterfall-column {flex: 1;display: flex;flex-direction: column;&:first-child {margin-right: 10rpx;}&:last-child {margin-left: 10rpx;}
}.waterfall-item {background-color: #ffffff;border-radius: 12rpx;margin-bottom: 20rpx;overflow: hidden;box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);transition: transform 0.3s;&:active {transform: scale(0.98);}
}.item-image {width: 100%;display: block;
}.item-content {padding: 16rpx;
}.item-title {font-size: 28rpx;color: #333;margin-bottom: 12rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;
}.item-info {display: flex;justify-content: space-between;align-items: center;
}.item-price {font-size: 32rpx;color: #ff4b2b;font-weight: bold;
}.item-likes {font-size: 24rpx;color: #999;
}
</style>

优化与进阶

1. 图片懒加载

为了优化性能，特别是在图片较多的情况下，我们可以实现图片的懒加载功能。UniApp提供了lazyLoad属性，配合scrollview可以很容易实现：

<image class="item-image" :src="item.imageUrl" :style="{ height: item.height + 'rpx' }"mode="widthFix"lazy-load@load="onImageLoad(item, columnIndex, itemIndex)"
/>

2. 列数动态调整

针对不同屏幕尺寸，我们可以动态调整瀑布流的列数：

data() {return {columns: [],columnHeights: [],columnCount: 2, // 默认列数// 其他数据...};
},
onLoad() {// 获取设备信息，动态设置列数const systemInfo = uni.getSystemInfoSync();// 如果是平板等大屏设备，可以显示更多列if (systemInfo.windowWidth > 768) {this.columnCount = 3;}// 初始化列数据this.columns = Array.from({ length: this.columnCount }, () => []);this.columnHeights = Array(this.columnCount).fill(0);this.loadInitialData();
}

3. 下拉刷新

结合UniApp的下拉刷新功能，我们可以很容易实现列表刷新：

// 页面配置
export default {enablePullDownRefresh: true,// ...其他配置
}// 方法实现
onPullDownRefresh() {this.resetAndReload();
},resetAndReload() {// 重置数据this.columns = Array.from({ length: this.columnCount }, () => []);this.columnHeights = Array(this.columnCount).fill(0);this.page = 1;this.hasMore = true;this.dataList = [];// 重新加载this.loadInitialData().then(() => {uni.stopPullDownRefresh();});
}

实际应用案例

我在一个电商类小程序的商品列表页面应用了这种瀑布流布局，效果非常好。用户反馈说浏览商品时比传统的列表更加舒适，能够在同一屏幕内看到更多不同的商品，提升了浏览效率。

特别是对于衣服、家居用品等视觉信息很重要的商品，瀑布流布局可以根据商品图片的实际比例来展示，避免了固定比例裁剪可能带来的信息丢失，商品展示效果更佳。

遇到的问题与解决方案

1. 图片加载速度不一致导致布局跳动

问题：由于网络原因，图片加载速度可能不一致，导致已计算好位置的元素在图片加载后发生位置变化。

解决方案：预设图片高度，或者使用骨架屏占位，在图片完全加载后再显示真实内容。

<view class="waterfall-item"><view v-if="!item.imageLoaded" class="skeleton-image" :style="{ height: item.height + 'rpx' }"></view><image v-elseclass="item-image" :src="item.imageUrl" :style="{ height: item.height + 'rpx' }"mode="widthFix"/><!-- 内容部分 -->
</view>

2. 性能优化

在数据量很大时，可能会出现性能问题。我的解决方案是：

  1. 使用虚拟列表，只渲染可见区域的元素
  2. 分批次添加数据，而不是一次性添加所有数据
  3. 对于复杂计算，使用防抖和节流技术
// 分批次添加数据
arrangeItemsInBatches(items) {const batchSize = 5;const totalItems = items.length;let processedCount = 0;const processBatch = () => {const batch = items.slice(processedCount, processedCount + batchSize);this.arrangeItems(batch);processedCount += batch.length;if (processedCount < totalItems) {setTimeout(processBatch, 50);}};processBatch();
}

总结

通过在UniApp中实现动态加载的瀑布流布局，我们可以为用户提供更好的视觉体验和浏览效率。这种布局特别适合展示不规则尺寸的内容，如图片、商品卡片等。

实现这种布局的关键在于：

  1. 正确计算每列的高度并动态分配新元素
  2. 处理好图片加载和元素高度计算的问题
  3. 结合动态加载实现无限滚动效果
  4. 针对性能问题进行优化

希望这篇文章对你在UniApp中实现瀑布流布局有所帮助。如果有任何问题或建议，欢迎在评论区交流讨论！

参考资料

  1. UniApp官方文档：https://uniapp.dcloud.io/
  2. 瀑布流布局原理：https://www.w3cplus.com/css/pure-css-create-masonry-layout.html

相关文章：

鸿蒙OSUniApp 制作动态加载的瀑布流布局#三方框架 #Uniapp

使用 UniApp 制作动态加载的瀑布流布局 前言 最近在开发一个小程序项目时&#xff0c;遇到了需要实现瀑布流布局的需求。众所周知&#xff0c;瀑布流布局在展示不规则尺寸内容&#xff08;如图片、商品卡片等&#xff09;时非常美观和实用。但在实际开发过程中&#xff0c;我…...

编程日记 2025/6/29 23:55:40

通用软件项目技术报告 - 导读II

现在，我们正式进入报告的第三个主要领域：3. 领域三：核心业务逻辑与算法实现。 连接: 我们已经讨论了如何存储数据（领域一）和如何设计 API 让外部或内部服务可以访问这些数据或触发操作（领域二）。现在，我们将深入应用程序的“心脏”——实际执行业务规则、进行计算和（…...

编程日记 2025/6/28 20:46:37

新能源汽车三电质量护盾：蓝光三维扫描技术显身手

在绿色低碳的潮流下&#xff0c;新能源汽车行业快速发展&#xff0c;车企们纷纷加速电气化转型。由于电动汽车动力系统构造与内燃机车辆的构造有很大不同&#xff0c;制造商及其供应商必须加快工程研发设计及生产&#xff0c;而这对质量保证过程提出了新的挑战。 对于新能源汽…...

编程日记 2025/6/28 23:34:43

针对已训练好的YOLOv8模型的优化策略

以下是针对已训练好的YOLOv8模型的优化策略&#xff0c;结合模型微调、结构改进、训练策略调整等方法&#xff0c;可进一步提升检测性能或适应特定场景需求&#xff1a; 一、超参数调优 学习率动态调整 初始学习率&#xff08;lr0&#xff09;&#xff1a;若模型收敛后仍有优化…...

编程日记 2025/6/28 12:58:33

AI 产业化浪潮：从生成智能到星载计算，中国如何重塑全球竞争格局

2025 年的科技版图上&#xff0c;人工智能正经历着从技术奇点到产业爆点的历史性跨越。当生成式 AI 突破实验室围墙走进千行百业&#xff0c;当智能体开始在数字世界自主决策&#xff0c;当卫星搭载的大模型在太空展开计算&#xff0c;一场由技术创新驱动的产业革命正在重塑全球…...

编程日记 2025/6/29 0:29:53

Python如何解决中文乱码

Python文件头部声明 # -*- coding: utf-8 -*- # 必须放在文件第一行或第二行中文字符串定义方式 # Python 3 chinese_str "中文" # 默认就是Unicode# Python 2 chinese_str u"中文" # 必须加u前缀字符串编码转换黄金法则 # 解码&#xff1a;字节串 …...

编程日记 2025/6/29 0:14:06

android studio导入项目

如果 gradle-8.0-bin.zip 没有下载成功 可以点击进入这个网站&#xff1a;https://services.gradle.org/distributions/ 找到和自己本版相同的gradle-8.0-bin.zip文件找到自己版本进行下载; 如果下载依赖失败, 可以手动下载依赖编译过程中的jar https://repo.maven.apache.org/…...

编程日记 2025/6/28 1:24:29

Android Studio Meerkat与Gradle构建工具升级实战指南

简介 Android Studio Meerkat和Gradle构建工具的升级将带来显著的性能提升和开发体验优化。在Android生态快速演进的2025年，开发者亟需掌握这些新特性以提升工作效率。本指南将从零开始，详细讲解如何升级Android Studio和Gradle构建工具，配置新特性，并提供实际应用场景的代…...

编程日记 2025/6/28 23:11:57

TCP/IP参考模型详解：从理论架构到实战应用

一、参考模型基础概念与分类 计算机网络参考模型是为解决网络通信标准化问题而设计的逻辑框架。在众多模型中&#xff0c;TCP/IP参考模型以其高实用性和广泛应用&#xff0c;成为现代网络架构的基石。该模型采用分层设计思想&#xff0c;将复杂的网络通信功能划分为多个层次&am…...

编程日记 2025/6/29 0:43:02

【Linux网络】网络层

网络层 在复杂的网络环境中确定一个合适的路径 IP 协议 IPV4 点分十进制[0,255].[0,255].[0,255].[0,255]IPV6 IP地址目标网格目标主机 基本概念 主机:配有IP地址,但是不进行路由控制的设备;路由器:即配有IP地址,又能进行路由控制;节点:主机和路由器的统称。 两个问题 路…...

编程日记 2025/6/29 23:52:05

FastAPI + OpenAI 模型 的 GitHub 项目结构模板

FastAPI OpenAI 模型 的 GitHub 项目结构模板&#xff0c;适合用作大模型&#xff08;如 GPT-4&#xff09; API 服务的基础框架。该模板包括了基本的项目结构、配置、文档以及与 OpenAI API 的交互方式。 项目结构 fastapi-openai-api/ ├── app/ │ ├── __init__.p…...

编程日记 2025/6/28 23:54:18

基于EFISH-SCB-RK3576/SAIL-RK3576的无人快递柜控制器技术方案

国产化替代J1900的智能化升级方案 一、硬件架构设计‌ ‌多模态感知模块‌ ‌智能识别单元‌&#xff1a; ‌双MIPI-CSI接口‌接入4K摄像头&#xff0c;NPU加速包裹条码识别&#xff08;速度>5件/秒&#xff0c;准确率>99.99%&#xff09;&#xff0c;支持破损检测&…...

编程日记 2025/6/29 0:15:12

Centos 上安装Klish（clish）的编译和测试总结

1&#xff0c;介绍 clish是一个类思科命令行补全与执行程序&#xff0c;它可以帮助程序员在nix操作系统上实现功能导引、命令补全、命令执行的程序。支持&#xff1f;&#xff0c;help, Tab按键。本文基于klish-2.2.0介绍编译和测试。 2&#xff0c;klish的编译 需要安装的库&…...

编程日记 2025/6/29 0:32:30

Android学习总结之Glide自定义三级缓存（面试篇）

一、三级缓存核心原理与设计 问题 1&#xff1a;为什么需要三级缓存&#xff1f;各层缓存的核心作用是什么&#xff1f; 回答核心 内存缓存&#xff1a;毫秒级快速响应&#xff0c;存储近期浏览的图片&#xff08;如滑动列表来回切换的图片&#xff09;&#xff0c;通过 LRU…...

编程日记 2025/6/28 23:44:29

管理Oracle Data Guard的最佳实践

Oracle Data Guard的中文名字叫数据卫士&#xff0c;顾名思义&#xff0c;它是生产库的一道保障。所以管理Data Guard是DBA的一项重要工作之一&#xff0c;管理Data Guard时主要有以下几个注意点需要引起重视。 备份库的归档日志积压 一般情况下&#xff0c;生产库的归档日志是…...

编程日记 2025/6/28 16:45:33

iOS WebView和WKWebView怎么调试?

iOS WebView调试 本教程将指导您如何使用WebDebugX调试iOS应用中的WebView内容&#xff0c;包括WKWebView和UIWebView。通过本教程&#xff0c;您将学习如何检查WebView中的HTML、CSS和JavaScript&#xff0c;以及如何解决常见的WebView调试问题。 准备工作 在开始调试iOS W…...

编程日记 2025/6/28 23:47:14

笔记本电脑打开网页很慢，一查ip地址网段不对怎么处理

我有一个笔记本&#xff0c;在家里连WIFI后获取到的ip地址网段不对&#xff0c;那么常规做法是手动去配置个静态IP和DNS&#xff0c;要知道笔记本IP地址默认采用的是DHCP&#xff0c;也就是动态获取ip地址。如果手动设置静态IP&#xff0c;也就是固定IP的话&#xff0c;你换个场…...

编程日记 2025/6/29 0:09:08

【更新】全国省市县-公开手机基站数据集（2006-2025.3）

手机基站是现代通信网络中的重要组成部分&#xff0c;它们为广泛的通信服务提供基础设施。随着数字化进程的不断推进&#xff0c;手机基站的建设与布局对优化网络质量和提升通信服务水平起着至关重要的作用&#xff0c;本分享数据可帮助分析移动通信网络的发展和优化。本次数据…...

编程日记 2025/6/28 5:16:22

iOS视频编码详细步骤（视频编码器，基于 VideoToolbox，支持硬件编码 H264/H265）

iOS视频编码详细步骤流程 1. 视频采集阶段 视频采集所使用的代码和之前的相同&#xff0c;所以不再过多进行赘述 初始化配置&#xff1a; 通过VideoCaptureConfig设置分辨率1920x1080、帧率30fps、像素格式kCVPixelFormatType_420YpCbCr8BiPlanarFullRange设置摄像头位置&am…...

编程日记 2025/6/28 23:20:12

行项目违反范围截止值

把允许负值打钩就可以&#xff0c;如果没有此字段&#xff0c;按照下面截图把屏幕格式放字段出来&#xff1b;字段放出来以后如果是灰色的话&#xff0c;就用SE16N调试模式修改字段值&#xff1b;...

编程日记 2025/6/29 0:09:07

Linux wlan 单频段 dual wifi创建

环境基础 TP LINK WN722N V1网卡linux 主机 查看设备是否支持双ap managed&#xff1a;客户端模式&#xff08;连接路由器/AP&#xff09;AP&#xff1a;接入点模式&#xff08;创建热点&#xff09;AP/VLAN&#xff1a;支持带VLAN标签的虚拟AP{ AP, mesh point, P2P-GO } &l…...

编程日记 2025/6/29 0:57:26

STC32G12K12实战：串口通信

STC32G12K128芯片写一个按键通过串口1发送字符串的程序。首先&#xff0c;确认芯片的串口1配置。STC32G系列通常使用UART1&#xff0c;相关的寄存器是P_SW1来选择引脚。默认情况下&#xff0c;UART1的TX是P3.1。 接下来是设置定时器作为波特率发生器。通常用定时器2&#xff0c…...

编程日记 2025/6/28 22:54:35

unity 鼠标更换指定图标

1.准备两张图 要求图片导入设置如下 将 Texture Type 改为 Cursor 确保 Read/Write Enabled 已勾选 取消勾选 Generate Mip Maps 将 Filter Mode 设为 Point (保持清晰边缘) 将 Compression 设为 None (无压缩) 2.创建脚本&#xff0c;把脚本挂到场景中 &#xff0c;该…...

编程日记 2025/6/29 0:06:59

会话管理中的cookie，以及浏览器操作cookie,在express中设置，删除，和获取cookie

会话管理中的 Cookie以及在浏览器和 Express 中操作 Cookie&#xff1a; &#x1f36a; 一、Cookie 在会话管理中的作用 ✅ Cookie 的定义&#xff1a; Cookie 是服务器发送到浏览器并保存在本地的小段文本数据&#xff0c;浏览器会在之后的请求中将这些数据回传给服务器。 …...

编程日记 2025/6/29 1:19:28

Mac的web服务器

最近用了个人觉得比较好用的集成环境。Flyenv - FlyEnv | 一体化全栈环境管理工具. 支持macOS / Windows / Linux 链接放在这了。 mac上安装&#xff1a; brew install flyenv 等着安装成功就好了 给个图。ollama也有...

编程日记 2025/6/29 0:57:34

数据可视化大屏——南方草牧商品交易所

代码综述 整体结构与用途 这是一段用于构建网页的 HTML 代码&#xff0c;结合引入的 JavaScript 和 CSS 文件&#xff0c;初步推测该网页是南方草牧商品交易所的相关页面&#xff0c;主要展示了与草牧商品交易相关的各类数据&#xff0c;包括产品挂牌数、成交量、会员信息等&…...

编程日记 2025/6/28 1:50:19

AIGC与数字媒体实验室解决方案分享

第1部分 概述 1.1 建设目标 1.深度融合AIGC技术&#xff0c;培养能够驾驭新质生产力的数字媒体人才 通过引入前沿的AIGC技术&#xff0c;确保学生能够接触到最先进的人工智能应用。教学内容理论和实践结合&#xff0c;让学生在实际操作中熟练掌握AIGC工具&#xff0c;生成高…...

编程日记 2025/6/28 23:18:02

Qwen3模型架构、训练方法梳理

qwen3炼丹真是全是技巧&#xff0c;下面来看看&#xff0c;仅供参考。 https://huggingface.co/Qwen https://modelscope.cn/organization/qwen https://github.com/QwenLM/Qwen3 模型架构 Dense 模型结构改进&#xff1a; GQA、SwiGLU、RoPE、RMSNorm with pre-normalization…...

编程日记 2025/6/28 23:11:51

MySQL 学习（九）bin log 与 redo log 的区别有哪些，为什么快速恢复使用 redo log 而不用 bin log？

目录 一、bin log 与 redo log 的区别1&#xff09;实现方式不同&#xff1a;2&#xff09;日志内容不同&#xff1a;3&#xff09;记录方式不同&#xff1a;4&#xff09;使用场合不同&#xff1a; 二、为什么快速恢复使用 redo log 而不用 bin log&#xff1f; 面试题&#x…...

编程日记 2025/6/29 1:03:39

【消息队列】RabbitMQ基本认识

目录 一、基本概念 1. 生产者&#xff08;Producer&#xff09; 2. 消费者&#xff08;Consumer&#xff09; 3. 队列&#xff08;Queue&#xff09; 4. 交换器&#xff08;Exchange&#xff09; 5. 绑定&#xff08;Binding&#xff09; 6. 路由键&#xff08;Routing …...

编程日记 2025/6/29 1:17:21

RabbitMQ 快速上手：安装配置与 HelloWorld 实践（二）

四、RabbitMQ 配置 4.1 用户及权限管理 在 RabbitMQ 中&#xff0c;用户管理是保障系统安全和正常运行的重要环节。通过合理的用户及权限设置&#xff0c;可以确保不同的应用或服务在使用 RabbitMQ 时&#xff0c;只能访问其被授权的资源&#xff0c;避免非法操作和数据泄露。…...

编程日记 2025/6/28 14:32:28

蓝桥杯 17. 修改数组

修改数组 原题目链接 题目描述 给定一个长度为 N 的数组 A [A1, A2, …, AN]&#xff0c;数组中可能包含重复的整数。 现在小明要按以下方法将其修改为没有重复整数的数组&#xff1a; 小明会依次修改 A2, A3, …, AN。 当修改 Ai 时&#xff0c;小明会检查 Ai 是否在 A…...

编程日记 2025/6/28 23:23:42

Redis内存淘汰策略和过期键删除策略有哪些？

Redis 提供 8 种内存淘汰策略&#xff0c;以下是详细解析及场景建议&#xff1a; 一、核心策略解析 noeviction (默认策略) 机制&#xff1a;内存满时拒绝新写入操作&#xff0c;返回错误优势&#xff1a;绝对数据安全场景&#xff1a;金融交易系统、医疗数据存储 allkeys-lr…...

编程日记 2025/6/29 0:22:55

基于 NanoDet 的工厂巡检机器人目标识别系统研究与实现​

摘要​ 本论文旨在设计并实现一个基于 NanoDet 模型的工厂巡检机器人目标识别系统。通过详细阐述数据集准备、模型训练、UI 界面构建以及系统部署的全过程&#xff0c;展示如何利用 NanoDet 模型的高效性和轻量化特点&#xff0c;结合合理的 UI 设计与数据集优化&#xff0c;使…...

编程日记 2025/6/29 0:34:35

深入解析Spring Security：JWT认证与授权实践

深入解析Spring Security&#xff1a;JWT认证与授权实践 引言 在现代Web应用中&#xff0c;安全性是至关重要的。Spring Security作为Spring生态中的安全框架&#xff0c;提供了强大的认证和授权功能。本文将重点介绍如何使用Spring Security结合JWT&#xff08;JSON Web Tok…...

编程日记 2025/6/29 0:18:24

《隐私计算：数据安全与隐私保护的新希望》

一、引言 在数字化时代&#xff0c;数据已成为企业和组织的核心资产。然而&#xff0c;数据的收集、存储和使用过程中面临着诸多隐私和安全挑战。隐私计算作为一种新兴技术&#xff0c;旨在解决数据隐私保护和数据共享之间的矛盾。本文将深入探讨隐私计算的基本概念、技术原理、…...

编程日记 2025/6/28 23:19:03

Elasticsearch索引设计与调优

一、分片策略设计 1.‌分片容量规划 单分片容量建议30GB（日志场景可放宽至100GB），避免超大分片引发查询延迟。分片总数计算公式：总数据量 / 30GB 1.2（20%余量应对未来增长）。主分片数创建后不可修改，副本分片数支持动态调整。2.‌分片分布优化 PUT logs-2025 { &qu…...

编程日记 2025/6/29 1:20:26

什么是im即时通讯？私有化im即时通讯软件优势是什么？

在当前企业高度关注数据主权的背景下&#xff0c;私有化IM即时通讯软件&#xff08;如BeeWorks&#xff09;的部署模式成为企业实现数据自主控制、规避外部风险的核心解决方案。以下是针对企业数据主权诉求的私有化IM软件优势深度解析&#xff1a; 一、数据主权诉求下的私有化I…...

编程日记 2025/6/28 23:35:55

【unity游戏开发——编辑器扩展】EditorWindow自定义unity窗口拓展

注意&#xff1a;考虑到编辑器扩展的内容比较多&#xff0c;我将编辑器扩展的内容分开&#xff0c;并全部整合放在【unity游戏开发——编辑器扩展】专栏里&#xff0c;感兴趣的小伙伴可以前往逐一查看学习。 文章目录 前言一、自定义窗口1、创建窗口类2、创建窗口对象3、显示窗…...

编程日记 2025/6/29 1:24:13

深入理解Java HotSpot中的即时编译

即时编译（Just-In-Time Compilation，简称JIT）是Java虚拟机（JVM）的核心技术之一，通过在运行时将字节码转换为本地机器码，显著提升了Java应用程序的性能。本文基于HotSpot JVM，详细探讨了JIT编译的工作原理、优化技术、日志分析以及最新的编译器发展，旨在帮助开发者更好…...

编程日记 2025/6/29 0:54:17

【教程】Docker方式本地部署Overleaf

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 目录 背景说明 下载仓库 初始化配置 修改监听IP和端口 自定义网站名称 修改数据存放位置 更换Docker源 更换Docker存储位置 启动Overleaf 创…...

编程日记 2025/6/29 8:52:11

解决docker alpine缺少字体的问题 Could not initialize class sun.awt.X11FontManager

制作的springboot项目镜像&#xff0c;缺少字体报错Could not initialize class sun.awt.X11FontManager 原因镜像中缺少字体 解决&#xff1a; 制作镜像时&#xff0c;添加字体库&#xff0c;Dockerfile文件 中添加如下内容 注意&#xff1a; jdk版本一定要使用&#xff0…...

编程日记 2025/6/29 8:34:42

深度解析智能体：从概念到应用的全方位洞察

在科技日新月异的当下&#xff0c;智能体已从人工智能的前沿概念逐渐走进大众视野&#xff0c;成为备受瞩目的焦点。那么&#xff0c;究竟何为智能体呢&#xff1f; 一、智能体的概念 智能体&#xff0c;简单来讲&#xff0c;可看作是“大模型 超级工具人”的有机融合。它能够…...

编程日记 2025/6/29 8:26:50

python 异步执行多个 python 命令

前提说明&#xff1a; 1. 有N套用 python 爬取客户不同网站上的评论的程序 2. 有一套用 python 将评论出成 Excel 报表的程序 新需求&#xff1a; 做一个总入口&#xff0c;异步同时爬不同网站评论&#xff0c;或同时出不同月份报表&#xff0c;或爬虫做报表同时做的 # -…...

编程日记 2025/6/29 5:07:38

Keil5 MDK 安装教程

## 简介 Keil MDK&#xff08;Microcontroller Development Kit&#xff09;是ARM开发的一款集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要用于ARM Cortex-M系列微控制器的开发。MDK包含了μVision IDE和调试器、ARM C/C编译器、中间件组件等工具。本教程将指导您完…...

编程日记 2025/6/29 19:42:47

Doris与ClickHouse深度比较

一、核心架构差异 分布式管理 Doris 采用 FE&#xff08;前端&#xff09;与 BE&#xff08;后端&#xff09;分离的 MPP 架构&#xff0c;FE 负责元数据管理和查询规划&#xff0c;BE 处理存储与计算&#xff0c;支持自动扩缩容和故障恢复。这种设计简化了集群管理&#xff0c…...

编程日记 2025/6/29 8:28:45

插入排序希尔排序

插入排序&希尔排序 插入排序&#xff1a;将数据整体当做一组&#xff0c;从头开始遍历&#xff0c;确保遍历完的子序列都是有序的&#xff1b; 希尔排序&#xff1a;基于插入排序&#xff0c;增加新的分组思想&#xff0c;对数据进行分组的插入排序。 平均时间复杂度、最快…...

编程日记 2025/6/28 21:04:01

windows文件共享另一台电脑资源管理器网络文件夹无法找到机器

找不到共享出来的文件夹 1 网络问题,明确两台机器是否同一局域网 2 明确两台机器在本地所选的网络类型是专用网络,还是公共网络,对应的防火墙是否关闭 3 smb协议没有启用 4 以上都设置完毕还是无法找到机器,使用ip访问 在资源管理器地址栏输入 \\<对方IP>&#xff08;…...

编程日记 2025/6/29 8:34:21

K8S Ingress 实现金丝雀(灰度)发布

假设有如下三个节点的 K8S 集群&#xff1a; ​ k8s31master 是控制节点 k8s31node1、k8s31node2 是工作节点 容器运行时是 containerd 一、场景分析 阅读本文&#xff0c;默认您已经安装了 Ingress Nginx。 1&#xff09;A/B 测试 A/B 测试基于用户请求的元信息将流量路由…...

编程日记 2025/6/29 3:14:14

Python笔记：在环境变量中增加了dll加载路径，python提示DLL加载失败

在环境变量中增加了dll加载路径&#xff0c;python提示DLL加载失败 1.问题描述 from PySide2 import QtCore 提示如下错误 ImportError: DLL load failed while importing QtCore: 找不到指定的模块。 2.问题原因 在Python3.8文档中的What’s New In Python 3.8找到如下说明…...

编程日记 2025/6/29 5:07:21