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

微信小程序uni-app+vue3实现局部上下拉刷新和scroll-view动态高度计算

微信小程序uni-app+vue3实现局部上下拉刷新和scroll-view动态高度计算

前言

在uni-app+vue3项目开发中,经常需要实现列表的局部上下拉刷新功能。由于网上相关教程较少且比较零散,本文将详细介绍如何使用scroll-view组件实现这一功能,包括动态高度计算、下拉刷新、上拉加载等完整实现。在这里插入图片描述

重要提示

⚠️ triggered状态管理是关键

  • triggered必须手动管理其true/false状态
  • 不正确的状态管理会导致下拉刷新卡住
  • 需要在适当的时机重置状态

核心实现思路

  1. 状态定义
// 下拉刷新相关状态
const triggered = ref(false)                 // 触发下拉刷新状态
const refresherEnabled = ref(true)           // 是否启用下拉刷新
  1. 关键事件处理
// 下拉过程中触发
const onPulling = () => {triggered.value = true  // 手动设置为true
}// 刷新结束时触发
const onRestore = () => {triggered.value = false  // 手动重置为false
}// 刷新中断时触发
const onAbort = () => {triggered.value = false  // 手动重置为false
}// 刷新数据处理
const refreshHistoryList = async () => {triggered.value = true  // 开始刷新时设置为truetry {// 执行刷新逻辑await loadData()} catch (err) {console.error('刷新失败:', err)} finally {triggered.value = false  // 完成后一定要设置为false}
}
  1. 组件配置
<scroll-view:refresher-enabled="refresherEnabled":refresher-triggered="triggered"@refresherrefresh="refreshHistoryList"@refresherpulling="onPulling"@refresherrestore="onRestore"@refresherabort="onAbort"
><!-- 列表内容 -->
</scroll-view>

注意事项

  1. 状态重置时机

    • 刷新完成时必须重置
    • 刷新中断时必须重置
    • 组件卸载时最好重置
  2. 常见问题

    • 忘记重置导致卡住
    • 重置时机不对导致异常
    • 多个事件重复设置状态
  3. 最佳实践

    • 使用try/finally确保重置
    • 统一状态管理位置
    • 添加适当的错误处理

快速开始

1. 基础配置

2. 组件结构

在template中创建scroll-view组件:

<template><scroll-view :style="{ height: scrollViewHeight }":scroll-y="true":refresher-enabled="refresherEnabled"@refresherrefresh="refreshHistoryList"@refresherpulling="onPulling"@scroll="roll":enable-passive="true":show-scrollbar="false"@refresherrestore="onRestore"@refresherabort="onAbort":refresher-triggered="triggered"ref="scrollView"><!-- 列表内容 --><view class="empty-state" v-show="!list.length">暂无数据</view><view v-for="(item, index) in list" :key="index"><!-- 列表项内容 --></view><up-loadmore v-if="list.length>0" :status="scrollStatus" @loadmore="loadmore"/></scroll-view>
</template>

注意uwiewPlus组件库up-loadmore是通过@loadmore来触发@click的效果的。

3. 核心状态定义

属性/事件类型默认值必填说明
style.heightstring-设置scroll-view高度,不设置无法滚动
scroll-ybooleanfalse是否允许纵向滚动
scroll-xbooleanfalse是否允许横向滚动
refresher-enabledbooleanfalse是否开启下拉刷新功能
refresher-triggeredbooleanfalse当前下拉刷新状态
enable-passivebooleanfalse是否开启被动监听滚动事件
show-scrollbarbooleantrue是否显示滚动条
@refresherrefreshfunction-下拉刷新触发时的回调
@refresherpullingfunction-下拉过程中触发的回调
@refresherrestorefunction-下拉刷新复位时触发的回调
@refresherabortfunction-下拉刷新被中止时触发的回调
@scrollfunction-滚动时触发的回调函数
refstring-组件的引用标识
// 下拉刷新相关
const triggered = ref(false)                 // 触发下拉刷新状态
const refresherEnabled = ref(true)           // 是否启用下拉刷新
const currentScrollTop = ref(0)              // 当前滚动位置
const scrollViewHeight = ref('400rpx')       // scroll-view高度// 分页相关
const currentPage = ref(1)                   // 当前页码
const pageSize = ref(10)                     // 每页数量
const totalPage = ref(0)                     // 总页数
const scrollStatus = ref<string>('loadmore') // 滚动状态

4. 动态高度计算

onReady(() => {// 获取系统信息const systemInfo = uni.getSystemInfoSync()const windowHeight = systemInfo.windowHeight// 获取各元素高度const query = uni.createSelectorQuery()Promise.all([new Promise<number>(resolve => {query.select('.u-demo-block').boundingClientRect(data => {resolve(data?.height || 0)}).exec()}),// ... 获取其他元素高度]).then(([demoBlockHeight, titleHeight, uploadHeight]) => {// 计算scroll-view高度const scrollHeight = windowHeight - demoBlockHeight - titleHeight - uploadHeight - 40scrollViewHeight.value = `${scrollHeight}rpx`})
})

核心功能实现

1. 下拉刷新

// 下拉刷新处理
const refreshHistoryList = async () => {triggered.value = truecurrentPage.value = 1try {const res = await loadFirstPage()list.value = res.dataupdateLoadStatus()} catch (err) {console.error('刷新失败:', err)} finally {triggered.value = false}
}

2. 上拉加载

// 上拉加载更多
const loadmore = async () => {if (scrollStatus.value === 'noMore') returnscrollStatus.value = 'loading'try {const res = await loadMoreData(++currentPage.value)list.value.push(...res.data)updateLoadStatus()} catch (err) {console.error('加载失败:', err)scrollStatus.value = 'loadmore'}
}

3. 滚动事件处理

const roll = (e: any) => {currentScrollTop.value = e.detail.scrollTop// 控制下拉刷新启用状态refresherEnabled.value = e.detail.scrollTop < 50// 触底加载更多const scrollBottom = e.detail.scrollHeight - e.detail.scrollTop - e.detail.heightif (scrollBottom < 50 && scrollStatus.value === 'loadmore') {loadmore()}
}

注意事项

  1. 高度计算

    • 需要考虑所有固定元素的高度
    • 使用rpx单位确保跨设备兼容性
    • 预留适当边距避免内容被遮挡
  2. 性能优化

    • 使用enable-passive提升滚动性能
    • 合理控制刷新频率
    • 避免频繁触发加载更多
  3. 用户体验

    • 添加加载提示
    • 保持滚动位置
    • 合理控制刷新触发时机

加载更多组件使用

⚠️ up-loadmore组件使用说明

  1. 基础配置
<up-loadmore v-if="list.length>0" :status="scrollStatus" @loadmore="loadmore"loadmore-text="加载更多"
/>
  1. 状态管理
// 加载状态
const scrollStatus = ref<string>('loadmore') // 可选值: loadmore/loading/noMore// 加载更多处理
const loadmore = async () => {if (scrollStatus.value === 'noMore') returnscrollStatus.value = 'loading'  // 设置加载中状态try {const res = await loadMoreData(++currentPage.value)list.value.push(...res.data)// 更新加载状态if (currentPage.value >= totalPage.value) {scrollStatus.value = 'noMore'} else {scrollStatus.value = 'loadmore'}} catch (err) {console.error('加载失败:', err)scrollStatus.value = 'loadmore'}
}
  1. 触发方式
  • 通过@loadmore事件监听触发加载
  • 可以在scroll-view滚动到底部时自动触发
  • 也可以点击"加载更多"文本手动触发
  1. 状态说明
  • loadmore: 可以加载更多
  • loading: 正在加载中
  • noMore: 没有更多数据

完整示例

<scroll-view @scroll="roll":scroll-y="true"
><!-- 列表内容 --><view v-for="(item, index) in list" :key="index">{{ item }}</view><!-- 加载更多组件 --><up-loadmorev-if="list.length>0":status="scrollStatus"@loadmore="loadmore"loadmore-text="加载更多"/>
</scroll-view><script setup lang="ts">
const scrollStatus = ref('loadmore')
const currentPage = ref(1)
const list = ref([])// 滚动触底自动加载
const roll = (e: any) => {const scrollBottom = e.detail.scrollHeight - e.detail.scrollTop - e.detail.heightif (scrollBottom < 50 && scrollStatus.value === 'loadmore') {loadmore()}
}// 加载更多处理
const loadmore = async () => {if (scrollStatus.value === 'noMore') returnscrollStatus.value = 'loading'try {const res = await loadMoreData(currentPage.value++)list.value.push(...res.data)scrollStatus.value = res.hasMore ? 'loadmore' : 'noMore'} catch (err) {console.error('加载失败:', err)scrollStatus.value = 'loadmore'}
}
</script>

总结

通过本教程的学习,我们掌握了:

  1. scroll-view组件的基本使用
  2. 动态高度计算方法
  3. 下拉刷新实现
  4. 上拉加载更多功能
  5. 滚动位置维护

参考资料

  • 微信小程序官方文档
  • Vue3文档
    admore’ : ‘noMore’
    } catch (err) {
    console.error(‘加载失败:’, err)
    scrollStatus.value = ‘loadmore’
    }
    }

## 总结通过本教程的学习,我们掌握了:
1. scroll-view组件的基本使用
2. 动态高度计算方法
3. 下拉刷新实现
4. 上拉加载更多功能
5. 滚动位置维护## 参考资料
- [微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html)
- [Vue3文档](https://v3.cn.vuejs.org/)
- [uview-plus文档](https://uiadmin.net/uview-plus/) 

相关文章:

微信小程序uni-app+vue3实现局部上下拉刷新和scroll-view动态高度计算

微信小程序uni-appvue3实现局部上下拉刷新和scroll-view动态高度计算 前言 在uni-appvue3项目开发中,经常需要实现列表的局部上下拉刷新功能。由于网上相关教程较少且比较零散,本文将详细介绍如何使用scroll-view组件实现这一功能,包括动态高度计算、下拉刷新、上拉加载等完整…...

网络原理——HTTPS

一、什么是HTTPS 1.1 HTTPS的概念 HTTPS 也是⼀个应用层协议. 是在 HTTP 协议的基础上引入了一个加密层&#xff08;即HTTP SSL/TLS&#xff0c;SSL、TLS也是一个应用层协议&#xff0c;专门负责加密&#xff09; HTTP 协议内容都是按照文本的方式明文传输的. 这就导致在传输…...

数据结构之四:堆和二叉树

堆的实现:SData/Heap/heap.c Hera_Yc/bit_C_学习 - 码云 - 开源中国 树 树的概念 树&#xff1a;是一个非线性数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。 把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就…...

语音识别flask接口开发

要开发一个flask语音识别接口&#xff0c;首先要解决语音文件在网络中的传输问题&#xff0c;然后选识别算法进行识别 文章目录 1、以二进制文件流方式上次语音2、网页端长连接流式上传语音文件3、语音识别接口 1、以二进制文件流方式上次语音 python服务端代码&#xff0c;以…...

MISRA C2012学习笔记(10)-Rules 8.15

文章目录 8.15 控制流(Control flow)Rule 15.1 不应使用 goto 语句Rule 15.2 goto 语句仅允许跳到在同一函数中声明的稍后位置的标签Rule 15.3 goto 语句引用的标签必须在 goto 语句所在代码块或包含该代码块的上级代码块中声明Rule 15.4 最多只能有一个用于终止循环语句的 bre…...

《深入浅出HTTPS》读书笔记(16):消息验证码算法分类

MAC算法有两种形式&#xff0c;分别是CBC-MAC算法和HMAC算法。 CBC-MAC算法从块密码算法的CBC分组模式演变而来&#xff0c;简单地说就是最后一个密文分组的值就是MAC值。 HMAC&#xff08;Hash-based Message Authentication Code&#xff09;算法使用Hash算法作为加密基元&am…...

DAY168内网对抗-基石框架篇单域架构域内应用控制成员组成用户策略信息收集环境搭建

知识点&#xff1a; 1、基石框架篇-单域架构-权限控制-用户和网络 2、基石框架篇-单域架构-环境搭建-准备和加入 3、基石框架篇-单域架构-信息收集-手工和工具 1、工作组(局域网) 将不同的计算机按照功能分别列入不同的工作组。想要访问某个部门的资源&#xff0c;只要在“…...

如何实现 3D GPR的仿真模拟

通过ai问题生成得到的。 1 模型文件-MATLAB 在gprmax中模拟3D GPR工作&#xff0c;可以通过编写一个MATLAB脚本来创建几何文件&#xff0c;并使用gprmax的输入文件&#xff08;in文件&#xff09;来设置模拟参数。以下是一个简单的例子程序&#xff0c;展示了如何创建一个3D …...

k8s 之 Deployment

&#xff08;1&#xff09;Deployment 作用是确保 Pod 副本数量&#xff0c;能够保证 Pod 数量与期望值一样&#xff0c;会有自恢复功能。简洁地说&#xff1a;具有 水平扩展 / 收缩 功能。 可能好奇的是在 kubernetes 中是谁在执行这些控制器的&#xff0c;它就是 kube-contr…...

现代C++ 6 声明

文章目录 C 中的冲突声明规则1. **对应声明&#xff08;Corresponding Declarations&#xff09;**2. **对应函数重载&#xff08;Corresponding Function Overloads&#xff09;**3. **对应函数模板重载&#xff08;Corresponding Function Template Overloads&#xff09;**4…...

Spark区分应用程序 Application、作业Job、阶段Stage、任务Task

目录 一、Spark核心概念 1、应用程序Application 2、作业Job 3、阶段Stage 4、任务Task 二、示例 一、Spark核心概念 在Apache Spark中&#xff0c;有几个核心概念用于描述应用程序的执行流程和组件&#xff0c;包括应用程序 Application、作业Job、阶段Stage、任务Task…...

【WebRTC】Android SDK使用教学

文章目录 前言PeerConnectionFactoryPeerConnection 前言 最近在学习WebRTC的时候&#xff0c;发现只有JavaScript的API文档&#xff0c;找了很久没有找到Android相关的API文档&#xff0c;所以通过此片文章记录下在Android应用层如何使用WebRTC 本篇文章结合&#xff1a;【W…...

算法-字符串-8.字符串转换整数

一、题目 二、思路解析 1.思路&#xff1a; 依次遍历&#xff0c;查看当前字符是否在规定范围内 2.常用方法&#xff1a; 1.trim(),去字符串的首尾空字符 ss.trim(); 2.substring(beginIndex),截断字符串&#xff0c;得到新的字符串是[1,s.length()-1] ss.substring(1); 3.st…...

普通算法——一维前缀和

一维前缀和 题目链接&#xff1a;https://www.acwing.com/problem/content/797/ 题目描述&#xff1a; 输入一个长度为 n 的整数序列。接下来再输入 m 个询问&#xff0c;每个询问输入一对 l,r。对于每个询问&#xff0c;输出原序列中从第 l 个数到第 r 个数的和。 **什么是…...

【Elasticsearch】ES+MySQL实现迷糊搜索

1. 技术选型 使用 Elasticsearch (ES) 结合 MySQL 进行数据存储和查询&#xff0c;而不是直接从 MySQL 中进行查询&#xff0c;主要是为了弥补传统关系型数据库&#xff08;如 MySQL&#xff09;在处理大规模、高并发和复杂搜索查询时的性能瓶颈。具体来说&#xff0c;ES 与 My…...

MacOS编译webRTC源码小tip

简单记录一下&#xff0c;本人在编译webRTC时&#xff0c;碰到了一下比较烦人的问题&#xff0c;在MacOS终端下&#xff0c;搭建科学上网之后&#xff0c;chromium的depot_tools仓库成功拉下来了&#xff0c;紧接着&#xff0c;使用fetch以及gclient sync始终都返回curl相关的网…...

Android显示系统(05)- OpenGL ES - Shader绘制三角形(使用glsl文件)

Android显示系统&#xff08;02&#xff09;- OpenGL ES - 概述 Android显示系统&#xff08;03&#xff09;- OpenGL ES - GLSurfaceView的使用 Android显示系统&#xff08;04&#xff09;- OpenGL ES - Shader绘制三角形 Android显示系统&#xff08;05&#xff09;- OpenGL…...

深度学习小麦头检测-基于Faster-RCNN的小麦头检测——附项目源码

比赛描述 为了获得有关全世界麦田的大量准确数据,植物科学家使用“小麦头”(包含谷物的植物上的穗)的图像检测。这些图像用于估计不同品种的小麦头的密度和大小。但是,在室外野外图像中进行准确的小麦头检测可能在视觉上具有挑战性。密集的小麦植株经常重叠,并且风会使照片…...

成像报告撰写格式

成像报告撰写格式 实验人员&#xff1a; 实验时间&#xff1a; 实验地点&#xff1a; 实验目的&#xff1a; 1实验仪器 1.1相机 包括制造商&#xff0c;型号&#xff0c;面阵还是线阵&#xff0c;彩色还是黑白&#xff0c;图像尺寸&#xff0c;光学接口等。 1.2镜头 包…...

【数学建模】线性规划问题及Matlab求解

问题一 题目&#xff1a; 求解下列线性规划问题 解答&#xff1a; 先将题目中求最大值转化为求最小值&#xff0c;则有 我们就可以得到系数列向量: 我们对问题中所给出的不等式约束进行标准化则得到了 就有不等式约束条件下的变系数矩阵和常系数矩阵分别为&#xff1a; 等式…...

C# 事件(Event)

文章目录 前言1、 声明委托2、 声明事件3、 触发事件4、订阅和取消订阅事件5、示例展示示例一&#xff1a;基础的事件使用流程示例二&#xff1a;简单数值变化触发事件示例三&#xff1a;锅炉系统相关事件应用 前言 在 C# 中&#xff0c;事件&#xff08;Event&#xff09;是一…...

企业数字化转型:从爆品起步,迈向生态平台

在当今数字化浪潮席卷全球的时代&#xff0c;企业数字化转型已成为必然趋势。然而&#xff0c;这条转型之路该如何走呢&#xff1f; 企业数字化转型的路径设计&#xff0c;绝不仅仅是技术的升级换代&#xff0c;它需要综合考量多方面因素。一方面&#xff0c;要为实现战略目标做…...

Windows 安装 MySQL

1.下载 MySQL 安装包 访问&#xff1a;MySQL :: Download MySQL Installer选择适合的版本。推荐下载 MySQL Installer for Windows&#xff0c;该安装包包含所有必要的组件选择 Windows (x86, 32-bit), MSI Installer 或 Windows (x86, 64-bit), MSI Installer 2.运行安装程序…...

游戏引擎学习第37天

仓库 : https://gitee.com/mrxiao_com/2d_game 回顾目前的进展 一个简单的调试工具——位图加载器&#xff0c;用于加载存储在硬盘上的位图文件。这个工具将文件加载到内存中&#xff0c;并查看文件头部信息&#xff0c;确保其正确性。接着使用位图头中的偏移量来获取像素数据…...

非常简单实用的前后端分离项目-仓库管理系统(Springboot+Vue)part 4

三十三、出入库管理 Header.vue导一下,RecordController加一个 //将入库数据和原有数据相加吧//新增PostMapping("/save")public Result save(RequestBody Record record) {return recordService.save(record) ? Result.success() : Result.fail();} GoodsManage.v…...

知乎Java后台开发面试题及参考答案

请简述 TCP 的三次握手和四次挥手过程。 TCP(传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议。 三次握手过程 首先,客户端想要建立连接,会发送一个带有 SYN(同步序列号)标志的 TCP 报文段,这个报文段中还包含一个初始序列号(ISN,Initial Sequenc…...

Java中的String类用法详解

1.字符串拆分 可以把一个完整的字符串按照规定的分隔符拆分为若干个子字符串 String[] split(String regex) 将字符串全部拆分 String[] split(String regex,int limit) 将字符串以指定的格式拆分,拆分成limit组 实例:字符串的拆分处理 public class Main4 {public stat…...

mac电脑安装hadoop、hive等大数据组件

背景&#xff1a;用本地的Hadoop测试Java调用cmd命令 2024-12-08 13:48:19,826 WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable ls: .: No such file or directory解决方案&#xff1a…...

DHCP和DNS

DHCP&#xff08;动态主机配置协议&#xff09;和DNS&#xff08;域名系统&#xff09;是计算机网络中两个重要的协议&#xff0c;它们在网络的管理和使用中发挥着关键作用。 DHCP&#xff08;动态主机配置协议&#xff09; 基本功能 自动分配IP地址&#xff1a;DHCP允许网…...

Postman安装使用教程

Postman&#xff08;接口测试工具&#xff09; ①、介绍 Postman是一款支持http协议的接口调试与测试工具&#xff0c;它不仅可以调试简单的css、html、脚本等简单的网页基本信息&#xff0c;还可以发送几乎所有类型的HTTP请求。 ②、安装 Ⅰ、运行安装包/官网直搜 Ⅱ、创建…...

剖析千益畅行,共享旅游-卡,合规运营与技术赋能双驱下的旅游新篇

在数字化浪潮席卷各行各业的当下&#xff0c;旅游产业与共享经济模式深度融合&#xff0c;催生出旅游卡这类新兴产品。然而&#xff0c;市场乱象丛生&#xff0c;诸多打着 “共享” 幌子的旅游卡弊病百出&#xff0c;让从业者与消费者都深陷困扰。今天&#xff0c;咱们聚焦技术…...

信创改造-达梦数据库配置项 dm.ini 优化

设置模式&#xff1a;兼容MySQL&#xff0c;COMPATIBLE_MODE 4 内存占比&#xff1a;90%&#xff0c;MAX_OS_MEMORY 90 目标内存&#xff1a;2G&#xff08;不影响申请内存超过2G&#xff0c;但这部分内存不会回收&#xff09;&#xff0c;MEMORY_TARGET 2000 参考 https:…...

docker入门 自记录

1.先自己下载离线bao .tar 或者 自己pull docker pull xxx 如果遇到网络问题就换源 2.之后run一个docker 后面是映射本地路径 sudo docker run -it --name ultralytics_241124 --gpus all --shm-size 8G -v /home/oppenheim/detect/train241204/docker:/home/docker ultralyti…...

Axure设计之动态图表——排名图(中继器)

粉丝问我可不可以用中继器做条形图&#xff0c;而且是要做成自动增长的排名图表。所以现在教大家怎么用axure来制作制作排名图。 这个原型制作完成之后&#xff0c;后期有类似的功能&#xff0c;直接拿过去使用也比较简单&#xff0c;基本只需要修改中继器数据就可以了。喜欢、…...

在Java中几种常用数据压缩算法的实现及其优劣势

在Java中几种常用数据压缩算法的实现及其优劣势 背景&#xff1a;项目需要引入Redis作为缓存组件&#xff0c;需要考虑到Redis的内存占用&#xff08;机器内存越大&#xff0c;成本越高&#xff09;&#xff0c;因此需要引入数据压缩。 1、介绍 数据压缩是计算机领域中一项重要…...

Mac通过Windows App远程访问windows电脑报错0x104的解决办法

1、远程windows电脑&#xff0c;确保打开 远程访问 2、Mac电脑上的配置&#xff1a; 2.1 新版的windows app远程桌面软件相比之前老的Microsoft Remote Desktop&#xff0c;对于mac来说&#xff0c;不会弹出“是否允许该app查找本地网络设备”&#xff0c;需要手动打开 操作步…...

Spring Boot接口返回统一格式

统一的标准数据格式好处 SpringBoot返回统一的标准数据格式主要有以下几点好处&#xff1a; 增强接口的可读性和可维护性&#xff0c;使得前端开发人员能够更加清晰地理解接口返回的数据结构&#xff0c;从而提高开发效率。 降低前后端耦合度&#xff0c;当后端需要修改返回数…...

小程序入门学习(八)之页面事件

一、下拉刷新新事件 1. 什么是下拉刷新 下拉刷新是移动端的专有名词&#xff0c;指的是通过手指在屏幕上的下拉滑动操作&#xff0c;从而重新加载页面数据的行为。 2. 启用下拉刷新 启用下拉刷新有两种方式&#xff1a; 全局开启下拉刷新&#xff1a;在 app.json 的 window…...

Docker基础【windows环境】

课程内容来自尚硅谷3小时速通Docker教程 1. Docker简介 Docker 通过 Docker Hub 实现一行命令安装应用&#xff08;镜像&#xff09;【Nginx&#xff0c;Mysql等】&#xff0c;避免繁琐的部署操作。同时通过轻量级&#xff08;相对于虚拟机&#xff09;的容器化的思想&#x…...

【docker】docker compose 和 docker swarm

Docker Compose 和 Docker Swarm 都是 Docker 生态中的工具&#xff0c;但它们有不同的用途和目标。 下面是这两者的主要区别&#xff0c;帮助你理解它们在不同场景中的使用。 1. 用途和目标 Docker Compose: 目标&#xff1a;主要用于在单个机器上定义和运行多个容器应用&a…...

第三部分:进阶概念 7.数组与对象 --[JavaScript 新手村:开启编程之旅的第一步]

第三部分&#xff1a;进阶概念 7.数组与对象 --[JavaScript 新手村&#xff1a;开启编程之旅的第一步] 在 JavaScript 中&#xff0c;数组和对象是两种非常重要的数据结构&#xff0c;它们用于存储和组织数据。尽管它们都属于引用类型&#xff08;即它们存储的是对数据的引用而…...

LabVIEW密码保护与反编译的安全性分析

在LabVIEW中&#xff0c;密码保护是一种常见的源代码保护手段&#xff0c;但其安全性并不高&#xff0c;尤其是在面对专业反编译工具时。理论上&#xff0c;所有软件的反编译都是可能的&#xff0c;尽管反编译不一定恢复完全的源代码&#xff0c;但足以提取程序的核心功能和算法…...

Docker魔法:用docker run -p轻松开通容器服务大门

前言 “容器”与“虚拟化”作为现代软件开发和运维中的关键概念,已经广泛应用于各个技术领域。然而,在使用 Docker 部署应用时,常常会遇到这样的问题:容器正常运行,却无法让外界访问其内部服务?即使容器内的应用顺利启动,外部无法通过浏览器或 API 进行连接。此时,doc…...

ubuntu防火墙(三)——firewalld使用与讲解

本文是Linux下&#xff0c;用ufw实现端口关闭、流量控制(二) firewalld使用方式 firewalld 是一个动态管理防火墙的工具&#xff0c;主要用于 Linux 系统&#xff08;包括 Ubuntu 和 CentOS 等&#xff09;。它提供了一个基于区域&#xff08;zones&#xff09;和服务&#x…...

【大数据技术基础 | 实验十一】Hive实验:新建Hive表

文章目录 一、实验目的二、实验要求三、实验原理四、实验环境五、实验内容和步骤&#xff08;一&#xff09;启动Hive&#xff08;二&#xff09;创建表&#xff08;三&#xff09;显示表&#xff08;四&#xff09;显示表列&#xff08;五&#xff09;更改表&#xff08;六&am…...

Python实现Excel中数据条显示

Python中要实现百分比数据条的显示&#xff0c;可以使用pandas库&#xff0c;pandas图表样式的设置与Excel中的条件格式设置比较类似&#xff0c;比如Excel里常用的数据条的用法&#xff0c;在pandas中使用代码进行高亮显示&#xff0c;用来突出重点数据&#xff0c;下面一起来…...

矩阵与向量的基本概念

**一、四个基本子空间的定义** 1. **行空间&#xff08;Row Space&#xff09;** 行空间是由矩阵的所有行向量所形成的空间。它包含所有可能的行向量的线性组合。行空间的维度称为矩阵的行秩。 2. **零空间&#xff08;Null Space&#xff09;** 零空间是与矩阵相乘后结果为零的…...

亚马逊云科技大语言模型加速OCR应用场景发展

目录 前言Amazon Bedrock关于OCR解决方案Amazon Bedrock进行OCR关键信息提取方案注册亚马逊账号API调用环境搭建 总结 前言 大语言模型是一种基于神经网络的自然语言处理技术&#xff0c;它能够学习和预测自然语言文本中的规律和模式&#xff0c;可以理解和生成自然语言的人工…...

十九(GIT2)、token、黑马就业数据平台(页面访问控制(token)、首页统计数据、登录状态失效)、axios请求及响应拦截器、Git远程仓库

1. JWT介绍 JSON Web Token 是目前最为流行的跨域认证解决方案&#xff0c;本质就是一个包含信息的字符串。 如何获取&#xff1a;在使用 JWT 身份验证中&#xff0c;当用户使用其凭据成功登录时&#xff0c;将返回 JSON Web Token&#xff08;令牌&#xff09;。 作用&#xf…...

深入探索现代 IT 技术:从云计算到人工智能的全面解析

目录 1. 云计算&#xff1a;重塑 IT 基础设施 2. 大数据&#xff1a;挖掘信息的价值 3. 物联网&#xff08;IoT&#xff09;&#xff1a;连接物理世界 4. 区块链&#xff1a;重塑信任机制 5. 人工智能&#xff08;AI&#xff09;&#xff1a;智能未来的驱动力 结语 在当今…...